Table of Contents

Creating your first game is one of the most exciting moments in a young coder’s journey. Code.org provides a perfect platform for kids to bring their game ideas to life using visual programming blocks that make coding fun and accessible.

Whether your child is 6 or 16, this guide will walk you through building an actual working game in Code.org – complete with real code examples you can use right away.

What You’ll Learn

By the end of this tutorial, your child will be able to:

• Create a playable game with characters and obstacles
• Add scoring systems and game mechanics
• Implement collision detection (when objects touch)
• Design multiple difficulty levels
• Debug and improve their game

Estimated Time: 45-60 minutes

Best For: Ages 8+ (younger kids can follow with parent guidance)

Platform: Code.org App Lab (free account required)

Why Code.org is Perfect for Young Game Developers

Code.org App Lab uses JavaScript – the same language professional web developers use – but presents it in a beginner-friendly way. Kids can switch between blocks (drag-and-drop) and text code, making it ideal for growing with their skills.

Step 1: Setting Up Your Game Canvas

First, let’s create the game screen where all the action happens.

What you’ll do:

1. Go to code.org/applab and create a new project
2. Name it “My First Game”
3. Switch to “Design” mode
4. Add a canvas element (this is where your game graphics appear)

The code to add:

// Create the game canvas
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// Set canvas size
canvas.width = 320;
canvas.height = 450;

What this does: Creates a 320×450 pixel drawing area where your game graphics will appear.

Common mistake to avoid: Make sure your canvas ID in the code matches the canvas ID in Design mode. If they don’t match, nothing will appear!

Step 2: Creating Your Player Character

Every game needs a hero. Let’s create a player character that can move around the screen.

The code:

// Player object
var player = {
  x: 160,        // Starting x position (center)
  y: 400,        // Starting y position (near bottom)
  width: 30,     // Character width
  height: 30,    // Character height
  speed: 5,      // How fast they move
  color: "blue"
};

// Draw the player
function drawPlayer() {
  ctx.fillStyle = player.color;
  ctx.fillRect(player.x, player.y, player.width, player.height);
}

What your child learns: Object-oriented thinking – grouping related information (position, size, speed) into one “player” object.

Step 3: Adding Keyboard Controls

Now let’s make the player move when arrow keys are pressed.

The code:

// Track which keys are pressed
var keys = {};

// Listen for key presses
onEvent("canvas", "keydown", function(event) {
  keys[event.key] = true;
});

onEvent("canvas", "keyup", function(event) {
  keys[event.key] = false;
});

// Move player based on keys pressed
function movePlayer() {
  if (keys["Left"] && player.x > 0) {
    player.x -= player.speed;
  }
  if (keys["Right"] && player.x < canvas.width - player.width) {
    player.x += player.speed;
  }
  if (keys["Up"] && player.y > 0) {
    player.y -= player.speed;
  }
  if (keys["Down"] && player.y < canvas.height - player.height) {
    player.y += player.speed;
  }
}

What this does:

• Tracks when arrow keys are pressed down and released
• Moves the player in the direction of the pressed key
• Prevents the player from moving off-screen (those player.x > 0 checks)

Try this: Change player.speed from 5 to 10. What happens? This teaches kids how variables control behavior.

Step 4: Creating Obstacles (The Challenge!)

Games need obstacles to make them challenging. Let’s create falling objects the player must avoid.

The code:

// Array to hold all obstacles
var obstacles = [];

// Create a new obstacle
function createObstacle() {
  var obstacle = {
    x: randomNumber(0, canvas.width - 30),
    y: -30,
    width: 30,
    height: 30,
    speed: randomNumber(2, 5),
    color: "red"
  };
  obstacles.push(obstacle);
}

// Draw all obstacles
function drawObstacles() {
  for (var i = 0; i < obstacles.length; i++) {
    ctx.fillStyle = obstacles[i].color;
    ctx.fillRect(obstacles[i].x, obstacles[i].y, 
                 obstacles[i].width, obstacles[i].height);
  }
}

// Move obstacles down the screen
function moveObstacles() {
  for (var i = obstacles.length - 1; i >= 0; i--) {
    obstacles[i].y += obstacles[i].speed;

    // Remove obstacles that went off screen
    if (obstacles[i].y > canvas.height) {
      obstacles.splice(i, 1);
    }
  }
}

