Maze generator & solver · deepseek-v4.1-flash

Let me build this. I'll write index.html with a maze generator/solver.

Let me plan the design carefully.

Grid 25 wide x 15 tall. Cells. Walls as bitmask N,E,S,W. Recursive backtracking with animation.

Canvas rendering. Animation via requestAnimationFrame or setTimeout steps.

Let me write it all.

Requirements:
- New Maze cancels previous animation and generates fresh maze.
- Replay Solver uses existing maze.
- Legend.
- Distinguishable styles for start, finish, exploration, solution.

I'll use generation ID / cancellation token to safely cancel.

Let me write the code.

Maze dims: COLS=25, ROWS=15. Cell size ~ 30px -> canvas 750x450 plus margins.

Use canvas internal size responsive maybe. Let's use fixed cell size computed to fit.

Generation animation: show walls initially, then carve as backtracker moves. To make carving visible, we can remove walls as we visit. Actually recursive backtracking: mark cell visited, when moving to neighbor remove wall. Animate visits.

I'll implement iterative backtracking with a stack, and animate one step at a time at intervals. Also draw current cell highlight.

Solver: BFS from start, animate exploration. Then backtrack path.

Let me write.

State:
- grid: array of cells {walls:{N,E,S,W}, visited}
- genAnimId
- solved state.

Use a global `runToken` incremented each New Maze. All animation callbacks check token.

Let me write helper to build fresh maze with all walls true.

Rendering: draw background, walls as lines. Visited cells during generation can be highlighted lightly to show progress.

Let me carefully implement animation.

I'll use setTimeout loops.

```
let token = 0;
let genTimer=null, solveTimer=null;
```

New Maze:
```
token++;
clearTimers();
reset grid all walls, visited false;
drawBase();
runGeneration(token);
```

Generation using iterative stack:
```
const stack=[{x:0,y:0}];
visited[0][0]=true;
function step(){
  if(token!==cur) return;
  // draw current
  ...
  const cur = stack[stack.length-1];
  const neighbors = unvisited neighbors
  if(neighbors.length){
     const n = random pick
     remove wall between
     visited[n]=true
     stack.push(n)
  } else {
     stack.pop()
  }
  if(stack.length===0){ finishGen(); }
  else genTimer=setTimeout(step, speed)
}
```

But the first cell should be marked visited and pushed. Draw after each step.

I'll draw a "visited" tint for cells that have been visited to show progress. But after generation done, clear tint (or keep lightly). For solver clarity, clear tints.

Let me keep genVisited tint during generation, then on finish reset and draw clean maze, then start solver.

Solver BFS:
```
queue=[start], prev map, visitedBFS
step: dequeue cell, mark explored, draw; enqueue neighbors through open passages.
when reach finish, reconstruct path.
```

Animate with setTimeout.

Draw functions use a canvas 2D context. Let me set canvas width = COLS*cell + 2*margin etc.

Let me make cell = 28, margin=15. width=25*28+30=730, height=15*28+30=450.

Actually let me make canvas scale with devicePixelRatio not necessary.

Let me implement.

Walls: cell at (x,y). Top-left pixel = margin + x*cell, margin + y*cell.

Draw wall lines:
- N wall: from (px,py) to (px+cell,py)
- S: (px,py+cell) to (px+cell,py+cell)
- W: (px,py) to (px,py+cell)
- E: (px+cell,py) to (px+cell,py+cell)

Draw all cells.

Colors: wall #2c3e50, background #fff, start green, finish red, explored light blue, solution gold/orange path.

Highlight start/finish always.

Solution path: draw thick line from center of each path cell through centers, only crossing open passages (natural since path is through passages). Also draw path segments between adjacent cells.

Let me code.

Legend in HTML outside canvas.

Buttons: New Maze, Replay Solver. Maybe speed.

Status text.

Let me write the file.

I'll make an `animate` flag and cancellation robust.

Let me write code fully.

Edge: Replay Solver only if maze generated (grid exists). Disable during generation? If pressed during generation, should cancel generation? Requirement says Replay Solver uses existing maze without changing walls. If maze incomplete, replay might be weird. I'll disable Replay until generation completes, or if pressed during generation, just clear solver and solve current (partial) maze — but better to disable. I'll set button disabled during generation and enable after. Actually the verification says "Replay Solver uses the existing maze without changing its walls" — fine to disable during gen. But they may click. Let me allow it to cancel generation and solve the already-carved maze? That changes semantics. I'll disable during generation, enable after. New Maze always enabled.

Let me code.

For cancellation, use token pattern.

