JAVASCRIPT · BUILD SOMETHING WORTH PLAYING

Your first game.
Your next big idea.
Make it playable.

Move it. Jump it. Make the rules. Learn to create JavaScript games through 50 hands-on builds—with code you can edit, worlds you can play and checks that explain what works.

Start making games ↗

50hands-on lessons10learning chapters5playable projects

my-first-game.js

game loop↙ ↘

update(dt)draw(ctx)

readInput();
updateWorld(deltaTime);
drawTheNextFrame();

Small experiments. Playable ideas.

YOU write it.
The player feels it. ↗

ONE CONCEPT. ONE USEFUL BUILD.

From moving squares to complete games

Loading your journey…

The supplied canvas engine handles rendering and input; you write and extend the rules. Each lesson starts with a focused, independent experiment. Read the engine source to see how the pieces connect.

Start with basic HTML and JavaScript variables/functions. New to either? Practice HTML or JavaScript fundamentals first. Go in order or jump to the concept you need.

YOUR INTERACTIVE WORKSPACE

Saved on this device

Loading your first experiment…

Your mission

Need a nudge? Open a hint

See the game scaffold HTML

Your game rules · JavaScriptCtrl / ⌘ + Enter to run

See game preview ↓

Runs in an isolated preview with network access blocked by its content policy. Use learning code only; an infinite loop may still freeze a browser tab. Stop replaces the preview when the browser remains responsive. Checks cover the stated tasks, not all possible behavior.

Run your code, explore the page, then check your work.

EXPLAIN WHAT HAPPENED

Take it further

My explanation / what I discovered

LIVE BROWSER

Play your experiment

Width

↑ Back to my code

After Run, press Play inside the preview. Use arrows/WASD, Space, F or the touch controls. Step advances one frame. Check my work uses a fresh game and tests rules directly.

Game state explorer

Inspect position, velocity, score and objects. Click Refresh state while playing or after stepping to capture a new snapshot.

Run a lesson to inspect its game state.

Console & runtime messages

No messages yet.

BUILD → PLAY → EXPLAIN → IMPROVE

Make a game. Understand every rule.

Progress means your current code passed the authored checks and you answered the concept question. Worked-example passes are labeled separately. Use the stretch tasks to make the result your own.

No account or AI service. Drafts and notes stay in this browser; storage can be cleared, so keep a backup. Your exported HTML runs your code outside the studio—review it before sharing.

Canvas reference on MDN ↗ · Game development on MDN ↗