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

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

    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.


    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.


    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.


    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