Game Arcade

Advanced

60 mins

Teacher/Student led

255 points

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

Dino Jump

In this step-by-step lesson, students will learn to create an interactive game called Dino Jump using MakeCode Arcade. They will design a map, create a dinosaur character, program it to jump over obstacles, keep score, and determine game outcomes. This lesson combines coding, game design, and creativity.

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 Draw the map
4 Create the dino sprite
5 Gravity and moving the dino
6 Make it jump
7 Add the cactuses
8 Detect hitting a tree
9 Keep score
10 Win the game
11 Play and Review
Challenge
Quiz

1 - Introduction

Welcome to the Dino Jump game creation lesson! In this lesson, you will learn how to create a fun and interactive game using MakeCode Arcade. You will be recreating the classic Google Chrome Dino Jump game. You'll learn how to draw a map, create a dino character, make it jump, add obstacles, keep score, and even determine when the game is won. Let's get started!

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 - Draw the map

In this game the dino will run through a long map and jump over cactuses, just like the classic Google Chrome game.

Add the following code and then click on the box in the set tilemap to block to open up the map editor.

scene.setBackgroundColor(9)
tiles.setTilemap(tilemap`level1`)

In the map editor, set the dimensions of your map to be width 100 and height 8. Then draw a ground tile all the way along the bottom and a finish tile at the end. You can choose any tiles that you want.

Then make all the ground tiles walls using the draw walls tool.

done | 40 points

4 - Create the dino sprite

In the game you will be controlling a dino character that runs and jumps over the cactuses.

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

Note: there should be no gap at the bottom of your design for the dino. It's important that it's legs always 'touch the ground'.

scene.setBackgroundColor(9)
tiles.setTilemap(tilemap`level1`)
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 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 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 | 15 points

5 - Gravity and moving the dino

Now let's make the dino fall to the ground like gravity is pulling it down and also make it move forwards and go through the map.

Add the following new code:

scene.setBackgroundColor(9)
tiles.setTilemap(tilemap`level1`)
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 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 7 . . . 7 7 . . . . . 
    `, SpriteKind.Player)
mySprite.ay = 400
mySprite.vx = 100
scene.cameraFollowSprite(mySprite)

The set [ay (acceleration y)] block will simulate gravity by pulling the sprite down and the set [vx (velocity x)] block will make the dino move to the right.

The camera follow sprite block will make the camera follow the sprite as it moves to the right.

Now when your code runs the dino should fall to the ground and start moving to the right (and the camera will follow it).

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