A maze of ideas.
A world of choices.
Build the adventure.
Draw a world. Hide a key. Open a new possibility. Create a turn-based maze adventure through 50 coding lessons, a visual level editor and puzzles you can play and share.
unlockTheNextPossibility();
drawYourWorld();
The player feels it. ↗
From canvas pixels to puzzle worlds
Loading your journey…
The supplied grid engine handles rendering and input; you write focused rules, then combine its mechanics into your own levels. Each lesson is an 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.
Loading your first experiment…
Need a nudge? Open a hint
See the game scaffold HTML
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.
Take it further
Play your experiment
After Run, click the maze and use arrows/WASD, or the on-screen direction buttons. Each move advances one turn. Undo restores a turn. Check my work uses a fresh game and tests the lesson rule.
Game state explorer
Inspect position, inventory, patrols and map tiles. Click Refresh state after moving to capture a new snapshot.
Run a lesson to inspect its game state.
Console & runtime messages
No messages yet.
Your visual maze studio
Choose a tile, then paint a cell. Use arrow keys within the grid and Enter or Space to paint. Start and exit are unique. Playing creates a fresh copy, so your design stays intact.
What the level check can and cannot tell you
Checks validate dimensions, allowed symbols, one start and one exit, and whether a route exists if doors and gates are treated as open. That last check ignores inventory, switches, hazards and patrol timing. It does not prove the full puzzle is solvable or fair. Always play it from start to finish.
A key opens one door. A switch toggles all gates. Patrols move horizontally once per successful move. Spikes cost one heart per entry. The exit ends the run. A guard collision costs one heart per turn.
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 ↗