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.
By the end of this tutorial, your child will be able to:
Estimated Time: 45-60 minutes
Best For: Ages 8+ (younger kids can follow with parent guidance)
Platform: Code.org App Lab (free account required)
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.
First, let’s create the game screen where all the action happens.
What you’ll do:
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!
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.
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:
player.x > 0 checks)Try this: Change player.speed from 5 to 10. What happens? This teaches kids how variables control behavior.
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:
Screenshot moment: This is where the game starts feeling real – obstacles falling from the top!
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.
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:
What your child learns: Game design principles – giving players feedback (score) and multiple chances (lives) makes games more engaging.
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.
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:
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.
You can see a live demo and remix the complete game here: [Link to your Code.org shared project]
The full game includes:
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.
By building this game, your child practiced:
Programming Concepts:
Math Skills:
Problem-Solving Skills:
Computational Thinking:
Once your child has the basic game working, here are ways to expand it:
Easy Additions:
playSound()Medium Challenges:
Advanced Projects:
Game development isn’t just fun – it’s one of the most effective ways to learn programming because:
Students who learn to code through game development often progress faster because they’re motivated by seeing their ideas come to life.
Everything your child learned here applies to professional software development:
After mastering Code.org game development, your child is ready for:
Next Level Platforms:
At ItsMyBot, We Take Young Coders Further
While Code.org provides an excellent foundation, our live 1:1 classes help kids:
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
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:
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.
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.
