Game Arcade

Intermediate

60 mins

Teacher/Student led

265 points

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

Platform Place

In this step-by-step lesson, you'll create your own platform game using MakeCode Arcade. You'll learn how to create a sprite, control its movements, add gravity, draw a map, and program the sprite to jump. You'll also add danger tiles, a goal, and a game over condition. By the end, you'll have a fully playable game to enjoy.

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
2 Create a new Arcade project
3 Create your sprite
4 Move left and right
5 Add gravity
6 Draw the map
7 Jump
8 Move through the map
9 Only jump when touching ground
10 Danger tiles
11 Goal
12 Game Time
Challenge
Quiz

1 - Introduction

Platform games (often simplified as platformer or jump 'n' run games) are a video game genre of action games in which the goal is to move the player character between points in an environment. Platformers use in jumping and climbing to navigate the player's environment and reach their goal. Levels and environments feature uneven terrain and suspended platforms of varying height that requires use of the player character's abilities in order to traverse them.

👇 Mark your steps as done as you complete them.

done | 10 points

2 - Create a new Arcade project

Go to the 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 your sprite

In this game you will control a sprite and move it from the start of the map, to the goal at the end.

Add the following code to your project to create your sprite and use the sprite editor to design your character.

let mySprite = sprites.create(img`
    5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 
    5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 
    5 5 5 f f 5 5 5 5 f f 5 5 5 5 5 
    5 5 5 f f 5 5 5 5 f f 5 5 5 5 5 
    5 5 5 f f 5 5 5 5 f f 5 5 5 5 5 
    5 5 5 f f f f 5 5 f f f f 5 5 5 
    5 5 5 f f f f 5 5 f f f f 5 5 5 
    5 5 5 f f f f 5 5 f f f f 5 5 5 
    5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 
    5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 
    5 f 5 5 5 5 5 5 5 5 5 5 5 f 5 5 
    5 f f 5 5 5 5 5 5 5 5 5 f f 5 5 
    5 5 f f f f f f f f f f f 5 5 5 
    5 5 f f f f f f f f f f 5 5 5 5 
    5 5 5 f f f f f f f f 5 5 5 5 5 
    5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 5 
    `, 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 | 15 points

4 - Move left and right

In the game we will use the left and right buttons to move our sprite.

Add the following new code:

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

Click the + to set the vx value to 100 and the vy value to 0. We set the vy value to 0 so that up and down buttons do not move the sprite.

Test that you can move your character left and right but not up and down.

done | 15 points

5 - Add gravity

In a platformer game our there needs to be gravity so that the character can move and jump around the platforms.

Add the following code to make your sprite constantly fall down just like gravity.

forever(function () {
    mySprite.vy = 50
})

let mySprite: Sprite = null

The vy (velocity y) value sets the speed and direction of a sprite. a negative number makes it go upwards, and a positive number makes it go downwards.

Now your sprite should fall down off the screen.

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

Platform Place

Live Class Feed

1 - Introduction

2 - Create a new Arcade project

3 - Create your sprite

4 - Move left and right

5 - Add gravity

Unlock the Full Learning Experience

Learning Points