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

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

    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

    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.

    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.


    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.


    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