2D Grid Representing the Maze and Start/Goal Positions
This tool maintains the maze as a two-dimensional array of rows and columns. Each cell has a row number r, a column number c, and a type representing a wall, passage, start, goal, exploring, visited, or solution path.
The sizes selectable on the screen are 15x15, 21x21, 31x31, and 41x41, all of which are odd numbers. While the generation function includes a process to add 1 if an even number is passed, only the four aforementioned types can be selected from the current operation screen.
The outer perimeter is treated as a wall. The start is at coordinates [1, 1], one cell inside from the top-left perimeter, and the goal is at coordinates [size-2, size-2], one cell inside from the bottom-right perimeter.
At the end of the generation process, dedicated types are set for these two cells, and the cells immediately to the left and top of the goal are forced into passages.
This post-processing is designed to make it easier to connect to the goal, but because it alters the topology immediately after generation, the generation method cannot be described as a "perfect maze" or guaranteed to have a "unique path."
The page initially starts with an empty board and then generates a 21x21 maze using JavaScript's Math.random. When "Generate a new maze" is pressed, or when the size or generation algorithm is changed, random numbers are used again.
There is no feature to specify a seed value or to restore the same board later.
Implementation Scope of Digging, Dropping, and Recursive Division Methods
The digging method starts with an array where all cells are walls, sets [1, 1] as a passage, and recursively digs with cells two steps away (up, down, left, right) as candidates.
If a candidate two steps away is inside the perimeter and is still a wall, the intermediate cell and the destination are made passages, and the same process continues.
The order of candidate directions is shuffled using random numbers. This indicates the specific digging method of this implementation and does not guarantee that the difficulty, number of dead ends, or playability are superior to other methods.
The dropping method first turns the inner area excluding the perimeter into passages, and places pillar walls at the intersections of even rows and even columns.
For the first row of pillars, one direction is randomly chosen from up, down, left, and right; for subsequent rows, one direction is randomly chosen from down, left, and right, and the cell adjacent to the pillar in that direction also becomes a wall.
Finally, the outer perimeter is returned to walls. This directional restriction is an implementation rule to avoid combinations where a wall extended upwards overlaps with an existing wall.
The tool does not calculate evaluations such as "standard difficulty" or "always well-balanced."
The recursive division method begins with an area where the outer perimeter is a wall and the inner area is a passage. If the height of the area is greater than its width, it divides horizontally; if the width is greater than the height, it divides vertically; if they are equal, the direction is determined randomly.
A wall is drawn in the chosen direction, leaving one opening in that wall, and the same process is applied to the two divided areas.
This process is distinct from the digging method or DFS for searching. For any method, no checks are performed to determine unique solutions or specific difficulty levels.
Manual Play, Movement Detection, Steps and Elapsed Time
After generation, it enters a play state where you can move one cell at a time up, down, left, or right using the directional buttons, keyboard arrow keys, or W, A, S, D.
The player coordinates are updated only when the destination is within the array bounds and is not a wall. Input directed at a wall is not counted as a movement; only actual advances into passages are added to the step count.
There is no diagonal movement or movement through walls.
During the play state, the elapsed time increases by one second using setInterval. Moving to the goal coordinates changes the state to solved and stops the timer.
The displayed value is in one-second increments and is not a high-precision timer for competitive measurement. The callback execution time may be delayed due to browser background tab control or device load.
Regenerating the maze returns the player to the start and resets the elapsed time and step count to 0.
There are four themes: Cyber Neon, Retro Game, Classic, and Minimal. Themes only switch the CSS representation and do not alter the walls, search order, or path length.
If an automatic search is started during manual play, the state shifts to searching, and manual movement is no longer accepted. The player marker does not move automatically during the search.
Search Order and Path Restoration of BFS, DFS, and A*
When an automatic search begins, previous marks for visited, solution path, and exploring are reverted to normal passages. The search starts from [1, 1], not from the manual player position, and evaluates adjacent cells in the order of right, down, left, and up.
Each candidate records the parent coordinate from which it was first reached. After finding the goal, the path is traced backward through the parent coordinates to the start, the array is reversed, and the solution path is drawn.
The step count on the screen is replaced with the number of cells in this path minus 1.
BFS operates as a queue, dequeuing from the front of the candidate array. Since the cost of a single move up, down, left, or right is all 1, and candidates are marked as visited when first added, this tool's unweighted grid reliably finds the shortest number of steps to the reachable goal.
On the other hand, DFS operates as a stack, popping from the end of the candidate array, exploring deeply in one direction. Even if a path to the goal is reached, there is no guarantee that the path is the shortest.
A* calculates f by adding the number of moves g from the start to the current position and the Manhattan distance h from the current position to the goal, dequeuing candidates with smaller f.
However, this implementation marks a candidate as visited when added to the queue, and does not update costs or re-enqueue candidates if a smaller g is found later.
Therefore, the shortest path guarantee of a general A* algorithm does not apply to this implementation, and it is appropriate to treat it as a visualization of priority search using Manhattan distance.
Meaning of Search Animation and Speed Settings
During a search, the currently examined cell is displayed as scanning, and sequentially as visited once examined. When the goal is found, the internal cells of the path restored from the parent coordinates are changed to solution.
The search speed is in the range of 5 to 200 milliseconds and is used as the wait time setting for each searched cell. A smaller value shortens the screen update interval.
The wait time for drawing the path is based on half the search speed, with a minimum of 10 milliseconds.
This setting does not change the computational complexity of the algorithm itself. The browser timer serves as a minimum delay, and the actual interval may be longer due to drawing load and device performance.
We recommend applying speed changes before starting the next search. Clicking "Stop search" stops further steps, but queued timers may run and visual states from the search may remain on the board.
Generating a new maze cancels any pending timers, and the display will reset to passages upon starting the next automatic search.
Immediate and complete cancellation upon stopping is not guaranteed.
The search animation illustrates the order in which this implementation dequeued candidates and the path restored from their parent information.
It does not display the exact comparison of priority values of all candidates, the contents of queues or stacks, or computation time.
It is also not a benchmark to measure the superiority or inferiority of each generation method or the difficulty of the maze.
Contents and Usage Restrictions of TXT and SVG Output
When saving as TXT, walls are written as full-width ██, the start as Ｓ, the goal as Ｇ, and everything else as two blank spaces line by line.
Therefore, not only normal passages but also visited, exploring, and solution paths become blank. The display may be misaligned due to differences in character width depending on the font, so please open it with a monospace font or check the contents after saving.
The filename includes the selected maze size.
When saving as SVG, each cell is made a 10px fixed-color rect element, and the entire board is exported as a set of rectangles.
Different fill colors are used for walls, start, and goal, while other cells share the same passage color. It does not include the selected theme, player position, solution path, step count, or elapsed time.
SVG directly generates rectangle elements of the board, but this tool's save function does not include margin adjustments for printing paper, PDF generation, or PNG generation.
Maze generation, searching, and file assembly are performed by JavaScript on the page after execution, and there is no function to save the edited board to a server.
However, this implementation fact alone does not guarantee absolute zero communication across the entire page, complete offline operation, or data protection.
The board is not saved persistently and returns to the initial state when the page is reloaded. When using it for educational materials or printed matter, please verify the reachability of the path, the suitability of the difficulty, and the saved results yourself.