Compare & Contrast:
This page is identical to
Maze 1 (v1)
except for
one extra color during the Solve phase.
Open both side-by-side to see whether the orange junction highlight
changes how easily you follow the backtracking.
What's New: The Resume Junction (orange)
In v1, backtracking looks like: a cell flashes red and turns gray (dead end),
and the active path shrinks. That accounts for the retreat, but it
doesn't highlight the landing spot — the cell the DFS is now standing
on, about to try a new direction.
In v2, that landing cell glows orange
immediately after each backtrack. It stays orange until one of two things happens:
-
DFS proceeds deeper (next step is SOLVE_TRY) →
the cell returns to green
(it is back to being a normal on-path cell going somewhere).
-
DFS retreats again (next step is SOLVE_BACKTRACK) →
the cell turns red and dims to gray
(even this junction was a dead end).
Where the orange comes from in the code
// After popping the dead-end cell from the stack…
// dead-end cell just marked 'dead', popped from stack BACK
// v2: mark the new stack top as the RESUME JUNCTION RESUME
if (activePathStack.length > 0) {
const newTop = activePathStack[activePathStack.length - 1];
cellState[newTop.row][newTop.col] = 'resume';
}
// On the very next SOLVE_TRY, clear it back to green…
if (activePathStack.length > 0) { NEXT TRY
const top = activePathStack[activePathStack.length - 1];
if (cellState[top.row][top.col] === 'resume')
cellState[top.row][top.col] = 'trying';
}
Questions to think about
- Does the orange junction help you predict where the DFS will go next?
- When the solver backtracks multiple steps in a row, you see the orange
hop back along the path. How far back does it go before finding a new direction?
- Can you spot a corridor that is purely green all the way to T before
any red appears? (That means the DFS found the solution with no backtracking
in that stretch.)
- Does v1 or v2 make it easier to explain backtracking to someone who
has never seen it?
The Three Phases (same as v1)
- Build Maze — recursive DFS carves the maze.
Cyan frontier moves cell by cell; walls open as passages are carved.
- View Solution — BFS shortest path highlighted instantly in gold.
- Solve Maze — DFS solver explores. Green = on path,
orange = resume junction,
red flash = dead end, gold = solution.
- Reset — keeps the same maze and clears all solve colors
so you can run the solver again on the identical passages.
Toggle Randomize before pressing Reset to watch DFS choose a
completely different route and observe how the orange junction pattern changes.
For a brand-new maze, press Build Maze.
What the Colors Tell You (full list)
- Cyan frontier — current DFS head during generation.
- Gray carved — a passage has been opened here.
- Green trying — on the solver’s current path stack.
- Orange resume — (v2 only) where the DFS just landed after a backtrack; next step will go deeper (green) or retreat again (red).
- Red flash — solver just backtracked from this dead end.
- Gold — final solution path.
- S (green) — start, top-left.
- T (amber) — treasure, bottom-right.