Game Arcade

Intermediate

60 mins

Teacher/Student led

135 points

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

Beat The Clock

In this lesson, students will learn to create an engaging game called 'Beat The Clock' using MakeCode Arcade. They will gain hands-on experience in creating game elements, setting up a timer, designing a scoring system, and coding for sprite movement and interaction. This lesson offers a fun and interactive way to learn coding concepts.

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 Start a New Project
3 Set Up Game Elements
4 Move the Player
5 Move the Target
6 Set Up the Timer
7 Detect the Overlap
8 Create a Scoring System
9 Wrap Up
Challenge
Quiz

1 - Introduction

Welcome to our exciting lesson, 'Beat The Clock'! In this lesson, we are going to create a fun game using MakeCode Arcade. You will learn how to create game elements, set up a timer, create a scoring system, and much more. Are you ready to start coding? Let's dive in!

2 - Start a New Project

Open the MakeCode Arcade website using the link below and create a new project. You can call the project whatever you want.

https://arcade.makecode.com

Arcade: How to create a new project

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

5 points

3 - Set Up Game Elements

Let's set up the game elements. We will create a player sprite and a target sprite.

Add the following code and design your player and target sprites:

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 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 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 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 5 5 5 5 5 5 5 5 5 5 5 5 5 
    `, SpriteKind.Player)
let mySprite2 = sprites.create(img`
    2 . . . . . . . . . . . . . . 2 
    . 2 . . . . . . . . . . . . 2 . 
    . . 2 . . . . . . . . . . 2 . . 
    . . . 2 . . . . . . . . 2 . . . 
    . . . . 2 . . . . . . 2 . . . . 
    . . . . . 2 . . . . 2 . . . . . 
    . . . . . . 2 . . 2 . . . . . . 
    . . . . . . . 2 2 . . . . . . . 
    . . . . . . . 2 2 . . . . . . . 
    . . . . . . 2 . . 2 . . . . . . 
    . . . . . 2 . . . . 2 . . . . . 
    . . . . 2 . . . . . . 2 . . . . 
    . . . 2 . . . . . . . . 2 . . . 
    . . 2 . . . . . . . . . . 2 . . 
    . 2 . . . . . . . . . . . . 2 . 
    2 . . . . . . . . . . . . . . 2 
    `, SpriteKind.Food)

Make sure you select Food as the kind of sprite for your target sprite.

You can design the player and target sprites however you wish, or choose characters from he gallery. In our example we are using a yellow square as the player and a red X as the target.

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.

20 points

4 - Move the Player

Now, let's make your sprite move using the joystick (or the arrow keys on your keyboard).

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 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 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 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 5 5 5 5 5 5 5 5 5 5 5 5 5 
    `, SpriteKind.Player)
controller.moveSprite(mySprite)
let mySprite2 = sprites.create(img`
    2 . . . . . . . . . . . . . . 2 
    . 2 . . . . . . . . . . . . 2 . 
    . . 2 . . . . . . . . . . 2 . . 
    . . . 2 . . . . . . . . 2 . . . 
    . . . . 2 . . . . . . 2 . . . . 
    . . . . . 2 . . . . 2 . . . . . 
    . . . . . . 2 . . 2 . . . . . . 
    . . . . . . . 2 2 . . . . . . . 
    . . . . . . . 2 2 . . . . . . . 
    . . . . . . 2 . . 2 . . . . . . 
    . . . . . 2 . . . . 2 . . . . . 
    . . . . 2 . . . . . . 2 . . . . 
    . . . 2 . . . . . . . . 2 . . . 
    . . 2 . . . . . . . . . . 2 . . 
    . 2 . . . . . . . . . . . . 2 . 
    2 . . . . . . . . . . . . . . 2 
    `, SpriteKind.Food)

Once you've added the new code, test that you can move your player sprite with the joystick or your keyboard arrow keys.

10 points

5 - Move the Target

Now let's add code to move the target to a random place at the start of the game.

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 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 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 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 5 5 5 5 5 5 5 5 5 5 5 5 5 
    `, SpriteKind.Player)
controller.moveSprite(mySprite)
let mySprite2 = sprites.create(img`
    2 . . . . . . . . . . . . . . 2 
    . 2 . . . . . . . . . . . . 2 . 
    . . 2 . . . . . . . . . . 2 . . 
    . . . 2 . . . . . . . . 2 . . . 
    . . . . 2 . . . . . . 2 . . . . 
    . . . . . 2 . . . . 2 . . . . . 
    . . . . . . 2 . . 2 . . . . . . 
    . . . . . . . 2 2 . . . . . . . 
    . . . . . . . 2 2 . . . . . . . 
    . . . . . . 2 . . 2 . . . . . . 
    . . . . . 2 . . . . 2 . . . . . 
    . . . . 2 . . . . . . 2 . . . . 
    . . . 2 . . . . . . . . 2 . . . 
    . . 2 . . . . . . . . . . 2 . . 
    . 2 . . . . . . . . . . . . 2 . 
    2 . . . . . . . . . . . . . . 2 
    `, SpriteKind.Food)
mySprite2.setPosition(randint(0, 160), randint(0, 120))

Make sure you select MySprite2 in the set position block.

In the pick random blocks put in the values 0 to 160 for X and 0 to 120 for Y. The screen is 160 in width and 120 in height so these values ensure that the food sprites can appear anywhere on the screen, from the very top to the very bottom, and from the far left to the far right.

Now at the start of the game, the target should go to a random position on the screen.

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