Lesson 5 of 7
Introduction to Microsoft MakeCode Arcade
Get familiar with the MakeCode Arcade interface, sprite blocks, game loops, and coordinate systems.
Learn it
Microsoft MakeCode Arcade is an awesome tool that lets you build retro 2D arcade games using blocks, JavaScript, or Python.
The screen uses a pixel grid that is 160 pixels wide and 120 pixels high. The top-left corner is coordinate (0,0).
Everything on screen is updated inside an engine loop, which runs over and over dozens of times every single second to keep action smooth.
Key terms
- MakeCode Arcade
- A block- and text-based game development platform for retro arcade titles.
- Screen Resolution
- The dimensions of the display area, standard at 160x120 pixels in MakeCode Arcade.
- SpriteKind
- A tag used to categorise sprites for collision and behavioural rules.
- Game Loop
- The background process that continuously updates positions and renders visuals.
Navigating the MakeCode Workspace
Explore the key panels inside Microsoft MakeCode Arcade.
- 1The Simulator: Use the virtual handheld console on the left to test your game in real time.
- 2Block Toolbox: Browse categories like Sprites, Controller, Game, and Scene to find coding blocks.
- 3Workspace Canvas: Snap blocks together or toggle into Python mode to write script files.
- 4Sprite Editor: Click on any image block to open the pixel art drawing canvas.
Spawning a Player Sprite
python# Python code for MakeCode Arcade
hero = sprites.create(img('''
. . 2 2 2 2 . .
. 2 2 2 2 2 2 .
2 2 f 2 2 f 2 2
2 2 2 2 2 2 2 2
. . 2 2 2 2 . .
'''), SpriteKind.player)
controller.move_sprite(hero, 100, 100)
hero.set_stay_in_screen(True)This MakeCode Python snippet creates a hero sprite of kind Player, binds it to arrow key movement, and keeps it on screen.
Build it in MakeCode
Code along right here — the real Microsoft MakeCode editor is embedded below.
Live MakeCode studio
Full block/JavaScript/Python editor for 160×120 retro games.
This is the real Microsoft MakeCode editor running inside CodeQuest. Your project saves in the MakeCode editor itself — use Share or Download in MakeCode to keep or hand in your game. If your school network blocks embedded frames, hit New tab.
Try it
Fill in the missing block code method to bind player controls to your hero sprite.
my_hero = sprites.create(assets.image('hero'), SpriteKind.player)
controller.______(my_hero, 100, 100)
my_hero.set_stay_in_screen(True)Challenge
Write down the X and Y coordinates for: top-left corner, centre of the screen, and bottom-right corner in MakeCode Arcade.
Pick whichever way suits you — every mode earns the same bonus XP.
Write at least 40 more characters to submit.
Mark your own work
Guided walkthrough — 0/5 clues revealed
- Clue 1 locked — reveal it only if you get stuck.
- Clue 2 locked — reveal it only if you get stuck.
- Clue 3 locked — reveal it only if you get stuck.
- Clue 4 locked — reveal it only if you get stuck.
- Clue 5 locked — reveal it only if you get stuck.
Each clue costs 4 XP (never below 19 XP). You'd earn 38 XP right now.
Extension: Explain how setting sprite velocity vx = 50 and vy = -50 causes the sprite to move diagonally.