Today you are working in MakeCode Arcade. You will plan a maze escape, then build Prison Break step by step at your device: predict, build, run and fix.

You can already create sprites and move them. Today you add walls, a goal and a win condition, plus a short timer so the escape has pressure.

Before you run anything, think: what should happen when your player reaches the goal tile, and what should stop them walking through walls?

Prison Break has five parts:

1. A sprite you move with the buttons.
2. A maze you draw as a tilemap.
3. Walls the sprite cannot walk through.
4. A camera that follows you around a map bigger than the screen.
5. A goal tile and a timer to beat.

Plan the maze on paper first. It is much easier to change there than in the tilemap editor.

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

Arcade: How to create a new project

---

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

First, switch the editor to JavaScript. This studio is written in text rather than blocks. At the top of the MakeCode Arcade editor there is a toggle that says Blocks | JavaScript. Click JavaScript and type the code below into the editor.

It is the same program either way. Flip back to Blocks whenever you like and you will see the code you typed as blocks, which is a good way to check you have it right. If a line will not go in, check the brackets and the capital letters, text is fussier than blocks.

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)

Arcade: 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.

Now let's control our player with the buttons.

Add the following new code:

let mySprite = sprites.create(img`
    . . . . . . . . . . . . . . . . 
    . . . . . . . 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 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)