Game Arcade

Advanced

60 mins

Teacher/Student led

165 points

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

Fruit Frenzy

In this lesson, you'll create an interactive game called 'Fruit Collector' using MakeCode Arcade. You'll learn how to create and control a character, generate falling fruits and harmful rocks, and manage scoring and lives. The lesson covers game loops, character controls, collision detection, and more. No prior coding experience is required.

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 project
3 Create Player Character
4 Setting Player Controls
5 Create the Fruit sprites
6 Make them fall
7 Create Harmful Rocks
8 Set the number of lives
9 Detect overlap with fruit
10 Detect overlap with rocks
11 Wrap Up
Challenge
Quiz

1 - Introduction

Welcome to the 'Fruit Frenzy' lesson! In this fun and interactive lesson, you will create a game called 'Fruit Collector' using MakeCode Arcade. You will control a character to collect falling fruits and dodge harmful rocks. You will learn about game loops, character controls, collision detection, and scoring. Let's get started!

2 - Create 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.

done | 5 points

3 - Create Player Character

Let's create the player character.

Add the following code:

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

Then either design a character or choose one from the gallery.

done | 10 points

4 - Setting Player Controls

In this step, we'll position the sprite at the bottom of the screen and allow the player to move it left and right (but not up and down).

Add the following new code:

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

Make sure you select y in the set block.

Make sure you set vx to 100 and vy to 0 in the move block

The Y value is used to set the vertical (up and down) position of the sprite on the screen. The screen's height is 120 pixels, so setting Y to 110 positions the sprite near the bottom of the screen.

By setting the VY value to 0, we are making sure that the sprite does not move up or down, no matter what keys are pressed. This is because VY controls the vertical speed of the sprite. A VY of 0 means no vertical movement.

Once you've added the new code, test that you can move your player sprite left and right but not up and down.

done | 15 points

5 - Create the Fruit sprites

Next let's create some fruit that we need to collect. Every 2 seconds a new strawberry will be created somewhere along the top of the screen (we will program it to fall in the next step).

Add the following code:

let mySprite2: Sprite = null
game.onUpdateInterval(2000, function () {
    mySprite2 = sprites.create(img`
        . . . . . . . 6 . . . . . . . . 
        . . . . . . 8 6 6 . . . 6 8 . . 
        . . . e e e 8 8 6 6 . 6 7 8 . . 
        . . e 2 2 2 2 e 8 6 6 7 6 . . . 
        . e 2 2 4 4 2 7 7 7 7 7 8 6 . . 
        . e 2 4 4 2 6 7 7 7 6 7 6 8 8 . 
        e 2 4 5 2 2 6 7 7 6 2 7 7 6 . . 
        e 2 4 4 2 2 6 7 6 2 2 6 7 7 6 . 
        e 2 4 2 2 2 6 6 2 2 2 e 7 7 6 . 
        e 2 4 2 2 4 2 2 2 4 2 2 e 7 6 . 
        e 2 4 2 2 2 2 2 2 2 2 2 e c 6 . 
        e 2 2 2 2 2 2 2 4 e 2 e e c . . 
        e e 2 e 2 2 4 2 2 e e e c . . . 
        e e e e 2 e 2 2 e e e c . . . . 
        e e e 2 e e c e c c c . . . . . 
        . c c c c c c c . . . . . . . . 
        `, SpriteKind.Food)
    mySprite2.setPosition(randint(0, 160), 0)
})

Make sure you select Food as the kind of sprite.

Make sure you select MySprite2 in the set position block.

In the pick random block put in the values 0 to 160 for X. The screen is 160 in width so these values ensure that the fruit sprites can appear anywhere along the top of the screen.

X and Y coordinates are like a treasure map where the X tells you how far to go sideways, and the Y tells you how far to go up or down to find the treasure.

Now every 2 seconds the food sprite should be created in a random place at the top of the screen.

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