Let me write.

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Maze</title>
<style>...</style>
</head>
<body>
...
<script>...</script>
</body>
</html>
```

Let me now write the JS in detail.

```js
const COLS = 25, ROWS = 15;
const CELL = 28, MARGIN = 14;
const canvas = document.getElementById('maze');
const ctx = canvas.getContext('2d');
const W = COLS*CELL + 2*MARGIN;
const H = ROWS*CELL + 2*MARGIN;
canvas.width = W; canvas.height = H;

// grid
let grid;       // grid[y][x] = {walls:[N,E,S,W], visited}
let genVisited; // for tint
let explored;
let solutionPath;
let running=false, token=0;
let genTimer=null, solveTimer=null;
```

Directions: N=0,E=1,S=2,W=3. dx/dy arrays. opposite.

```js
const DX=[0,1,0,-1], DY=[-1,0,1,0], OPP=[2,3,0,1];
```

newGrid:
```js
function newGrid(){
  grid=[];
  for(y...) {row=[]; for x row.push({walls:[true,true,true,true]}); grid.push(row);}
}
```

init draw all walls.

Rendering:
```js
function draw(){
  ctx.clearRect(0,0,W,H);
  // background
  ctx.fillStyle='#fff'; ctx.fillRect(0,0,W,H);
  // cell fills: start/finish/explored/solution
  for each cell:
    fill start / finish / solution / explored
  // walls
  ctx.strokeStyle='#2b2b2b'; ctx.lineWidth=2;
  for each cell draw its N and W (and E if last col? and S if last row?) Simplest draw all four walls but avoid double; drawing all four is fine. But shared walls drawn twice - fine. Use beginPath per line.
}
```

Actually to be safe draw all walls individually.

Cell fill rect with small inset.

Start = (0,0), finish=(COLS-1,ROWS-1).

Draw solution as thick path line under/over? Draw fills then walls then path line maybe over walls? Path should be through centers, doesn't overlap walls except at passage openings, fine. Draw path line after walls with alpha.

Let me implement draw with parameters for overlays.

Let me define drawBase() that draws fills and walls using current state.

State for visualization:
- explored: Set of "x,y"
- solution: array of cells (or Set)
- currentNode for gen.

During generation, I'll show genVisited cells tinted and current cell highlighted.

Let me combine.

I'll write `render()` that uses globals: `phase` ('idle','generating','solving','done'), `genVisited` Set, `current`, `explored` Set, `solution` array.

Let's write:

```js
function render(){
  ctx.clearRect(0,0,W,H);
  // base fills
  for y,x:
    let px=MARGIN+x*CELL, py=MARGIN+y*CELL;
    // gen visited tint
    if(genVisited && genVisited.has(key)) fill '#eef4fb'
    if(explored && explored.has(key)) fill '#cfe3ff'
    if(solutionSet && solutionSet.has(key)) fill '#ffe9a8'
  // start/finish
  fill start '#b7f0c0', finish '#ffc9c9'
  // walls
  ...
  // triggers: current cell highlight
  if(current){ stroke rect around current }
  // solution line
  if(solution){ draw line through centers }
}
```

Order matters: solution path line should be over fills. Draw after walls so visible. Good.

Now generation steps.

```js
function startNewMaze(){
  token++;
  const my=token;
  clearTimeout(genTimer); clearTimeout(solveTimer);
  newGrid();
  genVisited=new Set();
  explored=null; solution=null; current=null;
  phase='generating';
  setButtons();
  status('Generating...');
  const stack=[{x:0,y:0}];
  genVisited.add('0,0');
  current={x:0,y:0};
  render();
  function step(){
    if(my!==token) return;
    if(stack.length===0){
      finishGeneration(my); return;
    }
    const c=stack[stack.length-1];
    // gather unvisited neighbors
    const opts=[];
    for(let d=0;d<4;d++){
      const nx=c.x+DX[d], ny=c.y+DY[d];
      if(inBounds && !genVisited.has(key)) opts.push(d);
    }
    if(opts.length){
      const d=opts[Math.floor(Math.random()*opts.length)];
      const nx=c.x+DX[d], ny=c.y+DY[d];
      grid[c.y][c.x].walls[d]=false;
      grid[ny][nx].walls[OPP[d]]=false;
      genVisited.add(key(nx,ny));
      stack.push({x:nx,y:ny});
      current={x:nx,y:ny};
    } else {
      stack.pop();
      current = stack.length? stack[stack.length-1] : null;
    }
    render();
    genTimer=setTimeout(step, genSpeed);
  }
  genTimer=setTimeout(step, genSpeed);
}
```

Wait: using genVisited both as "visited" for maze correctness. That's fine; recursive backtracker each cell visited once.

finishGeneration: clear current, clear genVisited (so clean), phase idle/done, enable replay, then start solver automatically.

Actually requirement: "After generation finishes, animate either BFS or A-star exploring the maze, then highlight the complete path." So auto-start solver after gen. Good.

```js
function finishGeneration(my){
  if(my!==token) return;
  current=null; genVisited=null;
  phase='done';
  render();
  setButtons();
  status('Maze ready. Solving...');
  startSolver();
}
```

startSolver uses token? It should be cancellable by New Maze. Let's give solve its own token = current token, check my===token.

```js
function startSolver(){
  const my=token;
  clearTimeout(solveTimer);
  explored=new Set();
  solution=null;
  const start={x:0,y:0}, finish={x:COLS-1,y:ROWS-1};
  const queue=[start];
  const visited=new Set([key(0,0)]);
  const prev=new Map();
  phase='solving';
  setButtons();
  status('Solving (BFS)...');
  render();
  function step(){
    if(my!==token) return;
    if(queue.length===0){ status('No path'); return; }
    const c=queue.shift();
    current=null;
    explored.add(key(c.x,c.y));
    if(c.x===finish.x && c.y===finish.y){
      // reconstruct
      phase='done';
      let path=[]; let cur=key(c.x,c.y);
      while(cur){ path.push(cur); cur=prev.get(cur); }
      path.reverse();
      solution=path.map(k=>{const [x,y]=k.split(',').map(Number); return {x,y};});
      explored=null;
      render();
      setButtons();
      status('Solved! Path length: '+solution.length+' cells.');
      return;
    }
    for(let d=0;d<4;d++){
      if(grid[c.y][c.x].walls[d]) continue; // wall blocks
      const nx=c.x+DX[d], ny=c.y+DY[d];
      if(!inBounds) continue;
      const k=key(nx,ny);
      if(visited.has(k)) continue;
      visited.add(k);
      prev.set(k, key(c.x,c.y));
      queue.push({x:nx,y:ny});
    }
    render();
    solveTimer=setTimeout(step, solveSpeed);
  }
  solveTimer=setTimeout(step, solveSpeed);
}
```

Wait reconstruction: prev.set(childKey, parentKey). Start has no prev. Loop while(cur) — but "0,0" is truthy, fine, then prev.get('0,0') undefined ends. Good.

Path length includes both ends.

Replay Solver: startSolver() without changing grid. But if generation ongoing, disabled. It clears explored/solution and reruns. token unchanged so not cancelling gen... but disabled during gen.

Actually New Maze while animation active: token++ cancels. Good.

setButtons: replay disabled if phase==='generating' or !grid. New always enabled.

Speed: maybe add slider. Not required. Keep fixed speeds: gen 18ms, solve 22ms. 375 cells; gen ~ maybe 700 steps * 18ms = ~13s. That might be a bit long but visible. For inspection within time budget maybe faster. Let's use gen 12ms and solve 12ms. 375*12 ≈ 4.5s plus backtracking steps maybe double ~9s. Hmm. Recursive backtracker step count ~2*edges maybe ~ 2*375=750 steps. *12ms = 9s. Acceptable but for testing maybe a speed slider helps. Let me add speed control? Not required but useful. I'll add a "Speed" range input. Keep simple. Actually to keep behavior predictable and within budget, I'll make gen 8ms, solve 8ms -> ~6s and ~4s. Good enough to observe. Let me add a speed multiplier slider maybe.

I'll add a range input 1-5 controlling delay. Default maybe 2. Eh, simpler: fixed but moderate.

Let me just do fixed gen 10ms, solve 12ms.

Now status and buttons.

Also draw current cell highlight during generation.

Let me also draw genVisited tint so progress visible. Good.

Now let me handle canvas responsiveness: just fixed size, container may scroll.

Let me write CSS nice.

Now write file.

One more: start cell fill and finish fill should be drawn before walls. And for explored, skip start/finish? It's fine to overwrite; I draw start/finish last among fills.

Solution line drawn as lineWidth ~ CELL*0.25, color gold with round caps, from center of each consecutive cell. Only open passages since path adjacency.

Also draw small circles at start/finish.

Let me code the wall drawing efficiently.

```js
ctx.lineWidth=2; ctx.strokeStyle='#243b53'; ctx.lineCap='round';
for y for x:
  const c=grid[y][x];
  const px=MARGIN+x*CELL, py=MARGIN+y*CELL;
  if(c.walls[0]){line(px,py,px+CELL,py);}
  if(c.walls[1]){line(px+CELL,py,px+CELL,py+CELL);}
  if(c.walls[2]){line(px,py+CELL,px+CELL,py+CELL);}
  if(c.walls[3]){line(px,py,px,py+CELL);}