// Create new obstacle every 60 frames (about 1 second)
var frameCount = 0;
function spawnObstacles() {
  frameCount++;
  if (frameCount % 60 === 0) {
    createObstacle();
  }
}

What your child learns:

• Arrays (lists) to manage multiple objects
• Loops to process each obstacle
• Random numbers for variety
• Memory management (removing off-screen obstacles)

Screenshot moment: This is where the game starts feeling real – obstacles falling from the top!

Step 5: Collision Detection (When Things Touch)

This is the most important part – detecting when the player hits an obstacle.

The code:

// Check if two rectangles overlap
function checkCollision(rect1, rect2) {
  return rect1.x < rect2.x + rect2.width &&
         rect1.x + rect1.width > rect2.x &&
         rect1.y < rect2.y + rect2.height &&
         rect1.y + rect1.height > rect2.y;
}

// Check player against all obstacles
function detectCollisions() {
  for (var i = 0; i < obstacles.length; i++) {
    if (checkCollision(player, obstacles[i])) {
      gameOver();
    }
  }
}

What this does: Uses rectangle collision math to detect when the player and an obstacle overlap. When they do – game over!

Math connection: This teaches coordinate geometry in a fun way. The collision formula checks if rectangles overlap on both X and Y axes.

Step 6: Adding Score and Lives

Let’s track how long the player survives and give them multiple chances.

The code:

var score = 0;
var lives = 3;
var gameActive = true;

// Update score every frame
function updateScore() {
  score++;
  setText("scoreLabel", "Score: " + Math.floor(score / 60));
}

// Lose a life on collision
function loseLife() {
  lives--;
  setText("livesLabel", "Lives: " + lives);

  if (lives <= 0) {
    gameOver();
  } else {
    // Reset player position
    player.x = 160;
    player.y = 400;
    // Clear obstacles
    obstacles = [];
  }
}

// Modified collision detection
function detectCollisions() {
  for (var i = 0; i < obstacles.length; i++) {
    if (checkCollision(player, obstacles[i])) {
      loseLife();
      obstacles.splice(i, 1);
      break;
    }
  }
}

Add to Design mode:

• Text label with ID “scoreLabel”
• Text label with ID “livesLabel”

What your child learns: Game design principles – giving players feedback (score) and multiple chances (lives) makes games more engaging.

Step 7: The Game Loop (Making It All Work)

Now we connect everything together with the game loop – the heartbeat of every game.

The code:

// Main game loop
function gameLoop() {
  if (!gameActive) return;

  // Clear the canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Update game state
  movePlayer();
  moveObstacles();
  spawnObstacles();
  detectCollisions();
  updateScore();

  // Draw everything
  drawPlayer();
  drawObstacles();
}

// Start the game loop (60 times per second)
setInterval(gameLoop, 1000/60);

// Game over function
function gameOver() {
  gameActive = false;
  setText("gameStatus", "Game Over! Score: " + Math.floor(score / 60));
  showElement("restartButton");
}

// Restart button
onEvent("restartButton", "click", function() {
  score = 0;
  lives = 3;
  gameActive = true;
  obstacles = [];
  player.x = 160;
  player.y = 400;
  hideElement("restartButton");
  setText("gameStatus", "");
});

What this does: Runs 60 times per second, updating positions, checking collisions, and redrawing everything. This creates smooth animation.

Teaching moment: This is how ALL games work – from mobile games to PlayStation – they all have a loop that updates and draws repeatedly.

Step 8: Adding Power-Ups (Level Up!)

Let’s add collectible items that give the player advantages.

The code:

var powerUps = [];

// Create power-up
function createPowerUp() {
  var powerUp = {
    x: randomNumber(0, canvas.width - 20),
    y: -20,
    width: 20,
    height: 20,
    speed: 3,
    color: "green",
    type: "shield" // or "slow" or "points"
  };
  powerUps.push(powerUp);
}

// Draw power-ups
function drawPowerUps() {
  for (var i = 0; i < powerUps.length; i++) {
    ctx.fillStyle = powerUps[i].color;
    ctx.fillRect(powerUps[i].x, powerUps[i].y, 
                 powerUps[i].width, powerUps[i].height);
  }
}

