From Scratch: Build a Browser Game

🧭 Before You Dive In

This lesson has more code on the page than Lesson 1 did — and that can feel like a lot at once. You don't need to memorize any of it. Read a section once, then type the code yourself (or drag the matching blocks in Scratch) and watch it run. Getting something on screen is most of the learning; the rest comes from tinkering with it afterward.

If something breaks the first time, that's completely normal — it happens to professional developers every day. Reading the error message and fixing one small thing at a time is the skill, not a sign you're doing it wrong.

🧱 Anatomy of a Browser Game

A browser game is just three files working together:

<!-- index.html: the bare minimum -->
<canvas id="gameCanvas" width="480" height="320"></canvas>
<script src="game.js"></script>

🔁 The Game Loop

Think of a flipbook: each page looks a little different from the last, and flipping through them fast tricks your eye into seeing motion. Every game — from Pong to Cyberpunk 2077 — uses the exact same trick, just automated by the browser. That repeating cycle is called a game loop, and it fires about 60 times per second, doing two jobs each time:

function gameLoop() {
  update();  // move everything, check input, collisions
  render();  // draw the current frame to the canvas
  requestAnimationFrame(gameLoop); // call again next frame
}
requestAnimationFrame(gameLoop); // start the loop

requestAnimationFrame is the browser's built-in game loop. It syncs to your monitor's refresh rate (usually 60 fps) and pauses automatically when you switch tabs — saving battery and CPU.

🖌️ Drawing with Canvas

Picture a whiteboard that gets wiped clean and redrawn from scratch every single frame — that's the Canvas API. It hands JavaScript a blank surface and lets you control every pixel. The one rule that trips people up at first: clear it, then redraw everything, every single frame.

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

function render() {
  // 1. Clear the canvas each frame
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 2. Draw the player (a blue square)
  ctx.fillStyle = '#3b82f6';
  ctx.fillRect(player.x, player.y, player.w, player.h);

  // 3. Draw score text
  ctx.fillStyle = '#fff';
  ctx.font = '16px Inter, sans-serif';
  ctx.fillText('Score: ' + score, 8, 22);
}

⌨️ Keyboard Input

Think of each key like a light switch: pressing it flips the switch on, releasing it flips it back off. Instead of reacting to every single press and release, we just keep a little switchboard — a keys object — and check which switches are on during each update.

const keys = {};
const scrollKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Space'];

document.addEventListener('keydown', e => {
  keys[e.code] = true;
  if (scrollKeys.includes(e.code)) e.preventDefault(); // stop the page from scrolling
});
document.addEventListener('keyup',   e => keys[e.code] = false);

function update() {
  if (keys['ArrowLeft']  || keys['KeyA']) player.x -= 4;
  if (keys['ArrowRight'] || keys['KeyD']) player.x += 4;
  if (keys['ArrowUp']    || keys['KeyW']) player.y -= 4;
  if (keys['ArrowDown']  || keys['KeyS']) player.y += 4;
}

That's it — the same switchboard pattern runs every keyboard-controlled game you've ever played, from Mario's jump button to a rhythm game's tap keys.

💥 Collision Detection

Picture two picture frames hanging on a wall. They only overlap if they overlap left-to-right and top-to-bottom at the same time — lining up on just one direction isn't enough. That simple idea has a formal name — AABB, short for Axis-Aligned Bounding Box — and it's the collision check almost every simple 2D game relies on.

function collides(a, b) {
  return a.x < b.x + b.w &&  // a's left is left of b's right
         a.x + a.w > b.x &&  // a's right is right of b's left
         a.y < b.y + b.h &&  // a's top is above b's bottom
         a.y + a.h > b.y;    // a's bottom is below b's top
}

This exact check is how Pac-Man knows he touched a ghost, how Mario knows he's landed on a platform, and how the dodge game below knows you got hit.

🎮 Play It — Dodge Game

This complete dodge game was built using only the techniques above: Canvas, game loop, keyboard input, and AABB collision. Move with arrow keys or WASD. Avoid the red enemies. Score rises as you survive.

🛠️ Your Turn — Extend the Game

Now that you've seen the pattern, try one of these small, safe edits to code that already works. Pick whichever sounds most fun — you don't need to do all six, and it's completely fine to keep the code above open while you work.