diff --git a/docs/gamejam/dec2023.md b/docs/gamejam/dec2023.md new file mode 100644 index 00000000000..832f27fa185 --- /dev/null +++ b/docs/gamejam/dec2023.md @@ -0,0 +1,60 @@ +# MakeCode Arcade Game Jam + +![Image of dinosaurs and a volcano with the text 'MakeCode Arcade Prehistoric Jam'](/static/gamejam/jams/holding/gamejambanner.png) + +## It's game jam time! + +Welcome to the 9th Official Microsoft MakeCode Game Jam! + +This is a fun competition where you can pit your game development skills against others to build a game using [MakeCode Arcade](https://arcade.makecode.com), a game engine for retro pixel-art games that run in the browser or on handheld game devices. + +--- + +### Theme + +Come back on Monday, December 4th to find out what the theme will be for this competition. + +--- + +### About + +You have until December 17th to create and submit your +game with the chance to be featured on the Game Jam page, +MakeCode live stream and social media channels! + + +#### Social + +Share your game with us on social media. Tag us in your +creations using @MSMakecode or the hashtag #makecode. + +Don't forget to follow us on Twitter to find out about the +newest MakeCode Arcade updates, games, and competitions! + +[YouTube](https://www.youtube.com/microsoftmakecode) | [Twitter](https://twitter.com/msmakecode) | [Twitch](https://www.twitch.tv/msmakecode) + + + #### Rules + +- Games must be built in MakeCode Arcade +- Your game must relate to the provided theme. +- Keep the games PG: no inappropriate, offensive, or excessively violent content. +- All games must be submitted by 11:59 pm PST on **December 17th**. +- You are welcome to work together with others on a game. +- All games must be submitted by someone who is at least 13 years old. + (Students under 13 can participate, but someone 13 or over must submit their game.) + +--- + +### Submissions + +Don’t to forget to submit your game before +**December 17th** +for your chance to be featured! + +Standout games will be +highlighted here and on MakeCode social media channels. + +Follow us on [YouTube](https://www.youtube.com/microsoftmakecode), [Twitter](https://twitter.com/msmakecode), or [Twitch](https://www.twitch.tv/msmakecode) to find out who made our list of favorites. + + diff --git a/docs/graveyard/tutorials/chase-the-pizza.md b/docs/graveyard/tutorials/chase-the-pizza.md new file mode 100644 index 00000000000..f2edaa3682b --- /dev/null +++ b/docs/graveyard/tutorials/chase-the-pizza.md @@ -0,0 +1,295 @@ +# Chase the Pizza + +### ~button /#tutorial:/tutorials/chase-the-pizza + +Try this tutorial! + +### ~ + +## {Introduction @unplugged} + +![Game animation](/static/tutorials/chase-the-pizza.gif) + +In this tutorial you will create a game with 2 sprites, a ``||sprites:Player||`` sprite and a ``||sprites:Food||`` sprite. The goal of the game is to eat as much pizza as you can before the time runs out! Each time your player catches the pizza, you gain points and the countdown is restarted. + +## {Step 1} + +Open the ``||scene:Scene||`` Toolbox drawer and drag the ``||scene:set background color||`` block into the ``||loops:on start||`` block on your Workspace. Click **Next** to go to the next step in the Tutorial. + +```blocks +// @highlight +scene.setBackgroundColor(0) +``` + +## {Step 2} + +In the ``||scene:set background color||`` block, click on the grey color oval to open the color palette and select a background color. To see what this looks like in your game, look at the Game Simulator window. + +![Choose background color](/static/tutorials/chase-the-pizza/background-color.jpg) + +## {Step 3} + +Open the ``||sprites:Sprites||`` Toolbox drawer and drag the first block, ``||variables(sprites):set mySprite||`` into the ``||loops:on start||`` block on your Workspace. This will create a new ``||sprites:Player||`` character for your game. + +```blocks +let mySprite: Sprite = null +scene.setBackgroundColor(7) +// @highlight +mySprite = sprites.create(img` +. . . . . . . . . . . . . . . . +. . . . . . . . . . . . . . . . +. . . . . . . . . . . . . . . . +. . . . . . . . . . . . . . . . +. . . . . . . . . . . . . . . . +. . . . . . . . . . . . . . . . +. . . . . . . . . . . . . . . . +. . . . . . . . . . . . . . . . +. . . . . . . . . . . . . . . . +. . . . . . . . . . . . . . . . +. . . . . . . . . . . . . . . . +. . . . . . . . . . . . . . . . +. . . . . . . . . . . . . . . . +. . . . . . . . . . . . . . . . +. . . . . . . . . . . . . . . . +. . . . . . . . . . . . . . . . +`, SpriteKind.Player) +``` + +## {Step 4} + +Draw your ``||sprites:Player||`` character by clicking on the grey square in the ``||variables(sprites):set mySprite||`` block to open the Sprite Editor. Use the color palette and design tools to draw an image on the canvas. Click **Done** when you are finished. + +![Image editor](/static/tutorials/chase-the-pizza/image-editor.gif) + +## {Step 5} + +Open the ``||controller:Controller||`` Toolbox drawer and drag the ``||controller:move mySprite with buttons||`` block after the ``||variables(sprites):set mySprite||`` block. This will allow you to move your ``||sprites:Player||`` sprite around the screen with the arrow keys. Try it out in the Game Simulator + +```blocks +let mySprite: Sprite = null +scene.setBackgroundColor(7) +mySprite = sprites.create(img` +. . . . . 5 5 5 5 5 5 . . . . . +. . . 5 5 5 5 5 5 5 5 5 5 . . . +. . 5 5 5 5 5 5 5 5 5 5 5 5 . . +. 5 5 5 5 5 5 5 5 5 5 5 5 5 5 . +. 5 5 5 f f 5 5 5 5 f f 5 5 5 . +5 5 5 5 f f 5 5 5 5 f f 5 5 5 5 +5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 +5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 +5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 +5 5 f 5 5 5 5 5 5 5 5 5 5 f 5 5 +5 5 5 f 5 5 5 5 5 5 5 5 f 5 5 5 +. 5 5 5 f 5 5 5 5 5 5 f 5 5 5 . +. 5 5 5 5 f f f f f f 5 5 5 5 . +. . 5 5 5 5 5 5 5 5 5 5 5 5 . . +. . . 5 5 5 5 5 5 5 5 5 5 . . . +. . . . . 5 5 5 5 5 5 . . . . . +`, SpriteKind.Player) +// @highlight +controller.moveSprite(mySprite) +``` + +## {Step 6} + +Open the ``||sprites:Sprites||`` Toolbox drawer and drag another ``||variables(sprites):set mySprite2||`` block into the ``||loops:on start||`` block on your Workspace. This will be the **pizza** sprite in our game. + +```blocks +let mySprite: Sprite = null +let mySprite2: Sprite = null +scene.setBackgroundColor(7) +mySprite = sprites.create(img` +. . . . . 5 5 5 5 5 5 . . . . . +. . . 5 5 5 5 5 5 5 5 5 5 . . . +. . 5 5 5 5 5 5 5 5 5 5 5 5 . . +. 5 5 5 5 5 5 5 5 5 5 5 5 5 5 . +. 5 5 5 f f 5 5 5 5 f f 5 5 5 . +5 5 5 5 f f 5 5 5 5 f f 5 5 5 5 +5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 +5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 +5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 +5 5 f 5 5 5 5 5 5 5 5 5 5 f 5 5 +5 5 5 f 5 5 5 5 5 5 5 5 f 5 5 5 +. 5 5 5 f 5 5 5 5 5 5 f 5 5 5 . +. 5 5 5 5 f f f f f f 5 5 5 5 . +. . 5 5 5 5 5 5 5 5 5 5 5 5 . . +. . . 5 5 5 5 5 5 5 5 5 5 . . . +. . . . . 5 5 5 5 5 5 . . . . . +`, SpriteKind.Player) +controller.moveSprite(mySprite) +// @highlight +mySprite2 = sprites.create(img` +. . . . . . . . . . . . . . . . +. . . . . . . . . . . . . . . . +. . . . . . . . . . . . . . . . +. . . . . . . . . . . . . . . . +. . . . . . . . . . . . . . . . +. . . . . . . . . . . . . . . . +. . . . . . . . . . . . . . . . +. . . . . . . . . . . . . . . . +. . . . . . . . . . . . . . . . +. . . . . . . . . . . . . . . . +. . . . . . . . . . . . . . . . +. . . . . . . . . . . . . . . . +. . . . . . . . . . . . . . . . +. . . . . . . . . . . . . . . . +. . . . . . . . . . . . . . . . +. . . . . . . . . . . . . . . . +`, SpriteKind.Player) +``` + +## {Step 7} + +In the ``||variables(sprites):set mySprite2||`` block, click on ``||variables(noclick):mySprite2||`` to open the menu, and select ``Rename variable...`` Type in ``pizza`` as the new sprite name and click **Ok**. + +![Rename mySprite2](/static/tutorials/chase-the-pizza/rename-mysprite2.gif) + +## {Step 8} + +In the ``||variables(noclick):set pizza||`` block, click on the ``||sprites:Player||`` kind to open the menu of different Sprite kinds. Select ``||sprites:Food||`` as your ``||variables(noclick):pizza||`` sprite kind. + +![Set sprite kind](/static/tutorials/chase-the-pizza/sprite-kind.jpg) + +## {Step 9} + +Click on the grey box for ``||variables(noclick):set pizza||`` and then select the **Gallery** view. Scroll to find the image of a small pizza (or any other image you like!) and select it to load into the image editor. + +![Image gallery](/static/tutorials/chase-the-pizza/image-gallery.gif) + +## {Step 10} + +Open the ``||sprites:Sprites||`` Toolbox drawer and drag the ``||sprites:on sprite overlaps otherSprite||`` block onto your Workspace (you can place this anywhere). + +```blocks +// @highlight +sprites.onOverlap(SpriteKind.Player, SpriteKind.Player, function (sprite, otherSprite) { + +}) +``` + +## {Step 11} + +In the ``||sprites:on sprite overlaps otherSprite||`` block, click on the second ``||sprites:Player||`` kind after ``||variables(noclick):otherSprite||`` to open the menu. Select ``||sprites:Food||`` as its kind. + +![Overlap sprite kind](/static/tutorials/chase-the-pizza/overlap-kind-sprite.png) + +## {Step 12} + +When our ``||sprites:Player||`` overlaps with the ``||variables(noclick):pizza||`` sprite, let’s add a point to our game score. Open the ``||info:Info||`` Toolbox drawer and drag the ``||info:change score||`` block into the ``||sprites:on sprite overlaps otherSprite||`` block. + +```blocks +sprites.onOverlap(SpriteKind.Player, SpriteKind.Food, function (sprite, otherSprite) { + // @highlight + info.changeScoreBy(1) +}) +``` + +## {Step 13} + +Let’s set the position for ``||variables(noclick):pizza||`` to random locations around the screen. Open the ``||sprites:Sprites||`` Toolbox drawer and drag the ``||sprites:set mySprite position||`` block into the ``||sprites:on sprite overlaps otherSprite||`` block on your Workspace. + +```blocks +let mySprite: Sprite = null +sprites.onOverlap(SpriteKind.Player, SpriteKind.Food, function (sprite, otherSprite) { + info.changeScoreBy(1) + // @highlight + mySprite.setPosition(0, 0) +}) +``` + +## {Step 14} + +In the ``||sprites:set mySprite position||`` block, click on the ``||variables(noclick):mySprite||`` variable to open the menu, and select your ``||variables(noclick):pizza||`` sprite. + +![Change mySprite to pizza](/static/tutorials/chase-the-pizza/sprite-position-rename.png) + +## {Step 15} + +Open the ``||math:Math||`` Toolbox drawer and drag two ``||math:pick random||`` blocks onto the Workspace. Drop one into the ``x`` coordinate of the ``||sprites:set pizza position||`` block, and the other into the ``y`` coordinate replacing the ``0`` values. + +```blocks +let pizza: Sprite = null +sprites.onOverlap(SpriteKind.Player, SpriteKind.Food, function (sprite, otherSprite) { + info.changeScoreBy(1) + pizza.setPosition(randint(0, 10), randint(0, 10)) +}) +``` + +## {Step 16} + +The Arcade game screen is `160` pixels wide, and `120` pixels high. In the first ``||math:pick random||`` block in the `x` coordinate of the ``||sprites:set pizza position||`` block, change the maximum value from ``10`` to **160**. In the second ``||math:pick random||`` block in the ``y`` coordinate, change the maximum value from ``10`` to **120**. + +```blocks +let pizza: Sprite = null +sprites.onOverlap(SpriteKind.Player, SpriteKind.Food, function (sprite, otherSprite) { + info.changeScoreBy(1) + pizza.setPosition(randint(0, 160), randint(0, 120)) +}) +``` + +## {Step 17} + +Let’s restart our countdown each time. Open the ``||info:Info||`` Toolbox drawer and drag a ``||info:start countdown||`` block into the ``||sprites:on sprite overlaps otherSprite||`` block on your Workspace. + +```blocks +let pizza: Sprite = null +sprites.onOverlap(SpriteKind.Player, SpriteKind.Food, function (sprite, otherSprite) { + info.changeScoreBy(1) + pizza.setPosition(randint(0, 160), randint(0, 120)) + // @highlight + info.startCountdown(10) +}) +``` +## {Complete} + +Congratulations, you have completed your game! Use the Game Simulator to play by moving your ``||sprites:Player||`` around the screen to try and eat as much pizza as possible before the time runs out. What’s your high score? + +```blocks +let pizza: Sprite = null +let mySprite: Sprite = null +scene.setBackgroundColor(7) +mySprite = sprites.create(img` +. . . . . 5 5 5 5 5 5 . . . . . +. . . 5 5 5 5 5 5 5 5 5 5 . . . +. . 5 5 5 5 5 5 5 5 5 5 5 5 . . +. 5 5 5 5 5 5 5 5 5 5 5 5 5 5 . +. 5 5 5 f f 5 5 5 5 f f 5 5 5 . +5 5 5 5 f f 5 5 5 5 f f 5 5 5 5 +5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 +5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 +5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 +5 5 f 5 5 5 5 5 5 5 5 5 5 f 5 5 +5 5 5 f 5 5 5 5 5 5 5 5 f 5 5 5 +. 5 5 5 f 5 5 5 5 5 5 f 5 5 5 . +. 5 5 5 5 f f f f f f 5 5 5 5 . +. . 5 5 5 5 5 5 5 5 5 5 5 5 . . +. . . 5 5 5 5 5 5 5 5 5 5 . . . +. . . . . 5 5 5 5 5 5 . . . . . +`, SpriteKind.Player) +controller.moveSprite(mySprite) +pizza = sprites.create(img` +. . . . . . b b b b . . . . . . +. . . . . . b 4 4 4 b . . . . . +. . . . . . b b 4 4 4 b . . . . +. . . . . b 4 b b b 4 4 b . . . +. . . . b d 5 5 5 4 b 4 4 b . . +. . . . b 3 2 3 5 5 4 e 4 4 b . +. . . b d 2 2 2 5 7 5 4 e 4 4 e +. . . b 5 3 2 3 5 5 5 5 e e e e +. . b d 7 5 5 5 3 2 3 5 5 e e e +. . b 5 5 5 5 5 2 2 2 5 5 d e e +. b 3 2 3 5 7 5 3 2 3 5 d d e 4 +. b 2 2 2 5 5 5 5 5 5 d d e 4 . +b d 3 2 d 5 5 5 d d d 4 4 . . . +b 5 5 5 5 d d 4 4 4 4 . . . . . +4 d d d 4 4 4 . . . . . . . . . +4 4 4 4 . . . . . . . . . . . . +`, SpriteKind.Food) + +sprites.onOverlap(SpriteKind.Player, SpriteKind.Food, function (sprite, otherSprite) { + info.changeScoreBy(1) + pizza.setPosition(randint(0, 160), randint(0, 120)) + // @highlight + info.startCountdown(10) +}) +``` diff --git a/docs/hour-of-code/all.md b/docs/hour-of-code/all.md index d9f43230924..bb6084f77fe 100644 --- a/docs/hour-of-code/all.md +++ b/docs/hour-of-code/all.md @@ -2,7 +2,26 @@ Join us in celebrating Computer Science Education Week by playing, designing, and coding your very own retro arcade games! -## Activities +## New for 2023 + +```codecard +[ + { + "name": "Sparks Flying", + "description": "Create a game that challenges you to light a fire to keep yourself warm, but be careful! It's not as easy as it sounds.", + "url": "aka.ms/prehistoric", + "imageUrl": "/static/hour-of-code/2023/sparks.gif" + }, { + "name": "Sparks Flying (Jr)", + "description": "This simplified version of Sparks Flying allows students as young as kindergarten to experience the joy of coding their own game in MakeCode Arcade.", + "url": "aka.ms/sparky", + "imageUrl": "/static/hour-of-code/2023/jr.png" + } +] +``` + +## Previous Activities + ```codecard [ @@ -10,12 +29,12 @@ Join us in celebrating Computer Science Education Week by playing, designing, an "name": "2022 Hour of Code", "description": "Code your own classroom carnival with games like Whack-the-Mole, Burstin' Balloons, and Target Practice", "url": "/hour-of-code-2022", - "imageUrl": "/static/hour-of-code/2022/boothAni.gif" + "imageUrl": "/static/hour-of-code/2022/booth.png" }, { "name": "2021 Hour of Code", "description": "Code a fire-fighting airtanker plane with Microsoft MakeCode Arcade that sprays water to put out the forest fires", "url": "/hour-of-code-2021", - "imageUrl": "/static/hour-of-code/2021/forest-skillmap-game.gif" + "imageUrl": "/static/hour-of-code/2021/forest.png" }, { "name": "2020 Hour of Code", @@ -26,8 +45,11 @@ Join us in celebrating Computer Science Education Week by playing, designing, an ] ``` + ## See also +[Sparks Flying](aka.ms/prehistoric)
+[Sparks Flying JR](aka.ms/sparky)
[2022 Hour of Code](/hour-of-code-2022)
[2021 Hour of Code](/hour-of-code-2021)
[2020 Hour of Code](/hour-of-code-2020) diff --git a/docs/static/gamejam/jams/holding/gamejambanner.png b/docs/static/gamejam/jams/holding/gamejambanner.png new file mode 100644 index 00000000000..6182bb29b19 Binary files /dev/null and b/docs/static/gamejam/jams/holding/gamejambanner.png differ diff --git a/docs/static/hour-of-code/2021/forest.png b/docs/static/hour-of-code/2021/forest.png new file mode 100644 index 00000000000..921341d3277 Binary files /dev/null and b/docs/static/hour-of-code/2021/forest.png differ diff --git a/docs/static/hour-of-code/2022/booth.png b/docs/static/hour-of-code/2022/booth.png new file mode 100644 index 00000000000..dfcb7fe95a6 Binary files /dev/null and b/docs/static/hour-of-code/2022/booth.png differ diff --git a/docs/static/hour-of-code/2023/jr.png b/docs/static/hour-of-code/2023/jr.png new file mode 100644 index 00000000000..b302ef4694d Binary files /dev/null and b/docs/static/hour-of-code/2023/jr.png differ diff --git a/docs/static/hour-of-code/2023/sparks.gif b/docs/static/hour-of-code/2023/sparks.gif new file mode 100644 index 00000000000..a2cd731c4f7 Binary files /dev/null and b/docs/static/hour-of-code/2023/sparks.gif differ diff --git a/docs/test/tutorials/chase-the-pizza.md b/docs/test/tutorials/chase-the-pizza.md index fab61dd8c3c..e9ba72d1651 100644 --- a/docs/test/tutorials/chase-the-pizza.md +++ b/docs/test/tutorials/chase-the-pizza.md @@ -44,6 +44,8 @@ scene.setBackgroundColor(13) hint~ +💡 _Feel free to choose your own color if you don't like the swatch in the block._ + --- @@ -154,7 +156,7 @@ mySprite = sprites.create(img` into **the end of** the
``||loops(noclick):on start||`` block already in your workspace. -Now you can move your sprite around the screen using the arrow keys. +Now you can move your sprite around the screen using the arrow buttons on the game pad or your keyboard. ~hint Show me 🔍 @@ -198,7 +200,7 @@ controller.moveSprite(mySprite) - :binoculars: Test your project in the game window! -You should be able to move your sprite with the arrow keys. +You should be able to move your sprite with the joypad or arrow keys on your keyboard. ![Look for the game window in the lower right](/static/tutorials/chase-the-pizza/game.png) @@ -271,7 +273,7 @@ pizza = sprites.create(img`.`, SpriteKind.Food) ## {Step 8} -- :mouse pointer: Draw your sprite by clicking the empty grey square inside
+- :mouse pointer: Choose your pizza by clicking the empty grey square inside
``||variables(noclick):set [pizza] to sprite [ ] of kind [Food]||``
to open the **Sprite Editor**. @@ -287,6 +289,9 @@ to open the **Sprite Editor**. hint~ + +💡 _Feel free to draw your own pizza if you prefer!_ + ```blockconfig.local let pizza = sprites.create(img`.`, SpriteKind.Player) ``` @@ -349,6 +354,10 @@ b 5 5 5 5 d d 4 4 4 4 . . . . . container into **an empty area** of the workspace. +🤷🏽‍♀️ _Need help? Click the lightbulb in the circle below to see what blocks you need in this step._ + + + ```blockconfig.local let pizza = sprites.create(img`.`, SpriteKind.Player) ``` @@ -422,7 +431,7 @@ In Arcade, we use this block: randint(0, scene.screenWidth()) ``` -to ask for a random number that between **1** and the **width of the screen**. +to ask for a random number between **0** and the **width of the screen**. hint~ diff --git a/docs/test/tutorials/turkey-jr.md b/docs/test/tutorials/turkey-jr.md new file mode 100755 index 00000000000..95f3a6a60da --- /dev/null +++ b/docs/test/tutorials/turkey-jr.md @@ -0,0 +1,338 @@ +# Move the Turkey +### @explicitHints true + + +## Welcome @showdialog + +Happy **Turkey Day!** + +This activity will show you how to make a jumpy +platform game. + +![An anigif of the game we're about to build](/static/skillmap/turkey/turkey1.gif "Look what we're about to do today!") + +Click "Ok" to get started. + + + + +## {2. We need a HERO} + +**Where's the turkey??** + +Let's create a turkey sprite and get it moving before we do anything else. + +~hint What's a sprite? 💡 + +--- + +In Arcade, each character or image that does something is called a **SPRITE**. + +Sprites have properties that you can use and change -- things like scale, position, and lifespan are all properties of sprites. + +Our turkey will be a sprite, too. + +hint~ + +- :paper plane: From the ``||sprites:Sprites||`` category, +grab
+```block +let bigTurkey = sprites.create(img`.`, SpriteKind.Player) +``` +
and snap it inside and at **the end** of the ``||loops(noclick):on start||`` container. + + + +#### ~ tutorialhint +```blocks + +// @highlight +let bigTurkey = sprites.create(img`.`, SpriteKind.Player) +``` + + +## {3. We need a Turkey} + + +- :paint brush: To choose the image of the big turkey, click the empty grey box, +then switch to **My Assets** and click the turkey named **player**. + +![Pick player from My Assets](/static/skillmap/turkey/pick-player.gif "Toggle to My Assets and choose player") + +#### ~ tutorialhint +```blocks + +// @highlight +let bigTurkey = sprites.create(assets.image`player`, SpriteKind.Player) +``` + + + +## {4. Control the Player} + +**Time to get the player moving** + +--- + +- :game: From the ``||controller:Controller||`` category, grab
+```block +controller.moveSprite(bigTurkey, 100, 0) +``` +
and drag it into **the end** of the
+``||loops(noclick):on start||`` +
container. + +This block is set in a way that lets you move the turkey left and right, but not up or down. + +#### ~ tutorialhint + +```blocks + +let bigTurkey = sprites.create(assets.image`player`, SpriteKind.Player) +// @highlight +controller.moveSprite(bigTurkey, 100, 0) +``` + + +## Try It + +**Check the Game Window** + +The turkey should move left when you click the left arrow and move right with the right arrow. + + +## {6. Add gravity} + +**To make the game playable, it needs gravity.** + +For that, we'll add acceleration. + +~hint What is acceleration?💡 + +--- + +Acceleration controls how speed changes in a direction. + +We need to play with the turkey's speed in the vertical (up & down) direction. + +hint~ + +- :paper plane: From the ``||sprites:Sprites||`` category, grab
+ +```block +let bigTurkey: Sprite = null +bigTurkey.ay = 500 +``` + +
and snap it inside at **the end** of the +``||loops(noclick):on start||`` container. + + +#### ~ tutorialhint + +```blocks + +let bigTurkey = sprites.create(assets.image`player`, SpriteKind.Player) +controller.moveSprite(bigTurkey, 100, 0) +// @highlight +bigTurkey.ay = 500 +``` + +## {7. Follow with Camera} + +**Oops! The turkey falls off-screen!** + +--- + +- :tree: To keep the turkey in sight go to ``||scene:Scene||`` and drag
+```block +scene.cameraFollowSprite(bigTurkey) +``` +
to **the end** of the +``||loops(noclick):on start||`` container. + +#### ~ tutorialhint + +```blocks + +let bigTurkey = sprites.create(assets.image`player`, SpriteKind.Player) +controller.moveSprite(bigTurkey, 100, 0) +bigTurkey.ay = 500 +// @highlight +scene.cameraFollowSprite(bigTurkey) + +``` + + +## Look Again + +🕹️ 🕹️ 🕹️ +**Look at your game to make sure you can see the turkey land on a platform.** + + + +## {9. Start at the Bottom} + +**The turkey landed, but it's already near the top of the tilemap!** + +Let's move it to a special tile on the ground. + +--- + +- :tree: From ``||scene:Scene||``, drag
+ +```block +tiles.placeOnRandomTile(bigTurkey, assets.tile`transparency16`) +``` + +
into **the end** of the +``||loops(noclick):on start||`` container. + + + +#### ~ tutorialhint + +```blocks + +let bigTurkey = sprites.create(assets.image`player`, SpriteKind.Player) +controller.moveSprite(bigTurkey, 100, 0) +bigTurkey.ay = 500 +scene.cameraFollowSprite(bigTurkey) +//@highlight +tiles.placeOnRandomTile(bigTurkey, assets.tile`transparency16`) +``` + +## {10. Start at the Bottom} + + +- :mouse pointer: Click the checkered square and select the **start** tile, +which looks like a purple line at the bottom of the square. +![The start tile for the turkey](/static/skillmap/turkey/start-tile.png "Choose the first non-empty tile.") + + + +#### ~ tutorialhint + +```blocks + +let bigTurkey = sprites.create(assets.image`player`, SpriteKind.Player) +controller.moveSprite(bigTurkey, 100, 0) +bigTurkey.ay = 500 +scene.cameraFollowSprite(bigTurkey) +//@highlight +tiles.placeOnRandomTile(bigTurkey, assets.tile`start`) +``` + +## {11. Jump} + +Now that the turkey is on the ground, +we need to make it jump using the **A** button! + +--- + +- :game: From ``||controller:Controller||``, drag
+```blocks +controller.A.onEvent(ControllerButtonEvent.Pressed, function () { + let bigTurkey: Sprite = null + bigTurkey.vy = -300 +}) +``` +
into **an empty area** of the workspace. + +This bundle of code will change the velocity of the turkey for a moment each time you press the A button (or space bar on your keyboard.) + +~hint What is velocity? 💡 + +--- + +Velocity is the speed that something is traveling in a specific direction. + +In this step, we're changing the speed that the turkey moves in the up/down direction. + +hint~ + +#### ~ tutorialhint + +```blocks +let bigTurkey: Sprite = null + +controller.A.onEvent(ControllerButtonEvent.Pressed, function () { + bigTurkey.vy = -300 +}) +``` + +## Play your game! + +Give your game a try using the arrow keys and A button (or space bar.) + +Can you get your turkey to the top? + + + +## Finale + +When you're finished playing your game, click **Done** +to return to the main skillmap and continue to find out how to rescue your turkey friends from their cages! + + + +```blockconfig.global +let bigTurkey = sprites.create(img`.`, SpriteKind.Player) + +tiles.placeOnRandomTile(bigTurkey, assets.tile`start`) + +scene.cameraFollowSprite(bigTurkey) +controller.moveSprite(bigTurkey, 100, 0) +bigTurkey.ay = 500 +controller.A.onEvent(ControllerButtonEvent.Pressed, function () { + bigTurkey.vy = -300 +}) +``` + +```package +carnival=github:microsoft/arcade-carnival#v0.0.7 +``` + + + +```ghost + +controller.A.onEvent(ControllerButtonEvent.Pressed, function () { + bigTurkey.vy = -300 +}) + +let bigTurkey: Sprite = null + +bigTurkey = sprites.create(assets.image`player`, SpriteKind.Player) +tiles.placeOnRandomTile(bigTurkey, assets.tile`start`) +bigTurkey.ay = 500 +controller.moveSprite(bigTurkey, 100, 0) +scene.cameraFollowSprite(bigTurkey) + +``` + + +```customts +scene.setBackgroundColor(9) +tiles.setTilemap(tilemap`level1`) + +namespace SpriteKind { + //% isKind + export const Rescued = SpriteKind.create() +} +``` + + +```assetjson +{ + "README.md": " ", + "assets.json": "", + "images.g.jres": "{\n \"image2\": {\n \"data\": \"hwQYABgAAAAAAAC7AAC7CwAAAAAAALC7uwAruwAAAAAAALBLtAsrsrALAAAAAAC7RAsrsrsLAAAAAACwS7QrsksLAAAAsLu7u7QrS0QLAAAAsCIisksrRL28AAAAsLsiIksrRNy9CwAAALC7K0vk7s69uwAAAAAAK0Lk7t7cvAAAAAAAsCLi7u7MvAsAAAAAAOvs7u7LzAsAALC7vczu7u7NzAsAALvu7rvu7u7ezAsAsOvu7u7u7u7szAsAsN7R7u7uzszszAsAsB7/7u7u7u7uvgsAu/6/Ti7u7u7uvgSwvu7eRCLu7u7uvgTgu+7dRCLu7u7uuwCwANtERC677u6+CwAAAPBMRAsAu7u7AAAAAAAAtAAAAAAAAAAAAAAACwAAAAAAAAA=\",\n \"mimeType\": \"image/x-mkcd-f4\",\n \"displayName\": \"player\"\n },\n \"image1\": {\n \"data\": \"hwQeABQAAAAAAAC7AAC7CwAAAAAAALC7uwAruwAAAAAAALBLtAsrsrALAAAAAAC7RAsrsrsLAAAAAACwS7QrsksLAAAAsLu7u7Qru8wLAAAAsCIisksr7r0MAAAAsLsiItvr7tzNAAAAALC7K9vt7s69AAAAAAAAu9vu7t7cAAAAAACwu73u7u7cAAAAAAC77r7u7u7bAAAAALDr7u7uu73dAAAAALDe0e7u7u7eAAAAALAe/+7u7u7uAAAAALv+v07u7u7uAAAAsL7u3kTi7u7uAAAA4Lvu3UTi7u5OAAAAsADbRESwu7tNAAAAAADwTEQAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=\",\n \"mimeType\": \"image/x-mkcd-f4\",\n \"displayName\": \"turkey\"\n },\n \"*\": {\n \"mimeType\": \"image/x-mkcd-f4\",\n \"dataEncoding\": \"base64\",\n \"namespace\": \"myImages\"\n }\n}", + "images.g.ts": "// Auto-generated code. Do not edit.\nnamespace myImages {\n\n helpers._registerFactory(\"image\", function(name: string) {\n switch(helpers.stringTrim(name)) {\n case \"image2\":\n case \"player\":return img`\n........................\n..................beb...\n.................beb....\n.....bbb......bbbbbb....\n.....b2b.....bbeeeeeb...\n.bb..b2bb...bbed1feedf..\nbbbb.b22b...bee1ffed4c..\nbb4bbb22b...beedfbdd44..\n.b44bb22bb..deeeee44444b\n.bb44bb222b.beeee44444b.\n..bb44bbb22bcbeeee22eb..\n....bb44442ecbeee2222...\nbbbbbbbb442ceeeeeeeeb...\nb2222222eeeeeeeeeeeeb...\nbb222b44eeeeeeeeeeeeeb..\n.bbbb444eeeeeeeceeeeeb..\n...bb4dceeeeeeeceeeeeb..\n..bb44bdcdeeeeeceeeeeb..\n..bbbbcddccbdecceeeeeb..\n......bbbdcccdeeeeeebb..\n.......bbccccccceeebb...\n........bbbcccccbbbb....\n..........bbbbbbb44.....\n........................\n`;\n case \"image1\":\n case \"turkey\":return img`\n..............................\n..............................\n..............................\n.....bbb........beb...........\n.....b2b.......beb............\n.bb..b2bb...bbbbbb............\nbbbb.b22b..bbeeeeeb...........\nbb4bbb22b.bbed1feedf..........\n.b44bb22bbbee1ffed4c..........\n.bb44bb22bbeedfbdd44..........\n..bb44bbbbdeeeee44444.........\n....bb4dddbbeee44444..........\nbbbbbbbbdeeeeeee22............\nb222222eeeeeeeeeeeb...........\nbb222beeeeeebeeeeeb...........\n.bbbbbeeeeeebeeeeeb...........\n...bbcdceeeedeeeeeb...........\n..bb4cbdcdeebeeeeeb...........\n..bbbbcddccbdeeeeed...........\n.......cbdddddeee44...........\n`;\n }\n return null;\n })\n\n helpers._registerFactory(\"animation\", function(name: string) {\n switch(helpers.stringTrim(name)) {\n\n }\n return null;\n })\n\n}\n// Auto-generated code. Do not edit.\n", + "main.blocks": "PlayerProjectileFoodEnemyTurkeybigTurkeyfollowTurkeymyEnemy", + "main.ts": "\n", + "pxt.json": "{\n \"name\": \"turkey day assets only\",\n \"description\": \"\",\n \"dependencies\": {\n \"device\": \"*\"\n },\n \"files\": [\n \"main.blocks\",\n \"main.ts\",\n \"README.md\",\n \"assets.json\",\n \"tilemap.g.jres\",\n \"tilemap.g.ts\",\n \"images.g.jres\",\n \"images.g.ts\"\n ],\n \"targetVersions\": {\n \"branch\": \"v1.6.24\",\n \"tag\": \"v1.6.24\",\n \"commits\": \"https://github.com/microsoft/pxt-arcade/commits/5bea1575ea693e0648a647cbd86cda9776d58f48\",\n \"target\": \"1.6.24\",\n \"pxt\": \"7.2.25\"\n },\n \"preferredEditor\": \"tsprj\"\n}\n", + "tilemap.g.jres": "{\n \"transparency16\": {\n \"data\": \"hwQQABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==\",\n \"mimeType\": \"image/x-mkcd-f4\",\n \"tilemapTile\": true\n },\n \"tile1\": {\n \"data\": \"hwQQABAAAAAAAAAAAAAAuwAAAAAAAADbAAAAAAAAANsAAAAAAAAA2wAAAAAAAADbAAAAAAAAANsAAAAAAAAA2wAAAAAAAADbAAAAAAAAANsAAAAAAAAA2wAAAAAAAADbAAAAAAAAANsAAAAAAAAA2wAAAAAAAADbAAAAAAAAANsAAAAAAAAAuw==\",\n \"mimeType\": \"image/x-mkcd-f4\",\n \"tilemapTile\": true,\n \"displayName\": \"start\"\n },\n \"tile2\": {\n \"data\": \"hwQQABAAAADMzMzMzMzMzNzd3d3d3d3N3LBLtLAiu8vcALtEuyK7xMzMzMzMzMzM3N3d3dzd3M3cKyKy3O7czdy7u7Lc7tzM3ACwu9zu3M3MzMzM3O7cztzd3d3c7tzO3Lvu7ty+3Mvc6x3t3O7cztzr8e/c7tzOzMzMzMz8zMzc3d3d3f3dzQ==\",\n \"mimeType\": \"image/x-mkcd-f4\",\n \"tilemapTile\": true,\n \"displayName\": \"cage\"\n },\n \"level1\": {\n \"id\": \"level1\",\n \"mimeType\": \"application/mkcd-tilemap\",\n \"data\": \"MTAxMDAwYTAwMDAyMDcwNzA3MDcwNzA3MDcwNzA3MDcwNzA3MDcwNzAxMDIwNzA3MDcwNzA3MDcwNzA3MDcwNzA3MDcwNzA3MDEwMjAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMTAyMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAxMDIwNjAwMDAwMDAwMDAwMDAwMDAwMDA1MDQwNDA2MDEwMjA5MDAwMDAwMDAwMDA1MDQwNDA0MDQwNDA0MDYwMTAyMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAxMDIwNTA0MDYwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDEwMjAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMTAyMDAwMDAwMDAwMDAwMDUwNjAwMDAwMDAwMDAwMDAxMDIwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDEwMjAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMTAyMDAwNTA0MDYwMDAwMDAwMDAwMDAwNTA0MDQwNjAxMDIwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDEwMjAwMDAwMDAwMDAwMDA1MDYwMDAwMDAwMDAwMDAwMTAyMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAxMDIwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDEwMjAwMDAwMDAwMDAwMDAwMDUwNDA0MDYwMDAwMDAwMTAyMDAwMDAwMDAwMDAwMDUwNjAwMDAwMDAwMDkwMDAxMDIwMDAwMDAwMDAwMDAwMDAwMDAwMDA1MDQwNDA2MDEwMjAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMTAyMDQwNDA0MDQwNjAwMDAwMDAwMDAwMDAwMDAwMDAxMDIwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDEwMjAwMDAwMDAwMDAwMDAwMDAwNTA0MDYwMDAwMDAwMTAyMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAxMDIwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDEwMjAwMDAwMDAwMDAwNTA0MDQwNjAwMDAwMDAwMDAwMTAyMDAwMDAwMDUwNjAwMDAwMDAwMDAwMDAwMDAwMDAxMDIwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDEwMjA2MDAwMDAwMDAwMDAwMDAwMDAwMDUwNjAwMDAwMTAyMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAxMDIwOTAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDEwMjAwMDUwNjAwMDAwMDAwMDAwMDAwMDAwNTA0MDYwMTAyMDAwMDA1MDYwMDAwMDAwMDAwMDAwMDAwMDAwMDAxMDIwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDEwMjAwMDAwMDA1MDQwNjAwMDAwMDAwMDAwMDAwMDAwMTAyMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAxMDIwMDAwMDAwMDAwMDAwMDAwMDUwNjAwMDAwMDAwMDEwMjAwMDAwMDAwMDAwMDAwMDAwMDAwMDUwNjAwMDAwMTAyMDUwNDA0MDQwNjAwMDAwMDAwMDAwMDAwMDAwMDAxMDIwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDEwMjAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDA1MDYwMTAyMDAwMDAwMDAwMDAwMDkwMDAwMDUwNjAwMDAwMDAxMDIwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDEwMjAwMDAwMDAwMDAwNTA0MDYwMDAwMDAwMDAwMDAwMTAyMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAxMDIwMDAwMDAwMDAwMDAwMDAwMDAwMDA1MDQwNDA2MDEwMjAwMDUwNDA2MDAwMDAwMDUwNjAwMDAwMDAwMDAwMTAyMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAxMDIwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDEwMjAwMDAwMDAwMDAwMDA1MDQwNjAwMDAwMDAwMDAwMTAyMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAxMDIwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDEwMjAwMDAwMDAwMDAwMDAwMDAwMDA1MDYwMDAwMDAwMTAyMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAxMDIwNTA0MDYwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDEwMjAwMDAwMDAwMDAwMDA1MDQwNjAwMDAwMDAwMDAwMTAyMDAwMDAwMDkwMDAwMDAwMDAwMDAwMDAwMDAwMDAxMDIwMDAwMDAwMDAwMDAwMDAwMDAwMDA1MDQwNDA2MDEwMjAwMDAwMDA1MDYwMDAwMDAwMDAwMDAwMDAwMDAwMTAyMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAxMDIwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDEwMjAwMDAwNTA2MDAwMDAwMDAwMDAwMDAwMDAwMDAwMTAyMDAwMDAwMDUwNjAwMDAwMDAwMDAwMDAwMDAwMDAxMDIwMDAwMDAwMDA1MDQwNDA2MDAwMDAwMDAwMDAwMDEwMjAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMTAyMDUwNDA2MDAwMDAwMDAwMDAwMDUwNjAwMDAwMDAxMDIwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDEwMjAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMTAyMDAwMDAwMDAwMDA1MDYwMDAwMDAwNTA0MDQwNjAxMDIwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDEwMjAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMTAyMDAwMDA1MDQwNDA0MDQwNDA2MDAwMDAwMDAwMDAxMDIwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDEwMjAwMDAwMDAwMDAwMDAwMDAwMDAwMDUwNjAwMDAwMTAyMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAxMDIwMDAwMDAwMDAwMDAwMDA5MDAwMDAwMDAwMDAwMDEwMjAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDUwMTAyMDAwMDAwMDAwMDA1MDQwNDA2MDAwMDAwMDAwMDAxMDIwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDEwMjAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwNTA2MDAwMTAyMDAwNTA0MDYwMDAwMDAwMDAwMDAwMDAwMDAwMDAxMDIwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDEwMjAwMDAwMDAwMDAwMDAwMDUwNjAwMDAwMDAwMDAwMTAyMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAxMDIwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDEwMjAwMDAwOTAwMDAwMDAwMDUwNDA0MDQwNjAwMDAwMTAyMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAxMDIwNTA0MDQwNDA2MDAwMDAwMDAwMDAwMDAwMDAwMDEwMjAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMTAyMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAxMDIwMDAwMDAwMDAwMDAwNTA2MDAwMDAwMDAwMDAwMDEwMjAwMDAwMDAwMDAwNTA2MDAwMDAwMDAwMDAwMDAwMTAyMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAxMDIwMDAwMDAwMDAwMDAwMDAwMDAwNTA0MDQwNDA0MDEwMjAwMDUwNDA2MDAwMDAwMDAwMDAwMDAwMDAwMDAwMTAyMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAxMDIwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDEwMjAwMDAwMDAwMDAwNTA2MDAwMDAwMDkwMDAwMDAwMTAyMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAxMDIwMDAwMDAwMDAwMDAwMDAwMDAwMDA1MDQwNjAwMDEwMjAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMTAyMDAwMDAwMDAwNTA0MDYwMDAwMDAwMDAwMDAwMDAxMDIwNTA0MDQwNjAwMDAwMDAwMDAwMDAwMDAwMDAwMDEwMjAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMTAyMDAwMDAwMDAwMDAwMDAwMDAwMDUwNDA2MDAwMDAxMDIwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDEwMjAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMTAyMDAwMDAwMDAwMDA1MDQwNjAwMDAwMDAwMDAwMDAxMDIwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDEwMjAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMTAyMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAxMDIwMDAwMDAwMDA1MDQwNjAwMDAwMDAwMDAwMDAwMDEwMjAwMDkwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMTAyMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAxMDIwNDA2MDAwMDAwMDAwMDA1MDYwMDAwMDkwMDAwMDEwMjAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMTAyMDAwMDAwMDAwMDAwMDAwMDAwMDAwNTA0MDQwNjAxMDIwMDAwMDAwNTA0MDYwMDAwMDAwMDAwMDAwMDAwMDEwMjAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMTAyMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAxMDIwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDEwMjAwMDAwNTA2MDAwMDAwMDAwMDAwMDAwMDAwMDAwMTAyMDAwMDAwMDAwMDAwMDUwNDA0MDYwMDAwMDAwMDAxMDIwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDEwMjAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwNTA0MDYwMTAyMDUwNDA2MDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAxMDIwMDAwMDAwMDAwMDAwMDA5MDAwMDAwMDAwMDAwMDEwMjAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMTAyMDAwMDAwMDAwMDA1MDQwNDA2MDAwMDAwMDAwMDAxMDIwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDEwMjAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMTAyMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDA1MDYwMDAxMDIwMDAwMDkwMDAwMDAwNTA0MDQwNjAwMDAwMDAwMDEwMjAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMTAyMDAwMDA1MDYwMDAwMDAwMDAwMDAwMDAwMDAwMDAxMDIwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDEwMjAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMTAyMDAwMDAwMDUwNDA2MDAwMDAwMDAwMDAwMDAwMDAxMDIwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDEwMjAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMTAyMDAwMDAwMDAwMDAwMDUwNDA2MDAwMDA5MDAwMDAxMDIwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDEwMjAwMDAwMDAwMDAwMDAwMDAwMDAwMDUwNDA0MDYwMTAyMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAxMDIwMDAwMDAwNTA0MDQwNjAwMDAwMDAwMDAwMDAwMDEwMjAwMDAwOTAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMTAyMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAxMDIwNDA0MDYwMDAwMDAwMDAwMDUwNDA2MDAwMDAwMDEwMjAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMTAyMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAxMDIwMDAwMDAwMDA1MDQwNjAwMDAwMDAwMDAwMDAwMDEwMjAwMDAwMDAwMDAwMDAwMDAwMDAwMDkwMDAwMDAwMTAyMDAwMDAwMDAwMDAwMDAwMDAwMDUwNjAwMDAwMDAxMDIwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDEwMjAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMTAyMDAwNTA0MDQwNjAwMDAwMDA1MDQwNDA0MDYwMDAxMDIwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDEwMjAwMDAwMDAwMDAwMDA4MDAwMDAwMDAwMDAwMDAwMTAyMDMwMzAzMDMwMzAzMDMwMzAzMDMwMzAzMDMwMzAzMDIwMDAwMDAwMDAwMDAyMDAyMDAwMDAwMDAwMDAwMjAwMjAwMDAwMDAwMDAwMDIwMDIwMDAwMDAwMDAwMDAyMDIyMDAwMDAwMDAyMDIyMjIwMjAwMDAyMDIyMjIyMjIyMDIwMDAwMDAwMDAwMDAyMDIyMjIwMDAwMDAwMDAwMjAwMjAwMDAwMDAwMDAwMDIwMDIwMDAwMjAwMjAwMDAyMDAyMDAwMDAwMDAwMDAwMjAwMjAwMDAwMDAwMDAwMDIwMDIyMjAyMDAwMDIwMjIyMjAyMDAwMDAwMDAwMDAwMjAwMjAwMDAyMDAyMDAwMDIwMDIwMDAwMDAwMDAwMDAyMDAyMDAwMDAwMDAwMDAwMjAwMjAwMDAwMDIyMjIwMDIwMDIwMDAwMjAwMjAwMDAyMDAyMDAwMDAwMDAyMDIyMjIwMjAwMDAwMDAwMDAwMDIwMjIyMjIyMDAwMDAwMDAyMDAyMDAwMDAwMDAwMDAwMjAwMjAwMDAwMDIwMjIwMDIwMDIwMDAwMDAwMDAwMDAyMDAyMDAwMDAwMDAwMDAwMjAwMjAwMDAyMjIyMDAwMDIwMDIwMDIyMDAwMDAwMDAyMDAyMDAwMDAwMDAwMDAwMjAyMjAwMDAwMDAwMjAwMjIwMDIwMDAwMDAwMDAwMDAyMDAyMDAwMDAwMDAwMDAwMjAwMjIyMDAwMDAwMDAyMjIyMDIyMDAyMDAwMDAwMDAyMDAyMDAwMDAwMDAwMDAwMjAwMjAwMjIwMjAwMDAwMDIwMDIwMDAwMDAwMDAwMDAyMDAyMDAwMDAwMjAwMjAwMjAwMjAwMDAwMDAwMjAwMjIwMjIyMjIyMDAwMDAwMDAyMDAyMDAwMDAwMDAwMDAwMjAwMjAwMDAwMDAwMDAyMDIyMDIwMDAwMDAwMDIyMDAyMDAyMDAwMDAwMDAwMDAwMjAwMjAwMDAyMjAyMDAwMDIwMDIwMDAwMDAwMDAwMDAyMDAyMDAwMDAwMDAyMDIyMjIwMjIyMDIwMDIyMDAwMDIwMDIwMDAwMDAwMDAwMDAyMDAyMDAwMDAwMDAwMDAwMjAwMjAwMDAyMDIyMDAwMDIwMDIwMDAwMDAwMDAwMDAyMDAyMDAwMDAwMDAwMDAwMjAwMjAwMDAwMDAwMjIwMDIwMDIwMDAwMDAwMDAwMDAyMDIyMjIwMDAwMDAwMDAwMjAwMjAwMDAyMDIyMDAwMDIwMDIwMDAwMDAwMDAwMDAyMDAyMDAwMDAwMDAyMDIyMjIwMjAwMjIwMDAwMDAwMDIwMDIwMDAwMDAwMDAwMDAyMDAyMDAwMDAwMDAwMDAwMjAwMjIwMDIwMDAwMDAwMDIwMDIwMDIyMDAwMDAwMDAyMDAyMDAyMDIyMDIwMDAwMjAwMjAwMDAwMDAwMDAwMDIwMjIyMjAwMDAwMDIyMDAyMDAyMDAwMDAwMDAwMDAwMjAwMjAwMDAwMDAwMDAwMDIwMDIwMDAwMjIwMDIwMjIyMjAyMDAwMDAwMDAwMDAwMjAwMjAwMDAwMDAwMDAwMDIwMDIyMDIyMjIyMjAwMDAyMDAyMDAwMDAwMDAwMDAwMjAwMjAwMDAwMDAwMjAwMjIwMDIwMDAwMDAwMDAwMDAyMDAyMDAwMDAwMDAwMDAwMjAwMjAwMDAwMDAwMDAwMDIyMDIwMDAwMjIyMjAwMDAyMDAyMDAwMDAwMDAwMDAwMjAwMjAwMDAwMDAwMDAyMjIwMDIyMjAyMDAwMDAwMDAyMDAyMDAwMDAwMDAwMDAwMjAwMjAwMDAwMDIyMDAwMDIwMDIwMDAwMDAwMDAwMDAyMDAyMDAwMDAwMDAwMDAwMjAwMjAwMDAwMDIyMjIwMjIwMDIwMDAwMDAwMDAwMDAyMDIyMjIyMjAwMDAwMDAwMjAwMjAwMDAwMDAwMDAwMDIwMDIwMDAwMDAwMDAwMDAyMDAyMDAwMDIwMDIwMDAwMjAwMjAwMDAyMjAwMDAwMDIwMDIwMDAwMDAwMDAwMDAyMDAyMDAwMDAwMDAyMjIyMjIwMjIyMDIwMDAwMDAwMDIwMDIwMDAwMDAwMDAwMDAyMDAyMDAwMDAwMDAwMDAwMjAwMjAwMDAyMjAwMDAwMDIwMDIwMDAwMDAwMDAwMDAyMDAyMDAwMDAwMDAyMDIyMjAwMjAwMDAwMDAwMDAwMDIwMDIwMDIwMjIwMDAwMDAyMDIyMjIwMjAwMDAwMDAwMjAwMjAwMDAwMDAwMDAwMDIwMDIwMDAwMDAwMDIyMDIyMDAyMDAwMDAwMDAwMDAwMjAwMjAwMDAwMDAwMDAwMDIwMDIwMDAwMjIwMjAwMDAyMDAyMDAwMDAwMDAwMDAwMjAwMjAwMDAwMDAwMDAwMDIwMDIwMDAwMDAwMDAwMDAyMDAyMDAyMDIyMDAwMDAwMjAwMjAwMDAwMDAwMDAwMDIwMDIwMDAwMDAwMDAwMDAyMDIyMDIwMDAwMjIwMDAwMjAwMjAwMDAwMDAwMDAwMDIwMDIwMDAwMDAwMDIwMjIyMjAyMDAyMjAyMDAwMDAwMjAwMjAwMDAwMDAwMDAwMDIwMDIwMDAwMDAwMDAwMDAyMDAyMDAwMDAwMDAwMDAwMjAwMjIwMDIwMDAwMDAwMDIwMDIwMDAwMjAyMjAyMDAyMDAyMDAwMDAwMDAwMDAwMjAwMjAwMDAwMDAwMDAyMjIyMjIyMjAwMDAwMDAwMDAyMDAyMDAwMDAwMDAwMDAwMjAwMjAwMDAwMDAwMDAwMDIwMDIwMDAwMjIyMjAwMDAyMDAyMDAwMDAwMDAwMDAwMjAwMjAwMDAwMDAwMDAwMDIwMDIwMDAwMDAwMDAwMjIyMDAyMDAwMDIwMjIwMjAwMjAwMjAwMDAwMDAwMDAwMDIwMDIyMDAyMDAwMDAwMDAyMDAyMDAwMDAwMDAwMDAwMjAwMjAwMDAwMDAwMDAwMDIwMDIwMDIyMDIwMDAwMDAyMDAyMDAwMDAwMDAwMDAwMjAwMjAwMDAwMDAwMDAwMDIwMDIwMDAwMjAyMjAwMDAyMDAyMDAwMDAwMDAwMDAwMjAwMjAwMDAwMDAwMjAyMjIyMDIwMDAwMDAwMDAwMDAyMDAyMDAyMjIyMDAwMDAwMjAwMjAwMDAwMDAwMDAwMDIwMDIwMDAwMDAwMDAwMDAyMDIyMjIwMDAwMjAyMjAwMjAwMjAwMDAwMDAwMDAwMDIwMDIwMDAwMDAwMDAwMDAyMDAyMDAyMDIyMDAwMDAwMjAwMjAwMDAwMDAwMDAwMDIwMDIwMDAwMDAwMDIyMDAyMDAyMDAwMDAwMDAwMDAwMjAwMjAwMDAwMDAwMDAwMDIwMDIyMjIyMDAyMDIyMjIyMDAyMDAwMDAwMDAwMDAwMjAwMjAwMDAwMDAwMDAwMDIwMjIyMjIyMjIyMjIyMjIyMg==\",\n \"tileset\": [\n \"myTiles.transparency16\",\n \"sprites.skillmap.islandTile3\",\n \"sprites.skillmap.islandTile5\",\n \"sprites.skillmap.islandTile1\",\n \"sprites.castle.tilePath2\",\n \"sprites.castle.tilePath1\",\n \"sprites.castle.tilePath3\",\n \"sprites.swamp.swampTile16\",\n \"myTiles.tile1\",\n \"myTiles.tile2\"\n ],\n \"displayName\": \"level1\"\n },\n \"*\": {\n \"mimeType\": \"image/x-mkcd-f4\",\n \"dataEncoding\": \"base64\",\n \"namespace\": \"myTiles\"\n }\n}", + "tilemap.g.ts": "// Auto-generated code. Do not edit.\nnamespace myTiles {\n //% fixedInstance jres blockIdentity=images._tile\n export const transparency16 = image.ofBuffer(hex``);\n //% fixedInstance jres blockIdentity=images._tile\n export const tile1 = image.ofBuffer(hex``);\n //% fixedInstance jres blockIdentity=images._tile\n export const tile2 = image.ofBuffer(hex``);\n\n helpers._registerFactory(\"tilemap\", function(name: string) {\n switch(helpers.stringTrim(name)) {\n case \"level1\":\n case \"level1\":return tiles.createTilemap(hex`1000a00002070707070707070707070707070701020707070707070707070707070707010200000000000000000000000000000102000000000000000000000000000001020600000000000000000005040406010209000000000005040404040404060102000000000000000000000000000001020504060000000000000000000000010200000000000000000000000000000102000000000000050600000000000001020000000000000000000000000000010200000000000000000000000000000102000504060000000000000504040601020000000000000000000000000000010200000000000005060000000000000102000000000000000000000000000001020000000000000000000000000000010200000000000000050404060000000102000000000000050600000000090001020000000000000000000005040406010200000000000000000000000000000102040404040600000000000000000001020000000000000000000000000000010200000000000000000504060000000102000000000000000000000000000001020000000000000000000000000000010200000000000504040600000000000102000000050600000000000000000001020000000000000000000000000000010206000000000000000000050600000102000000000000000000000000000001020900000000000000000000000000010200050600000000000000000504060102000005060000000000000000000001020000000000000000000000000000010200000005040600000000000000000102000000000000000000000000000001020000000000000000050600000000010200000000000000000000050600000102050404040600000000000000000001020000000000000000000000000000010200000000000000000000000005060102000000000000090000050600000001020000000000000000000000000000010200000000000504060000000000000102000000000000000000000000000001020000000000000000000005040406010200050406000000050600000000000102000000000000000000000000000001020000000000000000000000000000010200000000000005040600000000000102000000000000000000000000000001020000000000000000000000000000010200000000000000000005060000000102000000000000000000000000000001020504060000000000000000000000010200000000000005040600000000000102000000090000000000000000000001020000000000000000000005040406010200000005060000000000000000000102000000000000000000000000000001020000000000000000000000000000010200000506000000000000000000000102000000050600000000000000000001020000000005040406000000000000010200000000000000000000000000000102050406000000000000050600000001020000000000000000000000000000010200000000000000000000000000000102000000000005060000000504040601020000000000000000000000000000010200000000000000000000000000000102000005040404040406000000000001020000000000000000000000000000010200000000000000000000050600000102000000000000000000000000000001020000000000000009000000000000010200000000000000000000000000050102000000000005040406000000000001020000000000000000000000000000010200000000000000000000000506000102000504060000000000000000000001020000000000000000000000000000010200000000000000050600000000000102000000000000000000000000000001020000000000000000000000000000010200000900000000050404040600000102000000000000000000000000000001020504040406000000000000000000010200000000000000000000000000000102000000000000000000000000000001020000000000000506000000000000010200000000000506000000000000000102000000000000000000000000000001020000000000000000000504040404010200050406000000000000000000000102000000000000000000000000000001020000000000000000000000000000010200000000000506000000090000000102000000000000000000000000000001020000000000000000000005040600010200000000000000000000000000000102000000000504060000000000000001020504040600000000000000000000010200000000000000000000000000000102000000000000000000050406000001020000000000000000000000000000010200000000000000000000000000000102000000000005040600000000000001020000000000000000000000000000010200000000000000000000000000000102000000000000000000000000000001020000000005040600000000000000010200090000000000000000000000000102000000000000000000000000000001020406000000000005060000090000010200000000000000000000000000000102000000000000000000000504040601020000000504060000000000000000010200000000000000000000000000000102000000000000000000000000000001020000000000000000000000000000010200000506000000000000000000000102000000000000050404060000000001020000000000000000000000000000010200000000000000000000000504060102050406000000000000000000000001020000000000000009000000000000010200000000000000000000000000000102000000000005040406000000000001020000000000000000000000000000010200000000000000000000000000000102000000000000000000000005060001020000090000000504040600000000010200000000000000000000000000000102000005060000000000000000000001020000000000000000000000000000010200000000000000000000000000000102000000050406000000000000000001020000000000000000000000000000010200000000000000000000000000000102000000000000050406000009000001020000000000000000000000000000010200000000000000000000050404060102000000000000000000000000000001020000000504040600000000000000010200000900000000000000000000000102000000000000000000000000000001020404060000000000050406000000010200000000000000000000000000000102000000000000000000000000000001020000000005040600000000000000010200000000000000000000090000000102000000000000000000050600000001020000000000000000000000000000010200000000000000000000000000000102000504040600000005040404060001020000000000000000000000000000010200000000000008000000000000000102030303030303030303030303030303`, img`\n2..............2\n2..............2\n2..............2\n2..............2\n22.........22222\n2......222222222\n2..............2\n2222...........2\n2..............2\n2......22......2\n2..............2\n2..............2\n2.222......22222\n2..............2\n2......22......2\n2..............2\n2..............2\n2.......2222...2\n2......22......2\n2..........22222\n2..............2\n222222.........2\n2..............2\n2........222...2\n2..............2\n2..............2\n2.....2222.....2\n2...22.........2\n2..............2\n22.........22..2\n2..............2\n2..............2\n2.22........2222\n2..22..........2\n2..............2\n2...222........2\n2..............2\n2........22....2\n2..........22..2\n222222.........2\n2..............2\n2............222\n2.........22...2\n2..............2\n2.....222......2\n2..............2\n2..........22222\n2.222...22.....2\n2..............2\n2..............2\n2......222.....2\n2..............2\n2..............2\n2.........22...2\n2..............2\n2222...........2\n2......222.....2\n2..............2\n2..........22222\n2...22.........2\n2..............2\n2..............2\n2..22..........2\n2...22.........2\n2....2222......2\n2..............2\n2222......22...2\n2..............2\n2..............2\n2.....22...22222\n2..............2\n2..............2\n2..2222222.....2\n2..............2\n2..........22..2\n2..............2\n2..............2\n2.............22\n2.....2222.....2\n2..............2\n2...........22.2\n2.222..........2\n2..............2\n2.......22.....2\n2..............2\n2..............2\n2.......22222..2\n2..............2\n222222.........2\n2..............2\n2..............2\n2......22......2\n2.....22.......2\n2..............2\n2.........222222\n2.222..........2\n2..............2\n2..............2\n2.....22.......2\n2..............2\n2..........222.2\n2..............2\n2....222.......2\n22222..........2\n2..............2\n2.........222..2\n2..............2\n2..............2\n2.....222......2\n2..............2\n2..............2\n2..............2\n2....222.......2\n2..............2\n2..............2\n222.....22.....2\n2..............2\n2..........22222\n2...222........2\n2..............2\n2..............2\n2..............2\n2..22..........2\n2......2222....2\n2..............2\n2...........2222\n2222...........2\n2..............2\n2..............2\n2.....2222.....2\n2..............2\n2..............2\n2...........22.2\n2......2222....2\n2..............2\n2..22..........2\n2..............2\n2..............2\n2...222........2\n2..............2\n2..............2\n2......222.....2\n2..............2\n2..........22222\n2..............2\n2...2222.......2\n2..............2\n2..............2\n2222.....222...2\n2..............2\n2..............2\n2....222.......2\n2..............2\n2.........22...2\n2..............2\n2..............2\n2.2222...22222.2\n2..............2\n2..............2\n2222222222222222\n`, [myTiles.transparency16,sprites.skillmap.islandTile3,sprites.skillmap.islandTile5,sprites.skillmap.islandTile1,sprites.castle.tilePath2,sprites.castle.tilePath1,sprites.castle.tilePath3,sprites.swamp.swampTile16,myTiles.tile1,myTiles.tile2], TileScale.Sixteen);\n }\n return null;\n })\n\n helpers._registerFactory(\"tile\", function(name: string) {\n switch(helpers.stringTrim(name)) {\n case \"transparency16\":return transparency16;\n case \"start\":\n case \"tile1\":return tile1;\n case \"cage\":\n case \"tile2\":return tile2;\n }\n return null;\n })\n\n}\n// Auto-generated code. Do not edit.\n" +} +``` diff --git a/docs/tutorials/chase-the-pizza.md b/docs/tutorials/chase-the-pizza.md index f2edaa3682b..e9ba72d1651 100644 --- a/docs/tutorials/chase-the-pizza.md +++ b/docs/tutorials/chase-the-pizza.md @@ -1,4 +1,6 @@ # Chase the Pizza +### @explicitHints true + ### ~button /#tutorial:/tutorials/chase-the-pizza @@ -6,177 +8,389 @@ Try this tutorial! ### ~ -## {Introduction @unplugged} +## Introduction @showdialog + +![Game animation](/static/tutorials/chase-the-pizza/chasing.gif) + +Create a game where the goal is to eat as much pizza as you can +before the time runs out! + + +## {Step 2} + +**Set the background color** + +--- + +- :tree: Open the
+``||scene:Scene||``
+toolbox drawer and drag
+``||scene:set background color [ ]||``
+into **the empty** ``||loops(noclick):on start||`` container already in your workspace. + +~hint What does that mean? 🤷🏽 + +--- + +When giving instructions, we'll highlight some text to give you a better idea of what you are looking for. + +For example, when we suggest the
+``||scene:set background color to [ ]||``
+block, we are pointing you toward
+ +```block +scene.setBackgroundColor(13) +``` -![Game animation](/static/tutorials/chase-the-pizza.gif) +hint~ -In this tutorial you will create a game with 2 sprites, a ``||sprites:Player||`` sprite and a ``||sprites:Food||`` sprite. The goal of the game is to eat as much pizza as you can before the time runs out! Each time your player catches the pizza, you gain points and the countdown is restarted. +💡 _Feel free to choose your own color if you don't like the swatch in the block._ -## {Step 1} -Open the ``||scene:Scene||`` Toolbox drawer and drag the ``||scene:set background color||`` block into the ``||loops:on start||`` block on your Workspace. Click **Next** to go to the next step in the Tutorial. +--- +- :mouse pointer: Click the button that says **Next** to go to the +next step of the tutorial. + + +#### ~ tutorialhint ```blocks // @highlight -scene.setBackgroundColor(0) +scene.setBackgroundColor(13) ``` -## {Step 2} -In the ``||scene:set background color||`` block, click on the grey color oval to open the color palette and select a background color. To see what this looks like in your game, look at the Game Simulator window. +## {Step 3} -![Choose background color](/static/tutorials/chase-the-pizza/background-color.jpg) +Add a player **sprite**. -## {Step 3} +--- + +- :paper plane: Open the ``||sprites:Sprites||`` drawer and drag
+``||variables(sprites):set [mySprite] to sprite [ ] of kind [Player]||``
+into **the end of** the ``||loops(noclick):on start||`` block already in your workspace. + +--- + + +~hint What's a sprite? 💡 + +--- + +In Arcade, each character or image that does something is called a **SPRITE**. + +Sprites have properties that you can use and change — +things like scale, position, and lifespan are all properties of sprites. + +Our player will be a sprite, too. + +hint~ -Open the ``||sprites:Sprites||`` Toolbox drawer and drag the first block, ``||variables(sprites):set mySprite||`` into the ``||loops:on start||`` block on your Workspace. This will create a new ``||sprites:Player||`` character for your game. +~hint Show me 🔍 + +![Add a sprite block](/static/tutorials/chase-the-pizza/mySprite.gif) + +hint~ + + +#### ~ tutorialhint ```blocks let mySprite: Sprite = null -scene.setBackgroundColor(7) +scene.setBackgroundColor(13) // @highlight -mySprite = sprites.create(img` -. . . . . . . . . . . . . . . . -. . . . . . . . . . . . . . . . -. . . . . . . . . . . . . . . . -. . . . . . . . . . . . . . . . -. . . . . . . . . . . . . . . . -. . . . . . . . . . . . . . . . -. . . . . . . . . . . . . . . . -. . . . . . . . . . . . . . . . -. . . . . . . . . . . . . . . . -. . . . . . . . . . . . . . . . -. . . . . . . . . . . . . . . . -. . . . . . . . . . . . . . . . -. . . . . . . . . . . . . . . . -. . . . . . . . . . . . . . . . -. . . . . . . . . . . . . . . . -. . . . . . . . . . . . . . . . -`, SpriteKind.Player) +mySprite = sprites.create(img`.`, SpriteKind.Player) ``` ## {Step 4} -Draw your ``||sprites:Player||`` character by clicking on the grey square in the ``||variables(sprites):set mySprite||`` block to open the Sprite Editor. Use the color palette and design tools to draw an image on the canvas. Click **Done** when you are finished. +- :mouse pointer: Draw your sprite by clicking on the empty grey square in the
+``||variables(sprites):set [mySprite] to sprite [ ] of kind [Player]||``
+block to open the **Sprite Editor**. + + +- :mouse pointer: Click **Done** when you are finished drawing. + +~hint Show me 🔍 + +![Image editor](/static/tutorials/chase-the-pizza/draw.gif) + +hint~ + + + +#### ~ tutorialhint +```blocks +let mySprite: Sprite = null +scene.setBackgroundColor(13) +// @highlight +mySprite = sprites.create(img` +. . . . . 5 5 5 5 5 5 5 . . . . +. . . 5 5 5 5 5 5 5 5 5 5 5 . . +. . 5 5 5 5 5 5 5 5 5 5 5 5 5 . +. . 5 5 5 5 5 5 5 5 5 5 5 5 5 . +. 5 5 5 5 f 5 5 5 5 f 5 5 5 5 5 +. 5 5 5 5 f f 5 5 5 f f 5 5 5 5 +. 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 +. 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 +. 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 +. 5 5 5 f f f f f f f f f 5 5 5 +. 5 5 5 5 f b b b b b f 5 5 5 5 +. . 5 5 5 5 f b b b f 5 5 5 5 . +. . 5 5 5 5 5 f f f 5 5 5 5 5 . +. . . 5 5 5 5 5 5 5 5 5 5 5 . . +. . . . . 5 5 5 5 5 5 5 . . . . +. . . . . . . . . . . . . . . . +`, SpriteKind.Player) +``` -![Image editor](/static/tutorials/chase-the-pizza/image-editor.gif) ## {Step 5} -Open the ``||controller:Controller||`` Toolbox drawer and drag the ``||controller:move mySprite with buttons||`` block after the ``||variables(sprites):set mySprite||`` block. This will allow you to move your ``||sprites:Player||`` sprite around the screen with the arrow keys. Try it out in the Game Simulator +**Make the sprite move** + +--- + +- :game: Open ``||controller:Controller||`` and drag
+``||controller:move [mySprite] with buttons||``
+into **the end of** the
+``||loops(noclick):on start||`` block already in your workspace. +Now you can move your sprite around the screen using the arrow buttons on the game pad or your keyboard. + + +~hint Show me 🔍 + +![Add the move block](/static/tutorials/chase-the-pizza/move.gif) + +hint~ + + +#### ~ tutorialhint ```blocks let mySprite: Sprite = null -scene.setBackgroundColor(7) +scene.setBackgroundColor(13) mySprite = sprites.create(img` -. . . . . 5 5 5 5 5 5 . . . . . -. . . 5 5 5 5 5 5 5 5 5 5 . . . -. . 5 5 5 5 5 5 5 5 5 5 5 5 . . -. 5 5 5 5 5 5 5 5 5 5 5 5 5 5 . -. 5 5 5 f f 5 5 5 5 f f 5 5 5 . -5 5 5 5 f f 5 5 5 5 f f 5 5 5 5 -5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 -5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 -5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 -5 5 f 5 5 5 5 5 5 5 5 5 5 f 5 5 -5 5 5 f 5 5 5 5 5 5 5 5 f 5 5 5 -. 5 5 5 f 5 5 5 5 5 5 f 5 5 5 . -. 5 5 5 5 f f f f f f 5 5 5 5 . -. . 5 5 5 5 5 5 5 5 5 5 5 5 . . -. . . 5 5 5 5 5 5 5 5 5 5 . . . -. . . . . 5 5 5 5 5 5 . . . . . +. . . . . 5 5 5 5 5 5 5 . . . . +. . . 5 5 5 5 5 5 5 5 5 5 5 . . +. . 5 5 5 5 5 5 5 5 5 5 5 5 5 . +. . 5 5 5 5 5 5 5 5 5 5 5 5 5 . +. 5 5 5 5 f 5 5 5 5 f 5 5 5 5 5 +. 5 5 5 5 f f 5 5 5 f f 5 5 5 5 +. 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 +. 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 +. 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 +. 5 5 5 f f f f f f f f f 5 5 5 +. 5 5 5 5 f b b b b b f 5 5 5 5 +. . 5 5 5 5 f b b b f 5 5 5 5 . +. . 5 5 5 5 5 f f f 5 5 5 5 5 . +. . . 5 5 5 5 5 5 5 5 5 5 5 . . +. . . . . 5 5 5 5 5 5 5 . . . . +. . . . . . . . . . . . . . . . `, SpriteKind.Player) // @highlight controller.moveSprite(mySprite) ``` + + + ## {Step 6} -Open the ``||sprites:Sprites||`` Toolbox drawer and drag another ``||variables(sprites):set mySprite2||`` block into the ``||loops:on start||`` block on your Workspace. This will be the **pizza** sprite in our game. +- :binoculars: Test your project in the game window! + +You should be able to move your sprite with the joypad or arrow keys on your keyboard. + + +![Look for the game window in the lower right](/static/tutorials/chase-the-pizza/game.png) + + + + + + + +## {Step 7} + +**Add some pizza** + +--- + +- :paper plane: Open ``||sprites:Sprites||`` and drag
+``||variables(sprites):set [pizza] to sprite [ ] of kind [Player]||``
+into **the end of** the
+``||loops(noclick):on start||`` block already in your workspace. + + +- :mouse pointer: Click **Player** in
+``||variables(noclick):set [pizza] to sprite [ ] of kind [Player]||``
+and choose **Food** instead. + +--- + +~hint Show me 🔍 + +![Change the pizza to food](/static/tutorials/chase-the-pizza/food.gif) + +hint~ + + +```blockconfig.local +let pizza = sprites.create(img`.`, SpriteKind.Player) +``` + + +#### ~ tutorialhint ```blocks let mySprite: Sprite = null -let mySprite2: Sprite = null -scene.setBackgroundColor(7) +let pizza: Sprite = null +scene.setBackgroundColor(13) mySprite = sprites.create(img` -. . . . . 5 5 5 5 5 5 . . . . . -. . . 5 5 5 5 5 5 5 5 5 5 . . . -. . 5 5 5 5 5 5 5 5 5 5 5 5 . . -. 5 5 5 5 5 5 5 5 5 5 5 5 5 5 . -. 5 5 5 f f 5 5 5 5 f f 5 5 5 . -5 5 5 5 f f 5 5 5 5 f f 5 5 5 5 -5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 -5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 -5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 -5 5 f 5 5 5 5 5 5 5 5 5 5 f 5 5 -5 5 5 f 5 5 5 5 5 5 5 5 f 5 5 5 -. 5 5 5 f 5 5 5 5 5 5 f 5 5 5 . -. 5 5 5 5 f f f f f f 5 5 5 5 . -. . 5 5 5 5 5 5 5 5 5 5 5 5 . . -. . . 5 5 5 5 5 5 5 5 5 5 . . . -. . . . . 5 5 5 5 5 5 . . . . . +. . . . 5 5 5 5 5 5 5 . . . . . +. . 5 5 5 5 5 5 5 5 5 5 5 . . . +. 5 5 5 5 5 5 5 5 5 5 5 5 5 . . +. 5 5 5 5 5 5 5 5 5 5 5 5 5 . . +5 5 5 5 f 5 5 5 5 f 5 5 5 5 5 . +5 5 5 5 f f 5 5 5 f f 5 5 5 5 . +5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 . +5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 . +5 5 5 f f f f f f f f f 5 5 5 . +5 5 5 5 f b b b b b f 5 5 5 5 . +5 5 5 5 5 f b b b f 5 5 5 5 5 . +. 5 5 5 5 5 f f f 5 5 5 5 5 . . +. 5 5 5 5 5 5 5 5 5 5 5 5 5 . . +. . 5 5 5 5 5 5 5 5 5 5 5 . . . +. . . . 5 5 5 5 5 5 5 . . . . . +. . . . . . . . . . . . . . . . `, SpriteKind.Player) controller.moveSprite(mySprite) // @highlight -mySprite2 = sprites.create(img` -. . . . . . . . . . . . . . . . -. . . . . . . . . . . . . . . . -. . . . . . . . . . . . . . . . -. . . . . . . . . . . . . . . . -. . . . . . . . . . . . . . . . -. . . . . . . . . . . . . . . . -. . . . . . . . . . . . . . . . -. . . . . . . . . . . . . . . . -. . . . . . . . . . . . . . . . -. . . . . . . . . . . . . . . . -. . . . . . . . . . . . . . . . -. . . . . . . . . . . . . . . . -. . . . . . . . . . . . . . . . -. . . . . . . . . . . . . . . . -. . . . . . . . . . . . . . . . -. . . . . . . . . . . . . . . . -`, SpriteKind.Player) +pizza = sprites.create(img`.`, SpriteKind.Food) ``` -## {Step 7} -In the ``||variables(sprites):set mySprite2||`` block, click on ``||variables(noclick):mySprite2||`` to open the menu, and select ``Rename variable...`` Type in ``pizza`` as the new sprite name and click **Ok**. +## {Step 8} + -![Rename mySprite2](/static/tutorials/chase-the-pizza/rename-mysprite2.gif) +- :mouse pointer: Choose your pizza by clicking the empty grey square inside
+``||variables(noclick):set [pizza] to sprite [ ] of kind [Food]||``
+to open the **Sprite Editor**. -## {Step 8} +- :mouse pointer: Switch to the **Gallery** tab at the top. +![Select the gallery](/static/skillmap/assets/gallery.png) + + +- :mouse pointer: Choose your pizza, then click **Done**. + +~hint Show me 🔍 + +![Image gallery](/static/tutorials/chase-the-pizza/gallery.gif) + +hint~ + + +💡 _Feel free to draw your own pizza if you prefer!_ + +```blockconfig.local +let pizza = sprites.create(img`.`, SpriteKind.Player) +``` + + +#### ~ tutorialhint +```blocks +let pizza: Sprite = null +let mySprite: Sprite = null +scene.setBackgroundColor(13) +mySprite = sprites.create(img` +. . . . 5 5 5 5 5 5 5 . . . . . +. . 5 5 5 5 5 5 5 5 5 5 5 . . . +. 5 5 5 5 5 5 5 5 5 5 5 5 5 . . +. 5 5 5 5 5 5 5 5 5 5 5 5 5 . . +5 5 5 5 f 5 5 5 5 f 5 5 5 5 5 . +5 5 5 5 f f 5 5 5 f f 5 5 5 5 . +5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 . +5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 . +5 5 5 f f f f f f f f f 5 5 5 . +5 5 5 5 f b b b b b f 5 5 5 5 . +5 5 5 5 5 f b b b f 5 5 5 5 5 . +. 5 5 5 5 5 f f f 5 5 5 5 5 . . +. 5 5 5 5 5 5 5 5 5 5 5 5 5 . . +. . 5 5 5 5 5 5 5 5 5 5 5 . . . +. . . . 5 5 5 5 5 5 5 . . . . . +. . . . . . . . . . . . . . . . +`, SpriteKind.Player) +controller.moveSprite(mySprite) +pizza = sprites.create(img` +. . . . . . b b b b . . . . . . +. . . . . . b 4 4 4 b . . . . . +. . . . . . b b 4 4 4 b . . . . +. . . . . b 4 b b b 4 4 b . . . +. . . . b d 5 5 5 4 b 4 4 b . . +. . . . b 3 2 3 5 5 4 e 4 4 b . +. . . b d 2 2 2 5 7 5 4 e 4 4 e +. . . b 5 3 2 3 5 5 5 5 e e e e +. . b d 7 5 5 5 3 2 3 5 5 e e e +. . b 5 5 5 5 5 2 2 2 5 5 d e e +. b 3 2 3 5 7 5 3 2 3 5 d d e 4 +. b 2 2 2 5 5 5 5 5 5 d d e 4 . +b d 3 2 d 5 5 5 d d d 4 4 . . . +b 5 5 5 5 d d 4 4 4 4 . . . . . +4 d d d 4 4 4 . . . . . . . . . +4 4 4 4 . . . . . . . . . . . . +`, SpriteKind.Food) +``` -In the ``||variables(noclick):set pizza||`` block, click on the ``||sprites:Player||`` kind to open the menu of different Sprite kinds. Select ``||sprites:Food||`` as your ``||variables(noclick):pizza||`` sprite kind. -![Set sprite kind](/static/tutorials/chase-the-pizza/sprite-kind.jpg) ## {Step 9} -Click on the grey box for ``||variables(noclick):set pizza||`` and then select the **Gallery** view. Scroll to find the image of a small pizza (or any other image you like!) and select it to load into the image editor. +**Make something happen when the sprites overlap!** -![Image gallery](/static/tutorials/chase-the-pizza/image-gallery.gif) +--- -## {Step 10} +- :paper plane: Open ``||sprites:Sprites||`` and drag the
+``||sprites:on [sprite] of kind [Player] overlaps [otherSprite] of kind [Food]||``
+container into **an empty area** of the workspace. + + +🤷🏽‍♀️ _Need help? Click the lightbulb in the circle below to see what blocks you need in this step._ + + + +```blockconfig.local +let pizza = sprites.create(img`.`, SpriteKind.Player) +``` -Open the ``||sprites:Sprites||`` Toolbox drawer and drag the ``||sprites:on sprite overlaps otherSprite||`` block onto your Workspace (you can place this anywhere). +#### ~ tutorialhint ```blocks // @highlight -sprites.onOverlap(SpriteKind.Player, SpriteKind.Player, function (sprite, otherSprite) { +sprites.onOverlap(SpriteKind.Player, SpriteKind.Food, function (sprite, otherSprite) { }) ``` -## {Step 11} -In the ``||sprites:on sprite overlaps otherSprite||`` block, click on the second ``||sprites:Player||`` kind after ``||variables(noclick):otherSprite||`` to open the menu. Select ``||sprites:Food||`` as its kind. -![Overlap sprite kind](/static/tutorials/chase-the-pizza/overlap-kind-sprite.png) +## {Step 10} -## {Step 12} +**Add a point when the sprites overlap** -When our ``||sprites:Player||`` overlaps with the ``||variables(noclick):pizza||`` sprite, let’s add a point to our game score. Open the ``||info:Info||`` Toolbox drawer and drag the ``||info:change score||`` block into the ``||sprites:on sprite overlaps otherSprite||`` block. +--- +- :id card: Open ``||info:Info||`` and drag
+``||info:change score by [1]||``
+into **the empty**
+``||sprites(noclick):on [sprite] ... overlaps [otherSprite]||``
+container already in the workspace. + + +```blockconfig.local +let pizza = sprites.create(img`.`, SpriteKind.Player) +``` + +#### ~ tutorialhint ```blocks sprites.onOverlap(SpriteKind.Player, SpriteKind.Food, function (sprite, otherSprite) { // @highlight @@ -184,70 +398,119 @@ sprites.onOverlap(SpriteKind.Player, SpriteKind.Food, function (sprite, otherSpr }) ``` -## {Step 13} -Let’s set the position for ``||variables(noclick):pizza||`` to random locations around the screen. Open the ``||sprites:Sprites||`` Toolbox drawer and drag the ``||sprites:set mySprite position||`` block into the ``||sprites:on sprite overlaps otherSprite||`` block on your Workspace. -```blocks -let mySprite: Sprite = null -sprites.onOverlap(SpriteKind.Player, SpriteKind.Food, function (sprite, otherSprite) { - info.changeScoreBy(1) - // @highlight - mySprite.setPosition(0, 0) -}) -``` -## {Step 14} -In the ``||sprites:set mySprite position||`` block, click on the ``||variables(noclick):mySprite||`` variable to open the menu, and select your ``||variables(noclick):pizza||`` sprite. +## {Step 11} -![Change mySprite to pizza](/static/tutorials/chase-the-pizza/sprite-position-rename.png) -## {Step 15} +- :binoculars: Check your game! -Open the ``||math:Math||`` Toolbox drawer and drag two ``||math:pick random||`` blocks onto the Workspace. Drop one into the ``x`` coordinate of the ``||sprites:set pizza position||`` block, and the other into the ``y`` coordinate replacing the ``0`` values. +Notice that you get WAAAYYYYY too many points when your player +sprite overlaps the pizza? -```blocks -let pizza: Sprite = null -sprites.onOverlap(SpriteKind.Player, SpriteKind.Food, function (sprite, otherSprite) { - info.changeScoreBy(1) - pizza.setPosition(randint(0, 10), randint(0, 10)) -}) +We'll fix that in the next step. + + + + +## {Step 12} + +**Teleport the pizza to a random location each time the sprites overlap.** + +~hint What is random? 🤷🏽‍♀️ + +--- + +A "random" number is a value that you can't predict ahead of time. + +In Arcade, we use this block: + +```block +randint(0, scene.screenWidth()) ``` -## {Step 16} +to ask for a random number between **0** and the **width of the screen**. + +hint~ -The Arcade game screen is `160` pixels wide, and `120` pixels high. In the first ``||math:pick random||`` block in the `x` coordinate of the ``||sprites:set pizza position||`` block, change the maximum value from ``10`` to **160**. In the second ``||math:pick random||`` block in the ``y`` coordinate, change the maximum value from ``10`` to **120**. +--- +- :paper plane: Open ``||sprites:Sprites||``, and drag
+``||sprites:set [pizza] position to...||``
+into the **end of the**
+``||sprites(noclick):on [sprite] ... overlaps [otherSprite]||``
+container already in the workspace. + + +```blockconfig.local +let pizza = sprites.create(img`.`, SpriteKind.Player) +``` + +#### ~ tutorialhint ```blocks let pizza: Sprite = null sprites.onOverlap(SpriteKind.Player, SpriteKind.Food, function (sprite, otherSprite) { info.changeScoreBy(1) - pizza.setPosition(randint(0, 160), randint(0, 120)) + // @highlight + pizza.setPosition(randint(0, scene.screenWidth()), randint(0, scene.screenHeight())) }) ``` -## {Step 17} -Let’s restart our countdown each time. Open the ``||info:Info||`` Toolbox drawer and drag a ``||info:start countdown||`` block into the ``||sprites:on sprite overlaps otherSprite||`` block on your Workspace. + +## {Step 13} + +**Let’s start a countdown each time the sprites overlap.** + +--- + +- :id card: From ``||info:Info||``, drag
+``||info:start countdown [3] (s)||``
+into the **end of the**
+``||sprites(noclick):on [sprite] ... overlaps [otherSprite]||``
+container already in the workspace. + + +```blockconfig.local +let pizza = sprites.create(img`.`, SpriteKind.Player) +``` + +#### ~ tutorialhint ```blocks let pizza: Sprite = null sprites.onOverlap(SpriteKind.Player, SpriteKind.Food, function (sprite, otherSprite) { info.changeScoreBy(1) - pizza.setPosition(randint(0, 160), randint(0, 120)) + pizza.setPosition(randint(0, scene.screenWidth()), randint(0, scene.screenHeight())) // @highlight - info.startCountdown(10) + info.startCountdown(3) }) ``` -## {Complete} -Congratulations, you have completed your game! Use the Game Simulator to play by moving your ``||sprites:Player||`` around the screen to try and eat as much pizza as possible before the time runs out. What’s your high score? +## {Finale} + +**🎉 Great job! 🎉** + +You've made a **Chase the Pizza** game. + +Try playing your game. How many points can you get before time runs out? + +When you're finished playing, click **Done** to share your game with family and friends! + + + +```blockconfig.local +let pizza = sprites.create(img`.`, SpriteKind.Player) +``` + +#### ~ tutorialhint ```blocks let pizza: Sprite = null let mySprite: Sprite = null -scene.setBackgroundColor(7) +scene.setBackgroundColor(13) mySprite = sprites.create(img` . . . . . 5 5 5 5 5 5 . . . . . . . . 5 5 5 5 5 5 5 5 5 5 . . . @@ -288,8 +551,23 @@ b 5 5 5 5 d d 4 4 4 4 . . . . . sprites.onOverlap(SpriteKind.Player, SpriteKind.Food, function (sprite, otherSprite) { info.changeScoreBy(1) - pizza.setPosition(randint(0, 160), randint(0, 120)) - // @highlight - info.startCountdown(10) + pizza.setPosition(randint(0, scene.screenWidth()), randint(0, scene.screenHeight())) + info.startCountdown(3) }) ``` + + +```blockconfig.global +let pizza: Sprite = null + +scene.setBackgroundColor(13) +sprites.onOverlap(SpriteKind.Player, SpriteKind.Food, function (sprite, otherSprite) {}) +randint(0, scene.screenWidth()) +pizza.setPosition(randint(0, scene.screenWidth()), randint(0, scene.screenHeight())) +info.startCountdown(3) + +``` + +```package +chase-the-pizza=github:kiki-lee/chase-the-pizza +``` \ No newline at end of file