// Check power-up collection
function checkPowerUps() {
  for (var i = powerUps.length - 1; i >= 0; i--) {
    powerUps[i].y += powerUps[i].speed;

    if (checkCollision(player, powerUps[i])) {
      activatePowerUp(powerUps[i].type);
      powerUps.splice(i, 1);
    } else if (powerUps[i].y > canvas.height) {
      powerUps.splice(i, 1);
    }
  }
}

// Activate power-up effect
function activatePowerUp(type) {
  if (type === "shield") {
    // Make player invincible for 3 seconds
    player.color = "gold";
    setTimeout(function() {
      player.color = "blue";
    }, 3000);
  } else if (type === "slow") {
    // Slow down obstacles for 5 seconds
    for (var i = 0; i < obstacles.length; i++) {
      obstacles[i].speed *= 0.5;
    }
  } else if (type === "points") {
    score += 300;
  }
}

// Add to game loop
function gameLoop() {
  // ... existing code ...
  checkPowerUps();
  drawPowerUps();

  // Spawn power-up occasionally
  if (frameCount % 300 === 0) {
    createPowerUp();
  }
}

What your child learns:

• Different object types (obstacles vs power-ups)
• Temporary effects using timers
• Game balance (how often should power-ups appear?)

Step 9: Adding Difficulty Progression

Good games get harder over time. Let’s implement that.

The code:

var level = 1;
var obstacleSpawnRate = 60; // Frames between obstacles

function increaseDifficulty() {
  if (score % 600 === 0 && score > 0) { // Every 10 seconds
    level++;
    obstacleSpawnRate = Math.max(30, obstacleSpawnRate - 5);
    setText("levelLabel", "Level: " + level);

    // Optional: Make obstacles faster
    for (var i = 0; i < obstacles.length; i++) {
      obstacles[i].speed += 0.5;
    }
  }
}

// Modified spawn function
function spawnObstacles() {
  frameCount++;
  if (frameCount % obstacleSpawnRate === 0) {
    createObstacle();
  }
}

// Add to game loop
function gameLoop() {
  // ... existing code ...
  increaseDifficulty();
}

What this does: Every 10 seconds, obstacles spawn faster and move quicker, creating escalating challenge.

Complete Working Example

You can see a live demo and remix the complete game here: [Link to your Code.org shared project]

The full game includes:

• Smooth player movement
• Falling obstacles with random speeds
• Collision detection
• Score tracking
• Multiple lives
• Power-ups
• Progressive difficulty
• Game over and restart

Common Mistakes and How to Fix Them

Problem: “My player disappears!”

Solution: Check that you’re calling drawPlayer() in your game loop AFTER ctx.clearRect(). The clear function erases everything, so you must redraw each frame.

Problem: “Obstacles don’t appear”

Solution: Make sure spawnObstacles() is being called in the game loop, and check that your canvas height is set correctly (obstacles start at y: -30, above the visible area).

Problem: “Collision detection doesn’t work”

Solution: Log the player and obstacle positions using console.log(player.x, player.y) to verify they’re actually overlapping. The collision might be happening, but the game over function might not be working.

Problem: “Game runs too fast or too slow”

Solution: The game loop runs at 60fps. If it’s too fast, increase the frame counts in spawn functions. If too slow, your computer might be struggling – try reducing the number of obstacles.

What Your Child Just Learned

By building this game, your child practiced:

Programming Concepts:

• Variables and data types
• Objects and properties
• Arrays and loops
• Functions and parameters
• Event handling
• Conditional logic (if/else)

Math Skills:

• Coordinate systems (X, Y positions)
• Velocity and speed
• Collision geometry
• Percentages (score display)
• Random number generation

Problem-Solving Skills:

• Breaking big problems into small steps
• Debugging (finding and fixing errors)
• Testing and iteration
• Game balance and design

Computational Thinking:

• Algorithms (the collision detection formula)
• Abstraction (creating reusable functions)
• Pattern recognition (similar code for obstacles and power-ups)

Taking It Further: Advanced Challenges

Once your child has the basic game working, here are ways to expand it:

Easy Additions:

