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

Live Class Feed

This is a live feed of the latest activity by your students on this lesson. It will update in real-time as they work on the lesson.
Load previous activity

    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.



    2 - Create a new Arcade project

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

    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)
    

    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.


    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.


    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.

    Copyright Notice
    This lesson is copyright of DigitalSkills.org. Unauthorised use, copying or distribution is not allowed.
    🍪 Our website uses cookies to make your browsing experience better. By using our website you agree to our use of cookies. Learn more