Game Makecode Arcade

Intermediate

60 mins

Teacher/Student led

Learning Goals

Learning Outcomes

Lesson Files

+135 XP

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.

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.

👇 Mark your steps as done as you complete them.

+5 XP

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 XP

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 XP

123learn · Online learning platform

Unlock the full learning experience

You're previewing this lesson. Get full access to this lesson and hundreds more — each one ready to teach, with interactive activities, printable resources and pupil progress tracking built in.

Hundreds of curriculum-aligned lessons

Interactive activities in every lesson

Printable resources & progress tracking

Get started

Copyright Notice
This lesson is copyright of 123Learn.ie 2017 - 2026. Unauthorised use, copying or distribution is not allowed.