Today we are coding in MakeCode Arcade. You will build a Hot Air Balloon game step by step at your device: predict what a section will do, run it, investigate what actually happens, then fix and document the code.
You will read the code carefully as you go, find and fix anything that does not work, and add comments so another person can follow it. You will also explain one section to a partner.
Open MakeCode Arcade and be ready to start a new project when the build begins.
Keep the start short. Devices on MakeCode Arcade, students logged in. Frame today's focus as reading code, debugging, and commenting, not only finishing a game. Optional predict: before anyone runs code, ask what a hot air balloon game might need on screen (player, obstacles, end rule) and park one or two ideas to revisit in make sense. Organise pairs now if you want partner explanation later. Do not let this run long; time belongs to the build and the debug talk.
Start by creating a new project. To do this, visit MakeCode Arcade and click on 'New Project'. Name your project 'Hot Air Balloon'.
Model creating a new project and naming it Hot Air Balloon on the board. Watch for students opening an old project by mistake or misspelling the name so they cannot find it later. Differentiation: stay with anyone still logging in so the class meets the first real code step together.
Let's start by setting up the game environment. We will first set the background color of the game screen. Add the following code:
scene.setBackgroundColor(9)
This will set the background color to a sky blue, perfect for our hot air balloon game.
Key question: why start with the background before sprites? Ask what colour they expect for a sky scene and what they will see if this line is missing. Common bug: background block omitted or placed after other setup so the screen looks wrong on first run. Model reading the line aloud, then students add it. Brief comment prompt: a one-line note on why the background is set.
Now, let's create our hot air balloon, which will be the player in the game. We will use the 'spritedata.create' function to do this. Add the following code:
let player = sprites.create(img`...`, SpriteKind.Player)
You can choose your own design for the hot air balloon using the image editor.
Model opening the image editor and keeping the balloon design simple. Key question: what does creating a player sprite actually give us in the game? Watch for students forgetting to store the sprite in a variable or picking the wrong sprite kind. Differentiation: offer a simple balloon shape for anyone stuck in the editor; extend by asking others to refine the image and comment what the player represents.
Next, we need to control the player. We will allow the player to move left and right using the arrow keys. Add the following code:
controller.moveSprite(player, 100, 0)
This code will allow the player to move left and right at a speed of 100.
PRIMM beat: predict how the balloon will move before running. Key question: what do the two speed values control? Common misconception: both values need to be 100, which makes the balloon move vertically too. On the board, stress left and right only (vertical 0). Bug to watch: controller code attached to the wrong sprite name. Cue a short comment on how the player is controlled.
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.
This lesson is copyright of Coding Ireland 2017 - 2025. Unauthorised use, copying or distribution is not allowed.