Game Makecode Arcade

Advanced

60 mins

Teacher/Student led

Learning Goals

Learning Outcomes

Lesson Files

+150 XP

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

Maze Madness

In this lesson, students will learn to create an engaging arcade game using MakeCode Arcade. They will design a character, control it with buttons, draw a maze for navigation, and set a game goal. The lesson also covers skills like sprite creation, coding for character movement, maze design, camera control, and game-winning conditions.

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

1 Introduction
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 Wrap up
Challenge
Quiz

1 - Introduction

Welcome to the 'Maze Madness' lesson! In this exciting lesson, we are going to create a fun arcade game using MakeCode Arcade. You will learn how to create a character, control it with buttons, draw a maze for the character to navigate, and set a goal for the game. Are you ready to start this coding adventure? Let's go!

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.

+5 XP

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 XP

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 XP

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 XP

DigitalSkills.org · Online learning platform

Unlock the full learning experience

You're previewing this lesson. Get full access to this lesson and hundreds more — each one ready to teach, with interactive activities, printable resources and pupil progress tracking built in.

Hundreds of curriculum-aligned lessons

Interactive activities in every lesson

Printable resources & progress tracking

Get started

Copyright Notice
This lesson is copyright of DigitalSkills.org 2017 - 2025. Unauthorised use, copying or distribution is not allowed.