Maze Runner Game: Fog of War, Guards and 3-Star Levels

A maze game is a small playground for some of the most useful algorithms in programming: generating a random maze, finding the shortest path through it, and steering simple enemies around it. This snippet turns those into a complete game on one HTML5 <canvas> with no libraries and no image files. You guide a glowing runner to a portal in the far corner of an ever bigger maze, collect gems hidden in dead ends, dodge patrolling guards, and earn up to three stars per level for taking a short route. It plays with the arrow keys or WASD (hold to run), by swiping on the maze, or with an on-screen D-pad.

Generated mazes that are always solvable

Each level builds a new maze with a depth-first search (a "recursive backtracker"): start in one corner, repeatedly step to a random unvisited neighbour while knocking out the wall between them, and backtrack when stuck. This produces a "perfect" maze, where exactly one path joins any two cells. Because that makes for long, winding dead ends, the generator then knocks out a few extra walls (more of them on later levels), so there is usually more than one route and choosing the best one matters. Walls are stored as four bit flags on each cell, and the maze is painted once into an off-screen canvas, with a neon glow, so each frame only draws the moving parts.

Breadth-first search for hints and stars

A breadth-first search from the runner to the portal returns the shortest route. The game uses it three times: at the start of a level to count the minimum number of moves, for the Hint button (which draws that route as a glowing dashed line for a few seconds, for a small score cost), and in the star rating. Finish within 25% of the minimum number of moves for three stars, within 70% for two, and any finish earns one.

Fog of war and guards

From level 3 the maze is dark: you only see a circle of cells around you, shrinking slightly each level, and cells you have already seen stay dimly visible so you can remember where you have been. The fog is drawn per cell with a soft edge, and gems, guards and the portal are only drawn when they are inside the light. From level 4 guards patrol the corridors one cell at a time. They never turn around unless they hit a dead end, and sometimes they head toward you when you are within seven cells. Touching one costs a life and sends you back to the start with a moment of invulnerability. You have three lives, and running out ends the run.

Controls and feel

Movement is cell by cell, but the drawn runner glides between cells, leaves a fading trail and bumps the screen slightly when you hit a wall. Holding a key or a D-pad button repeats the move about ten times a second, and dragging a finger across the maze moves one cell for each stretch of swipe. Gems pop in a burst of sparkles, the portal has spinning rings, each pair of levels has its own colour theme, and sound effects are made with the Web Audio API, with a mute button. The game pauses on P, the button or a tab switch, and your furthest level, stars and best score are saved in localStorage.