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.

👇 Mark your steps as done as you complete them.

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

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

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

done | 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