Zero to playable · no installs · no build tools

Learn to code a game with nothing but a text file and a browser.

Ten short lessons take you from your very first <h1> to a finished arcade game you can play, share and keep improving. Nearly every lesson has a live editor — change the code, hit Run, see it happen instantly.

Start lesson 1 Play the finished game

10 lessons
10 live editors
1 real game

<canvas id="game"></canvas>
<script>
const ctx = game.getContext('2d');
let x = 0;
function loop() {
  ctx.clearRect(0,0,300,150);
  ctx.fillRect(x++, 60, 30, 30);
  requestAnimationFrame(loop);
}
loop();
</script>

Start here: the only setup you need

Make a file

Open any text editor — Notepad, TextEdit (set it to plain text), or VS Code if you want colours. Save an empty file as game.html. The .html ending is what matters.

Paste the skeleton

Every page starts the same way. Type the block in lesson 1 once by hand — muscle memory beats copy-paste for the first one.

Double-click it

Your browser opens the file. That's it — you are running your own program. Edit, save, press F5 to reload. That loop is the whole job.

Open the console

Press F12 (or Cmd+Option+I) and click Console. Red text there tells you exactly which line broke. Check it every single time something doesn't work.

Everything on this page runs in the little editors below too, so you can learn first and set up your editor later.

The lessons

Work top to bottom. Each one adds a piece of the game you'll play at the bottom of this page.

The page skeleton

HTML is a set of tags that wrap content: <tag>content</tag>. A tag plus its content is an element. Elements nest inside each other like boxes. Here is the shape of every page you will ever write:

<!DOCTYPE html> — tells the browser "modern HTML".
<head> — invisible setup: title, styles, metadata.
<body> — everything people actually see.
<script> — your JavaScript, the part that makes things move.

Try it: change the <h1> text, add a second <p>, then press Run.

The tags worth memorising

There are about a hundred HTML tags. You need roughly twelve. These are them:

Tag	What it's for
`<h1>`–`<h6>`	Headings, biggest to smallest. One `h1` per page.
`<p>`	A paragraph of text.
`<div>`	A generic box. Your main layout tool.
`<span>`	A generic bit of inline text, e.g. a score number.
`<button>`	Something clickable. Use this, not a clickable div.
`<img src="…" alt="…">`	A picture. `alt` describes it for screen readers.
`<canvas>`	A blank rectangle you draw pixels on. The game lives here.
`<audio>`	Sound effects and music.
`<a href="…">`	A link.
`<ul>` / `<li>`	A list — great for high-score tables.
`<input>`	A text box, slider, checkbox…
`<style>` / `<script>`	CSS and JavaScript, inline in the page.

Tags carry attributes — extra settings inside the opening tag. The two you'll use constantly are id (a unique name so JavaScript can find the element) and class (a label so CSS can style many elements at once).

CSS: making it not look like 1996

CSS styles your HTML. A rule is a selector plus declarations:

h1        { color: tomato; }      /* every h1        */
.card     { padding: 16px; }      /* class="card"    */
#score    { font-weight: 700; }   /* id="score"      */

For games you mostly need: background, color, padding, margin, border, border-radius, display:flex for laying things in a row, and position for sticking a score on top of the canvas.

JavaScript in five minutes

HTML is the nouns, CSS is the adjectives, JavaScript is the verbs. You need these six ideas and almost nothing else:

Idea	Looks like	Means
Variable	`let x = 10;`	A named box holding a value. `const` if it never changes.
Function	`function jump() { … }`	A named chunk of steps you can run later.
Condition	`if (y > 300) { … }`	Do this only when that is true.
Loop	`for (let i = 0; i < 5; i++)`	Repeat something a set number of times.
Array	`let enemies = [];`	A numbered list. `enemies.push(e)` adds, `enemies[0]` reads.
Object	`{ x: 10, y: 20, hp: 3 }`	A labelled bundle. Every game entity is one of these.

Try it: add a fourth enemy to the array and run it again. Nothing else needs to change — that's why we use arrays.

