This code along has finished! ⌚

You can watch it back by playing the video!

The code along is open for everyone to join in but if you would like to earn the points and badges please join our club!

Create Account Schools

1 - Create a new Arcade project

Go to the https://arcade.makecode.com website and create a new project.

Show: Create a new Arcade project

Create a new Arcade project using the makecode.com website.

Mark your steps as done as you complete them.

done 5 points + Gamer Series

2 - Create a sprite

Next create a sprite for your character that you will control and navigate through the maze.

Add the following code to your project and then design a character using the sprite editor.

let mySprite = sprites.create(img`
    . . . . . . . . . . . . . . . . 
    . . . . . . . . . . . . . . . . 
    . . . . . . . . . . . . . . . . 
    . . . . . . 7 7 . . . . . . . . 
    . . . . 7 7 7 7 7 . . . . . . . 
    . . . . 7 7 7 5 7 7 . . . . . . 
    . . . . 7 7 7 7 7 7 . . . . . . 
    . . . . 7 7 7 7 7 7 . . . . . . 
    . . . . . . 7 7 . . . . . . . . 
    . . . . . . 7 7 . . . . . . . . 
    . . . . . 7 7 7 7 7 . . . . . . 
    . . . . . . 7 . . . . . . . . . 
    . . . . . . 7 . . . . . . . . . 
    . . . . . 7 7 7 . . . . . . . . 
    . . . . 7 7 . 7 7 . . . . . . . 
    . . . . . . . . . . . . . . . . 
    `, SpriteKind.Player)

Show: How to create a sprite in Arcade

Click on the gray box in the sprite block to open the Editor. You can choose a sprite from the Gallery or you can paint your own sprite using the Editor.

done 20 points + Science Series

3 - Move with the buttons

Add a move (mySprite) with buttons block underneath the set [mySprite] to block so that you can control the movement of the sprite with the arrow buttons.

let mySprite = sprites.create(img`
    . . . . . . . . . . . . . . . . 
    . . . . . . . . . . . . . . . . 
    . . . . . . . . . . . . . . . . 
    . . . . . . 7 7 . . . . . . . . 
    . . . . 7 7 7 7 7 . . . . . . . 
    . . . . 7 7 7 5 7 7 . . . . . . 
    . . . . 7 7 7 7 7 7 . . . . . . 
    . . . . 7 7 7 7 7 7 . . . . . . 
    . . . . . . 7 7 . . . . . . . . 
    . . . . . . 7 7 . . . . . . . . 
    . . . . . 7 7 7 7 7 . . . . . . 
    . . . . . . 7 . . . . . . . . . 
    . . . . . . 7 . . . . . . . . . 
    . . . . . 7 7 7 . . . . . . . . 
    . . . . 7 7 . 7 7 . . . . . . . 
    . . . . . . . . . . . . . . . . 
    `, SpriteKind.Player)
controller.moveSprite(mySprite)

done 15 points + Vehicles Series

4 - Design your prison map

Now add a set tilemap to block inside the on start block and map editor to draw a maze. You will need to draw:

the corridors of the maze.
the walls of the maze.
a different tile for where you start the maze.
a different tile for where you complete the maze.

Use whichever tiles you want, if the example we are using tiles from the 'Dungeon' category.

Make sure you leave a path through from the start of the maze to the end!

let mySprite = sprites.create(img`
    . . . . . . . . . . . . . . . . 
    . . . . . . . . . . . . . . . . 
    . . . . . . . . . . . . . . . . 
    . . . . . . 7 7 . . . . . . . . 
    . . . . 7 7 7 7 7 . . . . . . . 
    . . . . 7 7 7 5 7 7 . . . . . . 
    . . . . 7 7 7 7 7 7 . . . . . . 
    . . . . 7 7 7 7 7 7 . . . . . . 
    . . . . . . 7 7 . . . . . . . . 
    . . . . . . 7 7 . . . . . . . . 
    . . . . . 7 7 7 7 7 . . . . . . 
    . . . . . . 7 . . . . . . . . . 
    . . . . . . 7 . . . . . . . . . 
    . . . . . 7 7 7 . . . . . . . . 
    . . . . 7 7 . 7 7 . . . . . . . 
    . . . . . . . . . . . . . . . . 
    `, SpriteKind.Player)
controller.moveSprite(mySprite)
tiles.setTilemap(tilemap`level2`)

done 30 points + Sports Series

5 - Set the walls of your map

At the moment you can just walk through the wall tiles of your map.

Use the Draw Walls tool to set which tiles should act as walls and prevent the sprite going through them.

done 20 points + Outdoors Series

6 - Place your sprite at the start

Add a place (mySprite) on top of random block inside the on start block and choose the tile that you set for the start of your maze.

