Play Maze Runner

A colorful maze game built with plain JavaScript and canvas. Every maze is generated fresh; navigate to the exit, grab the data nodes, and beat your best time.

This is a real, playable game, not a screenshot. Find a route from the start to the exit while collecting nodes, against the clock. It is built with no library, just a maze generator, cell to cell movement, and a render loop, which makes it a clean example of grids and graphs in action. After you play, the sections below show how it works.

How to play

You start in the top left corner and your goal is the glowing green exit in the bottom right. Swipe on the maze, tap the on-screen arrows, or use WASD or the arrow keys to step from cell to cell, but you cannot pass through walls. Scattered through the maze are amber data nodes worth grabbing on your way. A timer runs from the moment you start, so the real challenge is finding a clean route and beating your best time. Every game builds a brand new maze, so no two runs are the same.

How this game is built

A maze game is a surprisingly deep little package: a generator, a movement system, and a clock.

Generating the maze

The maze is carved by a depth first search that wanders to random unvisited cells and knocks down the wall between them, backtracking when it gets stuck. That guarantees a perfect maze where every cell is reachable, so the exit is always solvable.

Moving without passing walls

Each move checks whether a wall blocks the way before sliding you to the next cell with a short tween, the kind of frame by frame motion the game loop handles, driven by your input.

Nodes, the timer, and the finish

Picking up a node, counting your time, and detecting the exit are all plain values the screen reflects, the core of game state management.

Drawing the grid

The walls, the player, the nodes, and the exit are all drawn on the canvas each frame from the maze data, so what you see always matches the real layout.

Why a maze is really a graph

Under the walls, a maze is a graph: each cell is a node and each open passage is an edge. Generating it and solving it are classic graph problems, the same depth first and breadth first searches that power routing, dependency resolution, and pathfinding in real software. Building one by hand is a friendly way into the data structures behind client side architecture and far beyond. Once you see the graph, the maze stops being a puzzle and becomes a map.

Frequently asked questions

How do I play Maze Runner?

Get from the start to the green exit. Swipe on the maze, tap the arrows, or use WASD or the arrow keys to move one cell at a time, and grab the amber data nodes on the way. A new maze is built every game.

Is the maze always solvable?

Yes. The generator uses a depth first carve that visits every cell, which produces a perfect maze with exactly one path between any two points, so the exit can always be reached.

What are the data nodes for?

They are optional pickups that add to your node count for the run. Collecting all of them while still finding a fast route is the real test of a good path.

How does this relate to real programming?

A maze is a graph, and generating or solving it is graph traversal, the same depth first and breadth first searches used for routing, pathfinding, and dependency resolution in real systems.