Canvas: your drawing surface

A <canvas> is an empty rectangle. You get a context from it and issue drawing commands. Coordinates start at 0,0 in the top-left, and y grows downwards — the single most common beginner surprise.

ctx.fillStyle = '#f00' — set the colour for the next shape.
ctx.fillRect(x, y, w, h) — filled rectangle. 90% of your drawing.
ctx.clearRect(0, 0, W, H) — wipe the whole canvas.
ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI*2); ctx.fill() — a circle.
ctx.fillText('Score', x, y) — text, after setting ctx.font.
ctx.drawImage(img, x, y) — a sprite.

Try it: move the hero by changing 40, 120. Make the sun bigger by changing the radius 24.

The game loop

A game is one function run ~60 times a second. Each pass is a frame, and each frame does three things in order:

Update — move everything, apply gravity, check collisions.
Draw — clear the canvas, redraw everything in its new position.
Repeat — ask the browser for the next frame.

requestAnimationFrame(loop) is how you ask. Never use setInterval for this; requestAnimationFrame syncs to the screen and pauses in background tabs.

Multiply movement by delta time (seconds since the last frame) so the game runs at the same speed on a 60 Hz laptop and a 144 Hz monitor.

Input: keyboard, mouse, touch

The trick nobody tells beginners: don't move the player inside the key event. Key events fire irregularly. Instead record which keys are currently held in an object, and read that object in the loop.

<canvas id="c" width="320" height="200" tabindex="0"></canvas>
<p style="font:13px system-ui">Click the canvas, then use arrow keys / WASD.</p>
<script>
  const ctx = c.getContext('2d');
  const keys = {};                                  // the held-keys map
  addEventListener('keydown', e => keys[e.key] = true);
  addEventListener('keyup',   e => keys[e.key] = false);

const p = { x: 150, y: 90, size: 24, speed: 180 };

function loop(now) {
    const dt = 1 / 60;
    if (keys.ArrowLeft  || keys.a) p.x -= p.speed * dt;
    if (keys.ArrowRight || keys.d) p.x += p.speed * dt;
    if (keys.ArrowUp    || keys.w) p.y -= p.speed * dt;
    if (keys.ArrowDown  || keys.s) p.y += p.speed * dt;

// keep the player on screen
    p.x = Math.max(0, Math.min(320 - p.size, p.x));
    p.y = Math.max(0, Math.min(200 - p.size, p.y));

ctx.fillStyle = '#0b1020';
    ctx.fillRect(0, 0, 320, 200);
    ctx.fillStyle = '#ffd166';
    ctx.fillRect(p.x, p.y, p.size, p.size);
    requestAnimationFrame(loop);
  }
  requestAnimationFrame(loop);

// mouse / touch: jump the player to where you click
  c.addEventListener('pointerdown', e => {
    const r = c.getBoundingClientRect();
    p.x = (e.clientX - r.left) * (c.width / r.width) - p.size / 2;
    p.y = (e.clientY - r.top) * (c.height / r.height) - p.size / 2;
  });
</script>

Add e.preventDefault() in keydown for arrows and space, or the page will scroll while you play.

Collisions, gravity and jumping

Two rectangles overlap when they overlap on both axes. This four-line check ("AABB") covers almost every 2D game:

function hits(a, b) {
  return a.x < b.x + b.w && a.x + a.w > b.x &&
         a.y < b.y + b.h && a.y + a.h > b.y;
}

Gravity is just a constant added to vertical speed every frame. Jumping is setting that speed to a negative number once, while standing on the ground.

<canvas id="c" width="320" height="200"></canvas>
<p style="font:13px system-ui">Press Space (or tap) to jump onto the coin.</p>
<script>
  const ctx = c.getContext('2d');
  const GROUND = 170, GRAVITY = 1600, JUMP = -560;
  const p = { x: 40, y: GROUND - 30, w: 26, h: 30, vy: 0, onGround: true };
  const coin = { x: 180, y: 90, w: 18, h: 18 };
  let score = 0, last = performance.now();

