Platform Link: https://arcade.makecode.com/
Chapter 1: Why MakeCode Arcade Rocks!
For Kids Who Love to Create
"Imagine building your own video game world - with MakeCode Arcade, you become the designer, artist, and programmer all in one!"
Why It's Perfect for Beginners:
- 🎨 Visual Coding: Drag-and-drop blocks instead of typing complex code
- 🚀 Instant Play: Test your game immediately after changes
- 🎮 Pixel Power: Create retro-style games like your favorite classics
micro:bit Connection:

Try This! Connect your micro:bit and make it show a smiley face:
basic.showIcon(IconNames.Happy)
Chapter 2: Designing Your Game Universe
The Idea Generator
1. Character Creation: Draw your hero using our template:
Body: 4x6 pixels
Head: 3x3 pixels
Legs: 2x4 pixels
2. Pick Your Game Style:
- 🏃♂️ Platform Jumper (like Super Mario)
- 🚀 Space Adventure (collect stars in space)
- 🧩 Puzzle World (solve mysteries)
3. Create Your Storyboard:
Level |
Theme |
Challenge |
Forest |
Jump over rivers |
Avoid falling logs |
Ice Cave |
Slide on ice |
Dodge snowballs |
Volcano |
Jump lava streams |
Collect fireproof gear |
Chapter 3: Pixel Art Masterclass
Become a Pixel Artist
Tools You'll Love:
- MakeCode's built-in image editor (click the "Image" block)
- Free online pixel editor
Animation Secret: Create smooth motion with just 4 frames!
Frame 1: Right foot forward
Frame 2: Standing position
Frame 3: Left foot forward
Frame 4: Standing position (repeat)
1. Character Creation: Draw your hero using our template:
// Create your hero
let hero = sprites.create(img`
. . . . . . . .
. . 3 3 3 . . .
. 3 3 3 3 3 . .
. 3 1 3 1 3 . .
. 3 3 3 3 3 . .
. . 3 . 3 . . .
. . 3 . 3 . . .
. . . . . . . .
`, SpriteKind.Player)
Chapter 4: Building Game Worlds
Craft Amazing Levels
Tilemap Designer Guide:
1. Click "Scene" > "New Tilemap"
2. Paint with these special tiles:
- 🟩 Green: Safe ground
- 🔵 Blue: Water (slows movement)
- 🔴 Red: Lava (instant reset)
Physics Magic:
// Set gravity force
const GRAVITY = 1500
scene.setGravity(0, GRAVITY)
// Make character fall
hero.ay = GRAVITY
Pro Tip: Try moon gravity! Set GRAVITY = 300 for floaty jumps.
Chapter 5: Game Mechanics Deep Dive
Bring Your World to Life
Character Control System:
controller.A.onEvent(ControllerButtonEvent.Pressed, function () {
if (hero.isHittingTile(CollisionDirection.Bottom)) {
hero.vy = -200 // Jump height
}
})
controller.left.onEvent(ControllerButtonEvent.Held, function () {
hero.vx = -100 // Move left
animation.setAction(hero, ActionKind.RunningLeft)
})
Create Smart Enemies:
// Bouncing enemy
let enemy = sprites.create(enemyImg, SpriteKind.Enemy)
enemy.vx = Math.randomRange(-50, 50)
// Wall bounce logic
enemy.onUpdate(function() {
if (enemy.isHittingTile(CollisionDirection.Left)) {
enemy.vx = 50
}
})
Collection System:
sprites.onOverlap(SpriteKind.Player, SpriteKind.Coin, function(sprite, coin) {
coin.destroy()
info.changeScoreBy(10)
music.baDing.play() // Reward sound
})
Chapter 6: Animation Wizardry
Make Characters Move Smoothly
Animation Creation:
// 1. Create animation container
let runAnim = animation.createAnimation(ActionKind.Running, 100)
// 2. Add frames
runAnim.addAnimationFrame(img`frame1`)
runAnim.addAnimationFrame(img`frame2`)
runAnim.addAnimationFrame(img`frame3`)
// 3. Attach to character
animation.attachAnimation(hero, runAnim)
Pro Techniques:
1. Jump Float Effect:
jumpAnim.addAnimationFrame(img`jump_start`)
for (let i=0; i<8; i++) {
jumpAnim.addAnimationFrame(img`jump_top`) // Repeat top frame
}
jumpAnim.addAnimationFrame(img`jump_end`)
2. Direction Matters:
if (hero.vx < 0) {
animation.setAction(hero, ActionKind.RunningLeft)
} else {
animation.setAction(hero, ActionKind.RunningRight)
}
3. Shared Animations:
// All coins use same animation
const coinAnim = animation.createAnimation(...)
coins.forEach(coin => animation.attachAnimation(coin, coinAnim))
Chapter 7: micro:bit Magic
Bring Games to Real World
Button Controls:
// Use micro:bit buttons
input.onButtonPressed(Button.A, function() {
hero.vy = -200 // Jump with button A
})
Tilt Control:
// Move with micro:bit tilt
input.onGesture(Gesture.TiltLeft, function() {
hero.vx = -100
})
Life Display:
// Show lives on LEDs
basic.forever(function() {
basic.showNumber(info.life())
})
Custom Controllers:
// Use fruit to control game
let banana = game.createSprite(2, 2)
banana.onTouch(function () {
// Jump when touching fruit
})
Chapter 8: Polish Like a Pro
Make Your Game Shine
Sound Effects:
// Jump sound
controller.A.onEvent(ControllerButtonEvent.Pressed, function() {
music.playSound(music.melodyPlayable("C5-"))
})
// Coin collection
sprites.onOverlap(SpriteKind.Player, SpriteKind.Coin, function() {
music.playSound(music.melodyPlayable("Ding"))
})
Special Effects:
// Screen shake when hit
sprites.onOverlap(SpriteKind.Player, SpriteKind.Enemy, function() {
scene.cameraShake(4, 500)
})
// Background effects
effects.clouds.startScreenEffect()
Debugging Tips:
- Use console.log("Position: " + hero.x + "," + hero.y)
- Slow down animations to 300ms to see frame-by-frame
- Add temporary invincibility during testing
- Display hitboxes: hero.setFlag(SpriteFlag.ShowPhysics, true)
Chapter 9: Next Level Game Design
Expand Your Creation
Advanced Ideas:
-
Weather System:
// Rain effect in water levels
effects.blizzard.startScreenEffect()
-
Power-Up System:
sprites.onOverlap(SpriteKind.Player, SpriteKind.PowerUp, function() {
// Enable special abilities
hero.say("FIRE POWER!")
})
-
Time Challenge:
// 60-second countdown
game.splash("Race against time!")
info.startCountdown(60)
-
Secret Areas:
// Hidden warp zone
if (hero.tileKindAt(TileDirection.Center, assets.tile`warp`)) {
tiles.teleportToMap(tilemap`secret_level`)
}
Creative Spark:
- Combine micro:bit sensors with game mechanics
- Design unique character transformations
- Create dialogue trees with branching choices
Chapter 10: Your Game Creation Journey
From Idea to Playable Game
Development Path:

Troubleshooting Guide:
Problem |
Solution |
Character stuck |
Jump over rivers |
Animation glitch |
Slide on ice |
Control unresponsive |
Jump lava streams |
Performance slow |
Reduce sprite count/complexity |
Final Challenge: Build a game with:
- Custom animated character
- Interactive environment
- Collectible system
- micro:bit integration
- Special effects
"Remember: Your first game doesn't need to be perfect - start small, test often, and most importantly, have fun creating!"
Animation Mastery Cheat Sheet
Technique |
When to Use |
Frame Repeats |
Jump over rivers |
Shared Animations |
Slide on ice |
State Switching |
Jump lava streams |
Physics Visualization |
Reduce sprite count/complexity |
Directional Art |
Making movement look natural |
The Artist's Mindset: "Think of animation as digital flipbook art - each frame is a drawing, and code flips the pages for you!"
Start creating today