Try this
GAME CREATION / YOUR IDEAS BECOME PLAYABLE
Don’t just play.
Make the rules.
Build a small game from its first movement to its final playtest. Change the rules, design a level, and discover what makes a challenge worth playing.
30 lessons · 8 build stages · Level editor · Export your game
YOUR PROJECT: CRYSTAL COURIER
Collect every crystal.
Avoid the patrols.
Find your way out.
Then change the design—and play again.
A complete beginner project, with room to grow. The builder changes a real local game. It needs no account or external assets. Code is explained in the walkthrough and included in the standalone HTML export. The lessons cover 2D browser-game foundations, not every engine or genre.
0 / 30 lesson checks passed
FROM A SCENE TO A COMPLETE GAME
Build one layer at a time.
Each stage adds a working system to the same prototype. Read the code excerpt, launch that stage, and try its experiment. This is a guided feature walkthrough; the checkboxes record your own practice.
TUNE ONE VARIABLE. TEST ONE IDEA.
Your playable prototype
Blue circle = player. Gold diamond = crystal. Red triangle = hazard. E = exit. Focus the canvas for arrows/WASD. Escape pauses; leaving the page or tab pauses automatically. Direction controls support touch or held Enter/Space. Tap-to-move follows a straight direction; it does not find a path around walls.
Designer controls
A settings change resets the current run. Speed uses logical pixels per simulated second. Long frame gaps are capped rather than caught up; playtest time is simulated time, not a wall-clock benchmark.
Export always includes the complete game with your current level and valid settings, regardless of walkthrough stage.
Inspect the complete game source
DESIGN THE SPACE. SHAPE THE DECISIONS.
Paint your own challenge
Choose a tile, then click or keyboard-activate a square. A start and exit are unique: placing a new one moves the old one. Static route checks do not prove that a timed or hazardous level is fair.
See the level data
WHEN DOES A HIT HAPPEN?
See a collision rule
Move the second circle. Two circles overlap when their center distance is less than the sum of their radii. This matches the prototype’s player/hazard rule; walls use a different box-versus-tile check.
const distance = Math.hypot(x2 - x1, y2 - y1); const hit = distance < radius1 + radius2; // Exactly touching is not a hit under this rule.
Designer experiment
OBSERVE. CHANGE. TEST AGAIN.
Your playtest notebook
Recent completed full-game runs
Up to 20 runs stored locally. Walkthrough stages and abandoned runs are excluded. Each recorded run keeps its level and settings; small samples do not prove balance.
Save and continue
Keep building
Learn Canvas · Practice beginner JavaScript · MDN game-loop guide · Collision techniques