function jump() {
    if (p.onGround) { p.vy = JUMP; p.onGround = false; }
  }
  addEventListener('keydown', e => { if (e.code === 'Space') jump(); });
  c.addEventListener('pointerdown', jump);

function hits(a, b) {
    return a.x < b.x + b.w && a.x + a.w > b.x &&
           a.y < b.y + b.h && a.y + a.h > b.y;
  }

function loop(now) {
    const dt = Math.min((now - last) / 1000, 0.05); last = now;

p.vy += GRAVITY * dt;
    p.y  += p.vy * dt;
    if (p.y + p.h >= GROUND) {        // landed
      p.y = GROUND - p.h; p.vy = 0; p.onGround = true;
    }
    p.x += 60 * dt;
    if (p.x > 320) p.x = -p.w;

if (hits(p, coin)) { score++; coin.x = 120 + Math.random() * 160; }

ctx.fillStyle = '#0b1020'; ctx.fillRect(0, 0, 320, 200);
    ctx.fillStyle = '#2a3350'; ctx.fillRect(0, GROUND, 320, 30);
    ctx.fillStyle = '#ffd166'; ctx.fillRect(coin.x, coin.y, coin.w, coin.h);
    ctx.fillStyle = '#ef476f'; ctx.fillRect(p.x, p.y, p.w, p.h);
    ctx.fillStyle = '#fff'; ctx.font = 'bold 14px system-ui';
    ctx.fillText('Coins: ' + score, 10, 22);

requestAnimationFrame(loop);
  }
  requestAnimationFrame(loop);
</script>

Sprites, sound and game states

Sprites. Load an image once, draw it every frame. Wait for onload before drawing, or you get nothing.

const hero = new Image();
hero.src = 'hero.png';
// in draw():  ctx.drawImage(hero, p.x, p.y, p.w, p.h);

For an animation strip, draw one slice of the sheet: ctx.drawImage(sheet, frame*32, 0, 32, 32, p.x, p.y, 32, 32) and advance frame every few hundredths of a second.

Sound. Browsers block audio until the player interacts, so start sound on the first click or keypress.

const coinSfx = new Audio('coin.wav');
function play(a) { a.currentTime = 0; a.play().catch(() => {}); }

States. A game is never only "playing". Keep one variable and branch on it — this is what stops your code turning into spaghetti.

<canvas id="c" width="320" height="200"></canvas>
<p style="font:13px system-ui">Click the canvas to change state.</p>
<script>
  const ctx = c.getContext('2d');
  let state = 'menu';                 // 'menu' | 'playing' | 'gameover'

c.addEventListener('pointerdown', () => {
    if (state === 'menu') state = 'playing';
    else if (state === 'playing') state = 'gameover';
    else state = 'menu';
    draw();
  });

function centre(text, y, size, colour) {
    ctx.fillStyle = colour;
    ctx.font = 'bold ' + size + 'px system-ui';
    ctx.textAlign = 'center';
    ctx.fillText(text, 160, y);
  }

Saving progress & tidy structure

localStorage keeps small values on the player's machine, forever, with no server. Values are always strings, so wrap numbers with Number() and objects with JSON.stringify / JSON.parse.

Once a file passes ~300 lines, split it: index.html for structure, style.css for looks, game.js for logic. Link them with <link rel="stylesheet" href="style.css"> and <script src="game.js"></script> placed just before </body>.

A structure that scales to a real game:

const game = {
  state: 'menu',
  player: { … },
  enemies: [],
  score: 0,
};

function update(dt) { /* move + collide, branch on game.state */ }
function draw()      { /* clear + render, branch on game.state */ }
function reset()     { /* put game back to a fresh run        */ }
function loop(now)   { update(dt); draw(); requestAnimationFrame(loop); }

The finished game

Everything from the ten lessons, assembled. Arrow keys or A/D to move, Space to jump, or tap the two buttons on a phone. Collect coins, dodge the red blocks, beat your high score.