let mySprite = sprites.create(img`
    . . . . . . . . . . . . . . . . 
    . . . . . . . . . . . . . . . . 
    . . . . . . . . . . . . . . . . 
    . . . . . . 7 7 . . . . . . . . 
    . . . . 7 7 7 7 7 . . . . . . . 
    . . . . 7 7 7 5 7 7 . . . . . . 
    . . . . 7 7 7 7 7 7 . . . . . . 
    . . . . 7 7 7 7 7 7 . . . . . . 
    . . . . . . 7 7 . . . . . . . . 
    . . . . . . 7 7 . . . . . . . . 
    . . . . . 7 7 7 7 7 . . . . . . 
    . . . . . . 7 . . . . . . . . . 
    . . . . . . 7 . . . . . . . . . 
    . . . . . 7 7 7 . . . . . . . . 
    . . . . 7 7 . 7 7 . . . . . . . 
    . . . . . . . . . . . . . . . . 
    `, SpriteKind.Player)
controller.moveSprite(mySprite)
tiles.setTilemap(tilemap`level2`)
tiles.placeOnRandomTile(mySprite, sprites.dungeon.stairLarge)

done 15 points + Space Series

7 - Camera follow the sprite

At the moment if you move your sprite off the screen they will disappear, so add a camera follow sprite (mySprite) block inside the on start block so that the camera follows your sprite wherever it goes.

let mySprite = sprites.create(img`
    . . . . . . . . . . . . . . . . 
    . . . . . . . . . . . . . . . . 
    . . . . . . . . . . . . . . . . 
    . . . . . . 7 7 . . . . . . . . 
    . . . . 7 7 7 7 7 . . . . . . . 
    . . . . 7 7 7 5 7 7 . . . . . . 
    . . . . 7 7 7 7 7 7 . . . . . . 
    . . . . 7 7 7 7 7 7 . . . . . . 
    . . . . . . 7 7 . . . . . . . . 
    . . . . . . 7 7 . . . . . . . . 
    . . . . . 7 7 7 7 7 . . . . . . 
    . . . . . . 7 . . . . . . . . . 
    . . . . . . 7 . . . . . . . . . 
    . . . . . 7 7 7 . . . . . . . . 
    . . . . 7 7 . 7 7 . . . . . . . 
    . . . . . . . . . . . . . . . . 
    `, SpriteKind.Player)
controller.moveSprite(mySprite)
tiles.setTilemap(tilemap`level2`)
tiles.placeOnRandomTile(mySprite, sprites.dungeon.stairLarge)
scene.cameraFollowSprite(mySprite)

done 15 points + Autumn Series

8 - Add a countdown

Now to make the game challenging we're going to set a time and start a countdown that the player must finish the maze in.

Add a start countdown block inside the on start block and set the amount of seconds you wish to give the player to complete your prison maze.

let mySprite = sprites.create(img`
    . . . . . . . . . . . . . . . . 
    . . . . . . . . . . . . . . . . 
    . . . . . . . . . . . . . . . . 
    . . . . . . 7 7 . . . . . . . . 
    . . . . 7 7 7 7 7 . . . . . . . 
    . . . . 7 7 7 5 7 7 . . . . . . 
    . . . . 7 7 7 7 7 7 . . . . . . 
    . . . . 7 7 7 7 7 7 . . . . . . 
    . . . . . . 7 7 . . . . . . . . 
    . . . . . . 7 7 . . . . . . . . 
    . . . . . 7 7 7 7 7 . . . . . . 
    . . . . . . 7 . . . . . . . . . 
    . . . . . . 7 . . . . . . . . . 
    . . . . . 7 7 7 . . . . . . . . 
    . . . . 7 7 . 7 7 . . . . . . . 
    . . . . . . . . . . . . . . . . 
    `, SpriteKind.Player)
controller.moveSprite(mySprite)
tiles.setTilemap(tilemap`level2`)
tiles.placeOnRandomTile(mySprite, sprites.dungeon.stairLarge)
scene.cameraFollowSprite(mySprite)
info.startCountdown(20)

done 20 points + Spring Series

9 - Win the game

Finially we just need to detect if the sprite gets to the finish tile.

Add the following code and choose the tile that you set as your finish tile.

scene.onOverlapTile(SpriteKind.Player, sprites.castle.tileGrass2, function (sprite, location) {
    game.over(true, effects.confetti)
})

done 30 points + Summer Series

11 - Challenge

Have fun playing the game! If you want an extra challenge, think about how you could add a second level to the map, what code would you need to add?

done 30 points + Winter Series

10 - Send the code to your handheld

Send the completed code to your Arcade handheld computer.

Show: How to send code to your Arcade game console

Give your project a name and send it to your Arcade game console (i.e. BrainPad Arcade) by following these steps:

Type "your project name" into the Project Name box.
Connect your game console to your computer using the USB cable.
Click the 'Download' button (a file called 'arcade-project-name.uf2' will be downloaded to your computer).
Open the folder on your computer where the file downloaded to.
Right click on the file.
Click Send To.
Click Arcade (or whatever your game console is listed as).

done 15 points + Winter Series

Join our club 😃

Create your profile, earn points & badges and learn how to code!