a93febb5b7
* 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>
97 lines
2.7 KiB
Markdown
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.
|