Making changes & updating your game

Shipping version 1 is the easy half. Here's the workflow that keeps version 12 from collapsing.

Change one thing, reload, look

Edit a single value, save, press F5. If it broke, you know exactly what did it. Changing five things at once and then debugging is how evenings disappear.

Put the knobs at the top

Keep tunable numbers together as named constants — GRAVITY, JUMP, SPAWN_RATE, PLAYER_SPEED. Balancing then means editing a tidy list, not hunting through logic.

Data, not code

Describe levels and enemy types as arrays of objects. Adding content becomes adding a line of data: { type:'bat', hp:2, speed:120 }.

Keep a working copy

Before a risky change, duplicate the file as game-v3.html. Better: learn git init, git add ., git commit -m "added bats" — then every version is recoverable.

Hard-refresh after deploying

Browsers cache aggressively. If an update "didn't apply", press Ctrl/Cmd+Shift+R before you start debugging code that's already correct.

Debug with the console

console.log('player', p.x, p.y) inside the loop prints every frame. Red errors name the file and line. debugger; freezes execution so you can inspect everything.

The five bugs that get everyone

Symptom	Cause	Fix
Blank canvas	Script ran before the canvas existed	Put `<script>` just before `</body>`, or use `defer`
Everything smears into trails	You never cleared the canvas	`ctx.clearRect(0,0,W,H)` at the top of `draw()`
Player teleports / sprints	`requestAnimationFrame` called twice, so two loops run	Start the loop exactly once
Speed differs per computer	Movement not multiplied by delta time	`x += speed * dt`
Blurry or stretched canvas	Sized with CSS instead of attributes	Set `width`/`height` attributes; use CSS only to scale

Cheat sheet

Page skeleton

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width,
                 initial-scale=1">
  <title>My Game</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <canvas id="game" width="640"
          height="360"></canvas>
  <script src="game.js"></script>
</body>
</html>

Canvas commands

const ctx = canvas.getContext('2d');
ctx.fillStyle   = '#3ddc97';
ctx.strokeStyle = '#fff';
ctx.lineWidth   = 2;
ctx.fillRect(x, y, w, h);
ctx.strokeRect(x, y, w, h);
ctx.clearRect(0, 0, W, H);
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI * 2);
ctx.fill();
ctx.font = 'bold 20px system-ui';
ctx.textAlign = 'center';
ctx.fillText('Score', x, y);
ctx.drawImage(img, x, y, w, h);
ctx.save(); ctx.translate(x, y);
ctx.rotate(angle); ctx.restore();

Maths you'll reuse

Math.random()            // 0–1
Math.floor(Math.random()*n)
Math.max(lo, Math.min(hi, v)) // clamp
Math.hypot(bx-ax, by-ay)      // distance
Math.sin(t), Math.cos(t)      // waves
Math.PI * 2                   // full turn
Math.round(v), Math.abs(v)

Events

addEventListener('keydown', fn);
addEventListener('keyup', fn);
el.addEventListener('click', fn);
el.addEventListener('pointerdown', fn);
addEventListener('resize', fn);
// e.key  'ArrowLeft' 'a' ' '
// e.code 'Space' 'KeyA' 'ArrowUp'

Finding & changing elements

const el = document.getElementById('hud');
const b  = document.querySelector('.btn');
el.textContent = 'Score: ' + score;
el.classList.add('hidden');
el.classList.toggle('paused');
el.style.display = 'none';

Where to go next

MDN Game Development — the reference that's actually correct.
MDN Canvas tutorial — every drawing command explained.
Phaser — a game framework, once plain canvas feels limiting.
itch.io game jams — a deadline finishes games.

Your next three evenings

Copy the lesson 8 editor into a real game.html file and get it running from your own desktop.
Add one feature of your own: a second coin type, a double jump, a timer, a pause key.
Give it a title screen and a high score, then send the file to one person. Watching someone else play teaches you more than another tutorial.