Every game you've ever played started as a plan in a programmer's head — a list of steps, or an algorithm, for what should happen on screen. Game makers decide things like What is the hero? How does it move? How does the player score? before they write a single block.
Today you become that game maker. We're going to plan a simple catching game and then build a first working version in MakeCode Arcade: a character you can create, design and move around the screen. Watch the board first, then build it yourself and run it to see your code come to life.
Set the scene: today we plan and build our own arcade game. Have devices ready but ask pupils to watch the board first. Key question: <em>What steps would a game need before we could play it?</em> Gather a quick spoken plan for Coin Catch — a hero, moving left and right, and touching a coin to score — so the build has a purpose. Circulate once they start to catch early bugs.
MakeCode Arcade is a fun and easy-to-use tool that lets us create our own arcade games. It's like a digital playground where we can build and play games right in our web browser.
With MakeCode, we can use colourful blocks to build our games, just like Scratch.
If you have a small handheld gaming computer like the BrainPad or GameGo, you can even put the games you make onto it and play them anywhere!
Read this together as orientation only — no building yet. Ask who has used Scratch or micro:bit and draw the comparison to the block-based approach here. Reassure pupils they don't need a handheld device; everything runs in the browser simulator.
Imagine the MakeCode Arcade code editor as a magical toolbox. It's a lot like the Microbit and Scratch editors you might have used before. Here's what it has:
Point to each part on the IWB as you name it: the simulator (where the game plays), the toolbox (the blocks), and the code area (where they build). Key question: <em>Which part will show us if our code works?</em> This vocabulary helps pupils follow the later steps.
Let's create our first project!
Go to the Arcade MakeCode website and create a new project. You can call your project anything you want!
Create a new Arcade project using the makecode.com website.
Model creating a new project on the IWB so everyone lands in the same place. Let pupils name it freely. Watch for pupils who get lost between browser tabs — make sure they are on the editor, not the play page. Support: circulate and confirm each pair has a fresh project open.
Let's create a sprite for our game. Add the following code:
let mySprite = sprites.create(img`
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
`, SpriteKind.Player)
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.
Model adding the sprite block on the board before pupils copy it. Explain that the grey box is where their character will be drawn. Common issue: pupils skip the block and go straight to drawing — make sure the block is placed first. Run the simulator so they see the empty sprite appear.
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.