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

2.7 KiB

Snap the Dot

Introduction @unplugged

Animation of the snap the dot game

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.

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.

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.

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.

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.

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).

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.