A maze carves itself, then A* hunts for the way out.
First a randomized depth-first search tunnels through a grid of cells, backtracking whenever it gets stuck, which guarantees exactly one path between any two cells. Then A* search explores from the entrance, always expanding the cell with the lowest cost plus distance estimate. The frontier, the visited cells and the final path are all animated so you can watch both algorithms think.
Try it. Click to start a new maze. Click a cell while it solves to move the goal there.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an animated maze generator and solver with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window. Use a warm off-white paper background and dark ink for the walls.
- Make a grid of about 30 by 20 cells, storing each cell's open sides as a bitmask (N = 1, E = 2, S = 4, W = 8) in a typed array.
- Generate the maze with the recursive backtracker and an explicit stack: from the top cell, pick a random unvisited neighbor, knock down the wall between them, and push it; when there are none, pop.
- Animate it: run only a few generation steps per frame and draw visited cells, the cells on the stack in a light blue, and the current cell as a dot.
- Then solve from the top-left cell to the bottom-right with A* (Manhattan distance heuristic, a small binary heap as the priority queue), also a few steps per frame, coloring the open and closed sets differently.
- Walk the parent links back from the goal and draw the path as a thick red line.
Once that works, make it beautiful:
- Tint each closed cell by its distance from the start with a smooth pastel gradient, so the search spreads like a wave.
- Trace the final path gradually from start to goal.
- Loop forever: pause, fade out, and build a new maze. Click to start a new one, or click a cell during the search to move the goal there.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as comparing A* with breadth-first search side by side, other generators like Prim's or Wilson's algorithm, or letting me walk through the maze with the arrow keys.