```

Using individual beginPath each. That's 1500 paths, fine.

Actually I can reduce: draw N for all, W for all, plus E for last column, S for last row. But all four is simpler and ensures boundary.

Cell fill function:
```js
function fillCell(x,y,color){ ctx.fillStyle=color; ctx.fillRect(MARGIN+x*CELL+1, MARGIN+y*CELL+1, CELL-2, CELL-2);}
```
Walls lineWidth 2 overlap boundaries; inset 1 leaves the wall lines visible. Actually wall line centered on cell edge, so inset 1 means fill starts 1px inside, which is under the wall line half (lineWidth 2 covers ±1). The fill may cover inner half of wall. To be safe draw fills first then walls, so walls on top. Yes.

Now the solution line drawn after walls could overlap walls but it's through centers and passage openings, fine.

Let me write.

For dpr scaling, skip; fixed.

Let me write the file now.

Also need to ensure the maze is a perfect maze (exactly one simple path) — recursive backtracker guarantees spanning tree.

Now write.

I'll also add a subtle grid background maybe.

Let's produce.

I left a stray `ctx.strokeStyle = "var";` line — remove it. Let me fix.

Also I set canvas HTML width/height to 718x438 but JS overrides to 724x444. Fine—JS sets it. Let me load in browser.

Canvas blank initially (no grid), good. Now click New Maze and screenshot mid-generation. The button coordinates: around x=225, y=100. Let me click and then screenshot quickly.

Generation just started, carving down column 0. Good—progress visible. Now test New Maze while active: click New Maze again immediately and check it cancels and restarts cleanly. Then let it run to completion.

Let me click New Maze again after a short delay? I can't easily delay. Just click again now (it may already be further along). Actually let me click New Maze to test cancellation and observe.

Let me wait a bit by doing another action maybe inspect. I'll click New Maze again.

The new generation cleanly replaced the previous (reset to start, only first cell carved). Good. Now wait for it to complete and solve. I need to wait. Let me use a scroll or motion? There's no wait action. I can run multiple inspection actions to consume time, or use bash sleep then reload? Reload would restart. I'll just wait by taking a screenshot after some time — but tool calls are fast. Let me use bash sleep 15 to pass wall-clock time, then screenshot. Actually the timers keep running in browser regardless. Yes, bash sleep doesn't affect browser but the browser continues running. Let me sleep ~15s then screenshot.

Maze generated and solved: gold path from start to finish. Looks correct and passes only through open passages. Path length 95.

Now test Replay Solver uses the same maze walls without changing them. Click Replay and screenshot mid-solve, then compare walls. Click replay at x=388,y=100.

Replay solver: same walls as before (compare the maze structure—yes identical), exploring from start with light blue cell one step away. Good. Walls unchanged.

Let me capture a mid-solve state to verify exploration follows open passages. Wait ~2s and screenshot.

Also check console for errors. Console only had the sandbox warning. No JS errors. Good.

Let me sleep 2s and screenshot mid-solve.

Replay completed with the exact same maze and same path length 95, walls unchanged. 

Now test New Maze while solver animation active. Click New Maze then immediately click again? Actually we already tested New Maze while generation active. Test New Maze while solving active: start replay then click New Maze during solving. Let me do replay then New Maze quickly.

Actually we already verified cancellation during generation. The requirement says "request New Maze while animation is active" — covered. Also "If solver starts during inspection, check its visible steps follow open passages." We saw BFS exploration. Let me do one more check: start replay and screenshot early to see exploration front respecting walls. I did see one cell. Good enough.

Let me also test New Maze during solving to be thorough. Click replay, then click New Maze.

Actually to save time, I'm fairly confident. But let me do a quick test: click Replay, then click New Maze (both fast) and verify status goes to Generating and canvas resets.

Coordinates: replay x=388, new x=225.

Let me click replay then new.

Now click New Maze during solving. But the solver may take a while; click immediately.

New Maze during solving cancelled the solver and started fresh generation cleanly. Old maze entirely replaced (only first two cells carved). Replay button disabled during generation. 

Everything works. Let me do a final check for console errors — only the sandbox warning. No JS errors.

One thing: I should verify that the maze is a perfect maze (unique path). Recursive backtracker guarantees it. The status says unique path but that's just text. Fine.

Potential issue: path drawn with gold thick line width 6.16 might spill into adjacent cells visually, but it's centered on cell centers going through passages. Looks fine in screenshot.

Let me confirm the final file is saved. It is.

Let me do a quick final full solve screenshot maybe with a completed generation after this last New Maze. Already have one. Good.

I'm done. Report.