Tutorial: Maze Game

🗺️ The Architecture

Every tiny-loop game starts as a concept, then gets broken into a core loop, a systems list, and a structure — before anyone touches sprites or colors. Here's the Maze Game's architecture:

The four systems, in order of execution on every key press:

1. Input system — reads the arrow key pressed and computes the one target tile in that direction.
2. Wall collision system — checks whether the target tile is a wall; if it is, the move is cancelled and the player stays put.
3. Step counter system — only counts a step when a move actually succeeds (feedback for the player).
4. Goal detection system — checks the player's tile against the goal tile every move; matching tiles ends the game.

🎮 Play & Customize

Move one tile at a time with Arrow keys, W A S D, or the touch D-pad below the game. Walls block you completely — find the path to the goal.

💡 Click inside the game first — that gives it keyboard focus so the arrow keys move the player instead of scrolling the page.

👀 Peek at the Code

The game running above is this code — nothing hidden. It's split into two parts on purpose: a small config object you just edited with the panel, and a locked engine that reads it.

const config = {
  player: '🤖',
  goal:   '🔑',
  wall:   'lab',
  layout: 'zigzag',
  moveSpeed: 2
};

👆 This block updates live — hit "Apply & Restart" above and watch the exact values change here. There's no separate "demo" version of the code; this is it.

function tryMove(dx, dy) {
  const tx = player.col + dx, ty = player.row + dy;

  // 1. wall collision: cancel the move if the target tile is a wall
  if (maze[ty][tx] === '#') return;

  // 2. move succeeds: update position
  player.col = tx; player.row = ty;

  // 3. only count steps that actually happen
  steps++;
  updateHUD();

  // 4. check the goal every successful move
  if (tx === goal.col && ty === goal.row) endGame();
}

🛠️ Now Build It For Real

You've played a working Maze Game and seen exactly how it's built. Next, build this same architecture yourself — twice, in two different tools.