Game Arcade

Beginner

60 mins

Teacher/Student led

180 points

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

Bat Battle

In this step-by-step lesson, you'll learn how to create an interactive game called 'Bat Battle' using MakeCode Arcade. You'll create a spaceship, control its movements, generate enemy sprites, and program interactions between them. You'll also learn how to keep score and end the game. This lesson is perfect for beginners interested in game development and coding.

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 Create your player
4 Move left and right
5 Create the targets
6 Random position at the top
7 Make them fall
8 Fire!
9 Hit the target
10 Score a point
11 Game over
12 Wrap Up
Challenge
Quiz

1 - Introduction

Welcome to the 'Bat Battle' lesson! In this lesson, you will learn how to create a fun and interactive game using MakeCode Arcade. You will be creating a spaceship that can move left and right, shoot projectiles, and earn points by hitting targets. But be careful! If a target hits your spaceship, it's game over. Let's start coding!

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.

done | 5 points

3 - Create your player

First let's create our player sprite.

Add the following code and choose the red space ship sprite:

let mySprite: Sprite = null
mySprite = sprites.create(img`
    . . . . . . . c d . . . . . . . 
    . . . . . . . c d . . . . . . . 
    . . . . . . . c d . . . . . . . 
    . . . . . . . c b . . . . . . . 
    . . . . . . . f f . . . . . . . 
    . . . . . . . c 2 . . . . . . . 
    . . . . . . . f f . . . . . . . 
    . . . . . . . e 2 . . . . . . . 
    . . . . . . e e 4 e . . . . . . 
    . . . . . . e 2 4 e . . . . . . 
    . . . . . c c c e e e . . . . . 
    . . . . e e 2 2 2 4 e e . . . . 
    . . c f f f c c e e f f e e . . 
    . c c c c e e 2 2 2 2 4 2 e e . 
    c c c c c c e e 2 2 2 4 2 2 e e 
    c c c c c c e e 2 2 2 2 4 2 e e 
    `, SpriteKind.Player)

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.

done | 10 points

4 - Move left and right

We want to position the player sprite at the bottom of the screen and use the joystick (or arrow keys on your keyboard) to move it left and right.

Add the following new code:

let mySprite: Sprite = null
mySprite = sprites.create(img`
    . . . . . . . c d . . . . . . . 
    . . . . . . . c d . . . . . . . 
    . . . . . . . c d . . . . . . . 
    . . . . . . . c b . . . . . . . 
    . . . . . . . f f . . . . . . . 
    . . . . . . . c 2 . . . . . . . 
    . . . . . . . f f . . . . . . . 
    . . . . . . . e 2 . . . . . . . 
    . . . . . . e e 4 e . . . . . . 
    . . . . . . e 2 4 e . . . . . . 
    . . . . . c c c e e e . . . . . 
    . . . . e e 2 2 2 4 e e . . . . 
    . . c f f f c c e e f f e e . . 
    . c c c c e e 2 2 2 2 4 2 e e . 
    c c c c c c e e 2 2 2 4 2 2 e e 
    c c c c c c e e 2 2 2 2 4 2 e e 
    `, SpriteKind.Player)
mySprite.y = 110
controller.moveSprite(mySprite, 100, 0)

Make sure you select y in the position block and put in a value of 110. This will make the sprite go to the bottom.

Click the + on the move block and have values of vx 100 and vy 0. This means we can move the sprite left and right (vx) but not up and down (vy).

Once you've added the code check to see that your space ship is at the bottom and you can move it left and right.

done | 20 points

5 - Create the targets

Now we will create the target sprites that we will shoot at. We will create a new target (enemy) sprite every 2 seconds.

Add the following code and choose a sprite from the gallery. In this example we chose a bat:

let mySprite2: Sprite = null
game.onUpdateInterval(2000, function () {
    mySprite2 = sprites.create(img`
        . . f f f . . . . . . . . f f f 
        . f f c c . . . . . . f c b b c 
        f f c c . . . . . . f c b b c . 
        f c f c . . . . . . f b c c c . 
        f f f c c . c c . f c b b c c . 
        f f c 3 c c 3 c c f b c b b c . 
        f f b 3 b c 3 b c f b c c b c . 
        . c 1 b b b 1 b c b b c c c . . 
        . c 1 b b b 1 b b c c c c . . . 
        c b b b b b b b b b c c . . . . 
        c b 1 f f 1 c b b b b f . . . . 
        f f 1 f f 1 f b b b b f c . . . 
        f f 2 2 2 2 f b b b b f c c . . 
        . f 2 2 2 2 b b b b c f . . . . 
        . . f b b b b b b c f . . . . . 
        . . . f f f f f f f . . . . . . 
        `, SpriteKind.Enemy)
})

Make sure you select Enemy as the type for your target sprite.

Once you've added the code you should see your target sprite in the middle of the screen. A new enemy sprite is being created every 2 seconds but as they're getting created on top of each other, you can only see one.

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.

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