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 Send the code to your handheld

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 + GIF - Dance Series

2 - Create a new Arcade project

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

Show: Arcade: How to create a new project

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

done 5 points + GIF - Flags Series

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)

Show: 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 + GIF - Dance Series

4 - Move left and right

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

Add the following new block and 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.

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)

done 15 points + GIF - Animals Series

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

done 15 points + GIF - Halloween Series

Join our club 😃

To view the remaining 7 steps and access hundreds of other coding projects please login or create an account.