pxt-calliope/docs/projects/snap-the-dot.md
Juri Wolf a93febb5b7
Map and clean deprecated functions (#175)
* add image and deprecated arrow functions

* update locales

* map basic.showArrow

* map arrow blocks

* map & remove arrow images

* remove arrow blocks

* update locales

* remove & patch:
rgbw -> rgb
button/pin pressed -> button/pin event
loudness -> soundLevel

* update ts mappings for arrows

* add wip ts patch rules

* update .blocks files

* use Click instead of Down as default in Documentation and tests

* patch test.blocks

* fix lowercase name tag

* update test.blocks

* update blocks test files

* update blocks test files

* format block files

* pass blocks file tests

* fix ts mapping

* fix color.defl value

closes https://github.com/microsoft/pxt-calliope/issues/136

* fix ts mappings

- add optional spacing at the end of rgbw()
- map up to v4.0.19

* add suggested changes

* replace innerText by textContent

Co-authored-by: JW <gitkraken@juriwolf.de>
Co-authored-by: Juri <info@juriwolf.de>
2022-04-26 10:28:42 -07:00

97 lines
2.7 KiB
Markdown

# Snap the Dot
## Introduction @unplugged
![Animation of the snap the dot game](/calliope/tutorials/09_snap_the_dot_animation.gif)
Snap the dot is a game of skill where the player has to press **A** exactly when the dot reaches the center of the screen.
This tutorial shows how to use the game engine.
## Make a sprite variable @fullscreen
Create a new variable called `sprite`. Drag a ``||variables:set sprite to||`` into the ``||basic:on start||`` on the workspace.
```blocks
let sprite = 0
```
## Create a sprite @fullscreen
Pull out a ``||game:create sprite||`` block and put it in ``||variables:set sprite to||`` replacing the `0`. A sprite is a single pixel that can move on the screen. It has an ``x`` and ``y`` position along with a direction of motion.
```blocks
let sprite = game.createSprite(2, 2)
```
## Move the dot @fullscreen
The sprite starts in the center facing right. Put a ``||game:move||`` block into the ``||basic:forever||`` to make it move. Notice how it moves to the right but does not bounce back.
```blocks
let sprite = game.createSprite(2, 2)
basic.forever(function () {
sprite.move(1)
})
```
## Bounce @fullscreen
Grab a ``||game:if on edge, bounce||`` block to make the sprite bounce on the side of the screen. Also, add a ``||basic:pause||`` block to slow down the sprite.
```blocks
let sprite = game.createSprite(2, 2)
basic.forever(function () {
sprite.move(1)
sprite.ifOnEdgeBounce()
basic.pause(100)
})
```
## Test and download
Use the simulator to find the best speed. If you have a @boardname@, press ``|Download|`` to try it out on the device.
## Button handling @fullscreen
When **A** is pressed, we test if the sprite is in the center or not.
Use a ``||input:on button pressed||`` block to handle the **A** button. Put in a ``||logic:if||`` block and test if ``||game:x||`` is equal to `2`.
```blocks
let sprite = game.createSprite(2, 2)
input.onButtonEvent(Button.A, ButtonEvent.Click, function () {
if (sprite.get(LedSpriteProperty.X) == 2) {
} else {
}
})
basic.forever(function () {
sprite.move(1)
basic.pause(100)
sprite.ifOnEdgeBounce()
})
```
## Score and game over
Finally, pull out an ``||game:add score||`` and a ``||game:game over||`` block to handle both success (sprite in the center) and failure (sprite not in the center).
```blocks
let sprite = game.createSprite(2, 2)
input.onButtonEvent(Button.A, ButtonEvent.Click, function () {
if (sprite.get(LedSpriteProperty.X) == 2) {
game.addScore(1)
} else {
game.gameOver()
}
})
basic.forever(function () {
sprite.move(1)
basic.pause(100)
sprite.ifOnEdgeBounce()
})
```
## Test and download
Your game is ready! If you have a @boardname@, press ``|Download|`` to try it out on the device.