Game Arcade

Advanced

60 mins

Teacher/Student led

165 points

What you need:
Chromebook/Laptop/PC or iPad/Tablet

Prison Break

In this step-by-step lesson, students will learn to create a maze game called 'Prison Break' using MakeCode Arcade. They will design a character, create a maze for the character to navigate, set a goal, and add a timer to increase the challenge. The lesson includes creating a new project, sprite creation, movement controls, drawing a maze, setting walls, camera controls, goal setting, win conditions, and a countdown timer.

Learning Goals Learning Outcomes Teacher Notes Lesson Files

Warning: Your screen size is quite small for viewing this. Rotate your device into landscape mode if you can.

1 Introduction to Prison Break Game
2 Create a new Arcade project
3 Create a sprite
4 Move with the buttons
5 Draw your maze
6 Set the walls of your map
7 Camera follow the sprite
8 Add a goal tile
9 Win the game
10 Set a timer
11 Wrap up
Challenge
Quiz

1 - Introduction to Prison Break Game

Welcome to the 'Prison Break' game creation lesson! In this lesson, you will learn how to create a fun and exciting maze game using MakeCode Arcade. You will create a character, design a maze for the character to navigate, and set a goal for the character to reach. You will also learn how to add a timer to make the game more challenging. Let's get started and have some fun!

2 - Create a new Arcade project

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.

5 points

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

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.

10 points

4 - Move with the buttons

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)

Once you've added the new code, test that you can move your player sprite with the joystick or your keyboard arrow keys.

15 points

5 - Draw your maze

Now let's draw the maze that our character will need to go through.

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)
tiles.setCurrentTilemap(tilemap`level6`)

Then click on the grey box in the set tilemap to block, this will open up the tile map editor which you can use to create a simple maze.

You should now have a maze in your game. Make your character move around the maze and you will notice that your character can walk through the walls.

20 points

Unlock the Full Learning Experience

Get ready to embark on an incredible learning journey! Get access to this lesson and hundreds more in our Digital Skills Curriculum.

Get started