1. Add sound effects using playSound()
2. Create different obstacle shapes (circles, triangles)
3. Add a high score that persists between games
4. Create different colored obstacles worth different points

Medium Challenges:

1. Add a boss enemy that appears every 5 levels
2. Create multiple player characters with different abilities
3. Add animated sprites instead of colored rectangles
4. Implement a combo system (bonus points for avoiding multiple obstacles in a row)

Advanced Projects:

1. Add multiplayer (two players controlling different characters)
2. Create multiple levels with different backgrounds
3. Implement particle effects (explosions, trails)
4. Add a level editor where players design their own challenges

Why This Matters for Your Child’s Future

Game development isn’t just fun – it’s one of the most effective ways to learn programming because:

• Immediate feedback: Kids see their code work (or not work) instantly
• Creative expression: They’re building something uniquely theirs
• Practical application: Every game mechanic teaches a real programming concept
• Problem-solving: Debugging games teaches systematic thinking
• Portfolio building: Completed games can be shared with friends and family

Students who learn to code through game development often progress faster because they’re motivated by seeing their ideas come to life.

What Skills Transfer to Real Programming?

Everything your child learned here applies to professional software development:

• Objects: Used in every modern programming language
• Game loops: The foundation of animation, simulations, and real-time applications
• Collision detection: Used in robotics, physics simulations, and mobile apps
• Event handling: How all interactive software works (websites, apps, games)
• Arrays and loops: Core to data processing and algorithms

Next Steps in Your Coding Journey

After mastering Code.org game development, your child is ready for:

Next Level Platforms:

• Scratch: More visual game development with sprites and sound
• Python + Pygame: Text-based game programming
• Unity: Professional game engine used by indie developers
• Roblox Studio: Create 3D games others can play

At ItsMyBot, We Take Young Coders Further

While Code.org provides an excellent foundation, our live 1:1 classes help kids:

• Build more complex games with professional guidance
• Learn Python, JavaScript, and other languages
• Create mobile apps and AI projects
• Participate in coding competitions
• Develop a portfolio for college applications

Our expert instructors (selected from the top 3% of applicants) provide personalized attention, adapting lessons to your child’s pace and interests. Whether they’re 5 or 16, we have learning paths that challenge and inspire them.

See what our students are building: Student Projects

Frequently Asked Questions

Q: What age should my child start learning game development?

A: Kids as young as 6 can start with visual programming in Code.org. By age 8-10, most children can follow this tutorial with minimal help. The key is matching the complexity to their current skill level.

Q: How long does it take to become good at game development?

A: With consistent practice (2-3 hours per week), most kids can build their own original games within 2-3 months. Mastery takes years, but the journey is fun from day one.

Q: Do I need to know coding to help my child?

A: Not at all! This tutorial is designed for kids to follow independently. However, learning alongside your child can be a great bonding experience.

Q: What’s better – Code.org, Scratch, or Python?

A: They’re all excellent for different stages:

• Code.org: Best for first exposure to text-based coding
• Scratch: Best for younger kids (6-10) who want maximum creativity
• Python: Best for kids 10+ ready for professional programming languages

Q: Can my child really make games like the ones on their phone?

A: Yes, but it’s a journey. Mobile games are built by teams over months or years. Your child will start with simple games and progressively build more complex projects. Many successful game developers started exactly where your child is now.

Q: Will this help with school?

A: Absolutely. Coding teaches logical thinking, problem-solving, and math in practical contexts. Many parents report improved performance in math and science after their kids start coding.

Start Building Today

The best way to learn game development is to start creating. Open Code.org, follow this tutorial, and watch your child’s confidence grow as they build something amazing.

Every professional game developer started with a simple project just like this one. Who knows? Your child might be creating the next viral game.

Ready to take your child’s coding skills to the next level? Book a free trial class with ItsMyBot and see how personalized instruction accelerates learning.

About ItsMyBot: We provide live 1:1 coding, robotics, and AI classes for kids ages 5-16. Our curriculum, created by experts from top tech companies, has powered over 500,000 hours of learning. With a 4.9/5 rating on Trustpilot, we’re trusted by parents worldwide to nurture the next generation of tech innovators.

Want your child to go further? Explore ItsMyBot’s Little Coder — structured coding courses designed for kids!