Maze generator & solver · lfm-2.5-24b-a2b

We need to build a maze generator and solver visualization on a canvas. Requirements:

1. Generate a 25x15 cell rectangular maze using randomized recursive backtracking (Recursive Backtracking / depth-first search maze generation). All cells reachable, exactly one simple path between any pair of cells.
2. Upper-left cell = Start, lower-right cell = Finish.
3. Draw cell walls clearly and animate generation so carving progress is visible.
4. After generation finishes, animate either BFS or A* exploring the maze, then highlight the complete path from Start to Finish. Path must cross only open passages.
5. "New Maze" button cancels previous animation and generates a fresh maze; "Replay Solver" uses existing maze without changing walls.
6. Mark start, finish, exploration, and solution with distinguishable styles and a short legend.

Verification: Inspect maze-carving progress, request New Maze while animation is active, check that new generation replaces previous view cleanly, if solver starts during inspection, check that its visible steps follow open passages.

We need to write everything into `index.html` in the current working directory. Inline CSS and JS, no external resources, no CDNs, no third-party libraries.

Let me plan the implementation:

**Maze Generation - Randomized Recursive Backtracking:**
- Grid of cells, each with walls: top, right, bottom, left.
- Start DFS from (0,0), mark visited, push to stack.
- While stack not empty: pop current, get unvisited neighbors, pick random one, remove wall between current and neighbor, push neighbor.
- This creates a perfect maze (all cells connected, exactly one path).

**Canvas Drawing:**
- Canvas size: let's say each cell is 30px. 25 columns x 15 rows = 750 x 450 pixels. Add some padding/border.
- Draw walls as lines. Cells have fill colors for different states:
  - During generation: walls being carved (carved paths) vs remaining walls.
  - After generation: open passages (paths) vs walls.
  - Exploration: BFS/A* path shown with a different color.
  - Solution: final path highlighted.

**Animation:**
- Generation: step through the algorithm, showing the current frontier. We can animate by processing a few steps per frame.
- Exploration: after generation, run BFS from start to finish, animating the exploration steps (marking visited cells).
- Then highlight the solution path.

**UI:**
- Buttons: "New Maze", "Replay Solver".
- Legend: show what colors mean.

**Colors:**
- Start: green
- Finish: red
- Walls: black/dark
- Open passages: white/light
- Exploration: blue
- Solution path: yellow/orange

Let me think about the structure:

HTML:
- `<canvas id="mazeCanvas"></canvas>`
- Buttons: `<button id="newMazeBtn">New Maze</button>`, `<button id="replayBtn">Replay Solver</button>`
- Legend div

CSS:
- Styling for buttons, legend, canvas container.

JS:
- Maze data structures: grid of cells, each with walls and visited state.
- Functions: generateMaze(), drawMaze(), animateGeneration(), animateExploration(), findPathBFS() or A*.

Let me design the maze generation more concretely:

Cell structure:
```
{
  x, y,
  walls: { top: true, right: true, bottom: true, left: true },
  visited: false
}
```

Algorithm:
```
stack = []
startCell = grid[0][0]
startCell.visited = true
stack.push(startCell)

while stack.length > 0:
  current = stack.pop()
  neighbors = get unvisited neighbors of current
  if neighbors.length > 0:
    next = random choice of neighbors
    remove wall between current and next
    next.visited = true
    stack.push(current)
    stack.push(next)
```

Wait, standard recursive backtracking: push current, then while stack, pop, get unvisited neighbors, if any, choose random, remove wall, mark visited, push both. Let me use the iterative version:

```
stack = [grid[0][0]]
grid[0][0].visited = true

while stack.length > 0:
  current = stack[stack.length - 1]  // peek
  neighbors = get unvisited neighbors
  if neighbors.length > 0:
    next = random.choice(neighbors)
    removeWall(current, next)
    next.visited = true
    stack.push(next)
  else:
    stack.pop()
```

This is the standard approach.

**Drawing:**

Canvas dimensions: Let's make it responsive but with fixed cell size. Cell size = 30px. Canvas width = 25 * 30 + 1 border = 751? Actually, we can just draw walls as lines on the canvas. Let's set canvas width = 25 * CELL_SIZE + 1 (for a small gap) and height = 15 * CELL_SIZE + 1. Or simpler: width = 25 * 30 = 750, height = 15 * 30 = 450. We'll add a 1px border around the whole thing.

For walls: each cell is 30x30. Wall positions:
- Top wall of cell (x,y): line from (x*30, y*30) to ((x+1)*30, y*30)
- Right wall: from ((x+1)*30, y*30) to ((x+1)*30, (y+1)*30)
- Bottom wall: from (x*30, (y+1)*30) to ((x+1)*30, (y+1)*30)
- Left wall: from (x*30, y*30) to (x*30, (y+1)*30)

**State tracking for animation:**
- During generation: we need to track which cells have been visited (carved). The maze walls between visited cells are removed. Actually, in the generation process, when we carve a passage between two cells, we remove the shared wall. So at any point during generation, the "carved" area consists of all visited cells and the passages between them. The walls that remain are those that haven't been crossed yet.

For visualization, I'll maintain:
- `maze` array of cells
- `generationComplete`: boolean
- `exploring`: boolean, with an array of steps for animation
- `solutionPath`: array of {x,y} for the final path

For the generation animation, I'll process the algorithm step by step, updating the canvas each frame. Since this is a single-page app, I can use `requestAnimationFrame` or `setTimeout` to animate.

Let me think about how to animate generation:
- Each iteration of the while loop processes one step (choose a neighbor, carve wall).
- Number of steps: roughly number of cells * average depth. For 25x15=375 cells, maybe ~500-700 steps.
- I can do multiple steps per frame to speed it up. Say 5 steps per frame, or based on total steps.

Actually, for a good visual, let's do something like: each frame, process N steps. Total steps ~ number of cells + number of walls removed. Let's estimate: in a perfect maze, number of walls removed = number of cells - 1 = 374. Plus initial setup. So about 400-500 steps. If we do 10 steps per frame at 60fps, that's about 7 seconds. That's reasonable.

For exploration (BFS):
- BFS from start to finish.
- Animate by revealing one cell per frame (or a few).
- Keep a queue, mark visited cells.
- After BFS completes, highlight the path.

Path finding: BFS guarantees shortest path in unweighted grid. I'll implement BFS that returns the path as an array of coordinates.

**Solution highlighting:**
- After exploration animation, draw the path from start to finish. The path goes through open passages (cells that were visited during BFS exploration). Actually, the path should be drawn as a line through the centers of the cells in the path.

**Legend:**
- Start: green circle
- Finish: red circle
- Walls: black
- Exploration: blue cells
- Solution: yellow cells
- Generation: maybe animated gray/white

**Buttons:**
- "New Maze": resets everything, generates a new maze, cancels ongoing animations.
- "Replay Solver": runs BFS exploration on the current maze (without regenerating).

**Implementation details:**

Let me write the code structure:

```html
<!DOCTYPE html>
<html>
<head>
<style>
  /* CSS */
</style>
</head>
<body>
  <h1>Maze Generator & Solver</h1>
  <canvas id="mazeCanvas" width="750" height="450"></canvas>
  <div id="controls">
    <button id="newMazeBtn">New Maze</button>
    <button id="replayBtn">Replay Solver</button>
  </div>
  <div id="legend">
    <!-- legend items -->
  </div>
  <script>
    // JavaScript
  </script>
</body>
</html>
```

Now, let me write the full code.

**Canvas setup:**
- CELL_SIZE = 30
- COLS = 25, ROWS = 15
- Canvas width = COLS * CELL_SIZE = 750, height = ROWS * CELL_SIZE = 450

**Cell class:**
```javascript
class Cell {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.walls = { top: true, right: true, bottom: true, left: true };
    this.visited = false;
  }
}
```

**Maze generation function:**
```javascript
function generateMaze() {
  const cols = 25, rows = 15;
  const grid = [];
  for (let y = 0; y < rows; y++) {
    grid[y] = [];
    for (let x = 0; x < cols; x++) {
      grid[y][x] = new Cell(x, y);
    }
  }
  
  const stack = [];
  const start = grid[0][0];
  start.visited = true;
  stack.push(start);
  
  while (stack.length > 0) {
    const current = stack[stack.length - 1];
    const neighbors = [];
    // Check unvisited neighbors
    if (current.x > 0 && !grid[current.y][current.x - 1].visited) neighbors.push(grid[current.y][current.x - 1]);
    if (current.x < cols - 1 && !grid[current.y][current.x + 1].visited) neighbors.push(grid[current.y][current.x + 1]);
    if (current.y > 0 && !grid[current.y - 1][current.x].visited) neighbors.push(grid[current.y - 1][current.x]);
    if (current.y < rows - 1 && !grid[current.y + 1][current.x].visited) neighbors.push(grid[current.y + 1][current.x]);
    
    if (neighbors.length > 0) {
      const next = neighbors[Math.floor(Math.random() * neighbors.length)];
      removeWall(current, next);
      next.visited = true;
      stack.push(next);
    } else {
      stack.pop();
    }
  }
  return grid;
}
```

**removeWall:**
```javascript
function removeWall(a, b) {
  const dx = b.x - a.x;
  const dy = b.y - a.y;
  if (dx === 1) { a.walls.right = false; b.walls.left = false; }
  if (dx === -1) { a.walls.left = false; b.walls.right = false; }
  if (dy === 1) { a.walls.bottom = false; b.walls.top = false; }
  if (dy === -1) { a.walls.top = false; b.walls.bottom = false; }
}
```

**Drawing functions:**

First, clear canvas and draw walls for visited cells. Actually, during generation, we want to show the carving progress. So we draw walls that still exist (not yet removed). Cells that have been visited are part of the maze, and their outer walls may or may not be drawn depending on whether they've been carved.

Simpler approach: At any point, draw all walls that are still present (i.e., not removed). For visited cells, the outer boundary walls might still be there if they haven't been crossed. Actually, in the final maze, all outer boundaries are walls except where the start/finish connect... no wait, in a proper maze, the outer boundary is all walls. The start is at top-left, finish at bottom-right. The outer walls form the boundary.

During generation, as we carve passages, we remove internal walls. The outer boundary walls remain.

So drawing logic:
- For each cell, draw its walls that are still present (walls where `walls[dir] === true`).
- But we need to avoid drawing shared walls twice. Standard approach: iterate over all cells and draw the top and left walls of each cell (to avoid duplicates), plus the right and bottom walls of the last column/row. Or just draw all four walls for each cell and accept that shared walls are drawn twice (visually it's fine since they're the same line).

I'll draw all four walls for each cell. It's simpler and looks correct.

**Color scheme:**
- Wall: black (#000)
- Visited cells (carved passages): light gray or white? Actually, the maze passages should be visible. Let's fill visited cells with a light color (e.g., #e0e0e0) to distinguish them from walls. Or just draw walls and leave the background as the maze floor.

Let me think about the visual:
- Background: light gray (#f0f0f0)
- Walls: black lines
- During generation: unvisited cells are dark (or hidden), visited cells are light. Carved passages (the paths) are visible.
- After generation: open passages are the cells themselves (no walls between them). Actually, the maze is a network of passages. The "floor" of the maze is the open areas. Let me fill the entire background with a light color, draw walls on top, and mark special cells with colored fills.

Better approach:
- Fill canvas with a background color (e.g., #ffffff).
- Draw walls as black lines.
- For each cell, if it's part of the explored/visited area, fill it with a color.
- Start cell: green fill.
- Finish cell: red fill.
- Exploration cells: blue fill.
- Solution path: yellow fill.

But wait: during generation, we want to see the carving progress. So before generation is complete, some cells have been visited (carved) and others haven't. The unvisited cells should probably be hidden (dark) or shown as walls.

Let me define states:
- `generationPhase`: 'building' or 'done'
- During building: cells that have been visited are "carved" (shown as light), unvisited cells are "blocked" (dark).
- Walls: drawn for all cells, but for unvisited cells, the outer walls are still there.

Actually, for a cleaner look:
- Draw the maze as a grid of cells.
- Each cell has a background color based on its state:
  - Unvisited: dark gray (blocked)
  - Visited (part of the maze tree): light gray (open)
- Walls: black lines on top.
- Special markers: start (green), finish (red), exploration (blue), solution (yellow).

**Animation timing:**

Generation animation:
- Process steps in batches. Let's say 8 steps per frame.
- Total steps: roughly number of cells + number of walls removed. For 375 cells, about 375 + 374 = 749 steps. At 8 steps/frame and 60fps, that's about 2 seconds. Good.

Exploration animation:
- BFS from start to finish. Number of cells in BFS: up to 375. Show one cell per frame? That would take too long. Maybe 5 cells per frame. Total frames ~ 75. At 60fps, about 1.25 seconds. Reasonable.

Solution highlighting:
- After exploration, draw the path. Path length: BFS distance. For a 25x15 maze, max distance is about 37 steps. Draw the path as a polyline through cell centers.

**State management:**
I'll create a `MazeApp` object or just global variables:

```javascript
const canvas = document.getElementById('mazeCanvas');
const ctx = canvas.getContext('2d');
const COLS = 25, ROWS = 15;
const CELL_SIZE = 30;

let grid = null;
let generationComplete = false;
let explorationQueue = [];
let explorationVisited = new Set();
let solutionPath = [];
let solving = false;
let animationId = null;
```

Functions:
- `init()`: sets up canvas, calls generateMaze()
- `generateMaze()`: runs the algorithm, returns grid, sets generationComplete = true when done
- `animateGeneration()`: processes generation steps
- `drawMaze()`: draws everything based on current state
- `animateExploration()`: runs BFS, animates
- `highlightSolution()`: draws the path
- `reset()`: clears state for new maze

**Drawing details:**

```javascript
function drawMaze() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // Draw background
  ctx.fillStyle = '#ffffff';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  // Draw cells
  for (let y = 0; y < ROWS; y++) {
    for (let x = 0; x < COLS; x++) {
      const cell = grid[y][x];
      const px = x * CELL_SIZE;
      const py = y * CELL_SIZE;
      
      // Determine cell color based on state
      let cellColor = null;
      if (cell.visited) cellColor = '#e8e8e8'; // visited/carved
      else cellColor = '#333333'; // unvisited/blocked
      
      // Special cells
      if (cell.isStart) cellColor = '#4CAF50'; // green
      if (cell.isFinish) cellColor = '#F44336'; // red
      if (cell.inExploration) cellColor = '#2196F3'; // blue
      if (cell.inSolution) cellColor = '#FFC107'; // yellow
      
      ctx.fillStyle = cellColor;
      ctx.fillRect(px, py, CELL_SIZE, CELL_SIZE);
      
      // Draw walls
      ctx.strokeStyle = '#000000';
      ctx.lineWidth = 2;
      ctx.beginPath();
      if (cell.walls.top) {
        ctx.moveTo(px, py);
        ctx.lineTo(px + CELL_SIZE, py);
      }
      if (cell.walls.right) {
        ctx.moveTo(px + CELL_SIZE, py);
        ctx.lineTo(px + CELL_SIZE, py + CELL_SIZE);
      }
      if (cell.walls.bottom) {
        ctx.moveTo(px, py + CELL_SIZE);
        ctx.lineTo(px + CELL_SIZE, py + CELL_SIZE);
      }
      if (cell.walls.left) {
        ctx.moveTo(px, py);
        ctx.lineTo(px, py + CELL_SIZE);
      }
      ctx.stroke();
    }
  }
}
```

Wait, I need to track `isStart`, `isFinish`, `inExploration`, `inSolution` flags on cells. Let me add those properties.

Also, for the legend, I'll add a small legend section below the canvas.

**BFS exploration:**

```javascript
function bfs() {
  const start = grid[0][0];
  const finish = grid[ROWS-1][COLS-1];
  const queue = [start];
  const visited = new Set();
  visited.add(`${start.x},${start.y}`);
  const parent = {};
  parent[`${start.x},${start.y}`] = null;
  
  while (queue.length > 0) {
    const current = queue.shift();
    if (current === finish) break;
    // Get neighbors (check walls)
    const neighbors = [];
    const { x, y } = current;
    if (!current.walls.top && y === 0) neighbors.push(grid[y-1]?.[x]); // out of bounds check
    // ...
  }
  // Reconstruct path
}
```

Actually, for BFS, I need to check which adjacent cells are accessible (no wall between). Let me write a helper:

```javascript
function getAccessibleNeighbors(cell) {
  const neighbors = [];
  const { x, y } = cell;
  if (!cell.walls.top && y > 0) neighbors.push(grid[y-1][x]);
  if (!cell.walls.right && x < COLS-1) neighbors.push(grid[y][x+1]);
  if (!cell.walls.bottom && y < ROWS-1) neighbors.push(grid[y+1][x]);
  if (!cell.walls.left && x > 0) neighbors.push(grid[y][x-1]);
  return neighbors;
}
```

Then BFS:
```javascript
function bfs() {
  const start = grid[0][0];
  const finish = grid[ROWS-1][COLS-1];
  const queue = [start];
  const visited = new Set();
  visited.add(`${start.x},${start.y}`);
  const parent = {};
  parent[`${start.x},${start.y}`] = null;
  
  while (queue.length > 0) {
    const current = queue.shift();
    if (current === finish) break;
    const neighbors = getAccessibleNeighbors(current);
    for (const next of neighbors) {
      const key = `${next.x},${next.y}`;
      if (!visited.has(key)) {
        visited.add(key);
        parent[key] = current;
        queue.push(next);
      }
    }
  }
  
  // Reconstruct path
  const path = [];
  let curr = finish;
  while (curr) {
    path.unshift(curr);
    const key = `${curr.x},${curr.y}`;
    curr = parent[key];
  }
  return path;
}
```

**Exploration animation:**
- Store the BFS path as an array of cells.
- Animate by revealing cells one by one (or a few per frame).
- Set `explorationQueue` to the path array, and a counter to track how many have been revealed.

```javascript
let explorationIndex = 0;
const explorationPath = bfs(); // compute once

function animateExploration() {
  if (exploring) return;
  exploring = true;
  explorationIndex = 0;
  // Reset exploration marks
  for (let y = 0; y < ROWS; y++) {
    for (let x = 0; x < COLS; x++) {
      grid[y][x].inExploration = false;
    }
  }
}

// In drawMaze, if exploring, fill cells up to explorationIndex with blue
```

**Solution highlighting:**
After exploration completes, set `solutionPath` to the BFS path, and animate drawing it (e.g., draw the path line or fill cells yellow).

**Button handlers:**
- New Maze: reset all state, call generateMaze(), set generationComplete = false, start generation animation.
- Replay Solver: if maze exists, run BFS exploration and highlight solution.

**Legend:**
Show colors:
- Green: Start
- Red: Finish
- Blue: Exploration (BFS steps)
- Yellow: Solution path
- Gray: Maze walls / unvisited cells

**Refining the generation animation:**

I need to make the generation visible. Let me process steps in batches. I'll keep a `generationSteps` array that stores the sequence of operations (which cell was visited, etc.), or just process the algorithm step by step.

Actually, the algorithm modifies the grid in place. I can just run the algorithm in a loop with a delay. For animation, I'll process N steps per animation frame.

```javascript
let genStep = 0;
const GEN_STEPS_PER_FRAME = 5;

function animateGeneration() {
  if (generationComplete) return;
  const totalSteps = COLS * ROWS; // approximate
  const stepsPerFrame = Math.max(1, Math.floor(totalSteps / (60 * 3))); // aim for ~3 seconds
  
  function processStep() {
    if (genStep >= totalSteps) {
      generationComplete = true;
      drawMaze();
      return;
    }
    // Run one iteration of the generation algorithm
    // ... (same as generateMaze but one step)
    genStep++;
    if (genStep % GEN_STEPS_PER_FRAME === 0) {
      drawMaze();
    }
    animationId = requestAnimationFrame(processStep);
  }
  processStep();
}
```

Hmm, this is getting complex. Let me simplify: I'll pre-compute the entire generation sequence (the order in which cells are visited), then animate by revealing cells in that order.

Actually, the recursive backtracking algorithm's order depends on random choices. I can record the sequence of visited cells during generation, then replay it for animation. That way, the animation is deterministic in terms of which cells get revealed when, and the visual progression is smooth.

Plan:
1. Run the generation algorithm, recording the order of cell visits.
2. Store this order in an array `generationOrder`.
3. For animation, iterate through `generationOrder` in chunks per frame, marking cells as visited and redrawing.

This is much cleaner for animation.

```javascript
let generationOrder = [];

function generateMaze() {
  // ... same algorithm, but push each visited cell to generationOrder
  // At the end, generationComplete = true
}
```

Then in the animation loop:
```javascript
let genIndex = 0;
const GEN_CHUNK = 8;

function animateGeneration() {
  if (generationComplete) return;
  const remaining = generationOrder.length - genIndex;
  if (remaining <= 0) {
    generationComplete = true;
    drawMaze();
    return;
  }
  const toProcess = Math.min(GEN_CHUNK, remaining);
  for (let i = 0; i < toProcess; i++) {
    const cell = generationOrder[genIndex + i];
    cell.visited = true; // already visited, but ensure
    genIndex++;
  }
  drawMaze();
  if (genIndex < generationOrder.length) {
    requestAnimationFrame(animateGeneration);
  } else {
    generationComplete = true;
    drawMaze();
  }
}
```

Wait, but the generation algorithm itself needs to run first to build the maze. The `generationOrder` should be recorded during the actual generation. Let me restructure:

```javascript
function generateMaze() {
  // Initialize grid
  // Run algorithm, recording order
  // Set generationComplete = true when done
  // Start animation
}
```

The animation starts after generation is complete. So:

```javascript
function generateMaze() {
  // Build grid and run algorithm, recording order
  // After algorithm finishes:
  generationComplete = true;
  genIndex = 0;
  animateGeneration();
}
```

And `animateGeneration` reveals cells from `generationOrder` one by one.

**Drawing the generation phase:**
During generation animation, unvisited cells (not yet in `generationOrder`) should appear as blocked (dark). Visited cells appear as light. Walls are drawn according to the current wall state.

Actually, during generation, the walls between visited cells are removed. So the drawing should reflect the current state of the grid. The grid's wall state is updated as we go. So `drawMaze()` will naturally show the correct walls.

**Post-generation:**
After generation, all cells are visited. The maze is fully built. Then we run BFS exploration.

**Exploration animation:**
After generation completes, we can immediately start exploration (or wait for button click). The requirement says "animate either BFS or A-star exploring the maze, then highlight the complete path". So after generation, clicking "Replay Solver" or auto-start? The requirement says "After generation finishes, animate either BFS or A-star exploring the maze, then highlight the complete path". I think the flow is: generate maze → animate generation → when generation is done, animate exploration → highlight path. The "New Maze" button cancels the current animation and generates a new maze. "Replay Solver" uses the existing maze.

So the default flow: on page load, generate maze with animation, then automatically start exploration animation and highlight the path? Or should exploration only start when the user clicks "Replay Solver"? The requirement says "After generation finishes, animate either BFS or A-star exploring the maze, then highlight the complete path from Start to Finish." This suggests that after generation, the exploration animation runs. But also "Provide New Maze and Replay Solver" buttons. I think the intended behavior is:
- On load: generate maze with animation.
- After generation: explore and highlight (maybe automatically, or via a button).
- "New Maze" cancels current animation and generates a new maze.
- "Replay Solver" runs the exploration/solution on the current maze.

To be safe, I'll make it so that after generation completes, the exploration animation runs automatically. And "Replay Solver" can be clicked to re-run the exploration (it will reset and re-animate). Actually, "Replay Solver uses the existing maze without changing its walls" — this suggests it's a separate action from generation. I'll implement it such that clicking "Replay Solver" triggers the BFS exploration animation and highlights the path.

Let me structure it:
- On page load: generate maze (animation), then automatically start exploration animation.
- "New Maze": cancel ongoing animations, generate new maze (animation).
- "Replay Solver": run BFS exploration animation and highlight path on the current maze.

**Drawing the solution path:**
After exploration, draw the path cells in yellow. Also draw a line connecting them? A line through cell centers would be nice. Let me draw a polyline connecting the centers of path cells.

Center of cell (x,y): (x*CELL_SIZE + CELL_SIZE/2, y*CELL_SIZE + CELL_SIZE/2).

**Legend HTML:**
```html
<div id="legend">
  <span class="legend-item"><span class="swatch start"></span> Start</span>
  <span class="legend-item"><span class="swatch finish"></span> Finish</span>
  <span class="legend-item"><span class="swatch explore"></span> Exploration</span>
  <span class="legend-item"><span class="swatch solution"></span> Solution Path</span>
  <span class="legend-item"><span class="swatch unvisited"></span> Unvisited</span>
</div>
```

**CSS:**
- Body: font-family, centered layout.
- Buttons styled.
- Legend styled.

**Final touches:**
- Make sure the canvas has a border or background so it's visible.
- Add a title.

Let me now write the complete index.html file.

Let me calculate exact dimensions:
- 25 columns × 30px = 750px wide
- 15 rows × 30px = 450px tall
- Canvas: 750x450

I'll add a small margin/padding inside the canvas? No, keep it simple.

**Code organization:**

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Maze Generator & Solver</title>
<style>
  body { font-family: Arial, sans-serif; text-align: center; padding: 20px; background: #f5f5f5; }
  canvas { border: 2px solid #333; background: #fff; margin: 10px auto; display: block; }
  .controls { margin: 10px 0; }
  button { padding: 8px 16px; margin: 0 5px; cursor: pointer; font-size: 14px; }
  #newMazeBtn { background: #4CAF50; color: white; border: none; border-radius: 4px; }
  #replayBtn { background: #2196F3; color: white; border: none; border-radius: 4px; }
  #legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin-top: 10px; font-size: 13px; }
  .legend-item { display: flex; align-items: center; gap: 4px; }
  .swatch { width: 14px; height: 14px; border-radius: 3px; }
  .start { background: #4CAF50; }
  .finish { background: #F44336; }
  .explore { background: #2196F3; }
  .solution { background: #FFC107; }
  .unvisited { background: #555; }
</style>
</head>
<body>
<h1>Maze Generator & Solver</h1>
<canvas id="mazeCanvas" width="750" height="450"></canvas>
<div class="controls">
  <button id="newMazeBtn">New Maze</button>
  <button id="replayBtn">Replay Solver</button>
</div>
<div id="legend">
  <div class="legend-item"><span class="swatch start"></span> Start</div>
  <div class="legend-item"><span class="swatch finish"></span> Finish</div>
  <div class="legend-item"><span class="swatch explore"></span> Exploration</div>
  <div class="legend-item"><span class="swatch solution"></span> Solution Path</div>
  <div class="legend-item"><span class="swatch unvisited"></span> Unvisited</div>
</div>
<script>
// ... JavaScript ...
</script>
</body>
</html>
```

Now the JavaScript:

```javascript
const canvas = document.getElementById('mazeCanvas');
const ctx = canvas.getContext('2d');

const COLS = 25;
const ROWS = 15;
const CELL_SIZE = 30;

let grid = null;
let generationComplete = false;
let generationOrder = [];
let genIndex = 0;
let explorationIndex = 0;
let explorationQueue = [];
let solutionPath = [];
let exploring = false;
let solving = false;

// Button references
const newMazeBtn = document.getElementById('newMazeBtn');
const replayBtn = document.getElementById('replayBtn');

// Maze generation
function createCell(x, y) {
  return {
    x, y,
    walls: { top: true, right: true, bottom: true, left: true },
    visited: false,
    isStart: false,
    isFinish: false,
    inExploration: false,
    inSolution: false
  };
}

function removeWall(a, b) {
  const dx = b.x - a.x;
  const dy = b.y - a.y;
  if (dx === 1) { a.walls.right = false; b.walls.left = false; }
  if (dx === -1) { a.walls.left = false; b.walls.right = false; }
  if (dy === 1) { a.walls.bottom = false; b.walls.top = false; }
  if (dy === -1) { a.walls.top = false; b.walls.bottom = false; }
}

function generateMaze() {
  // Initialize grid
  grid = [];
  for (let y = 0; y < ROWS; y++) {
    grid[y] = [];
    for (let x = 0; x < COLS; x++) {
      grid[y][x] = createCell(x, y);
    }
  }
  
  // Set start and finish
  grid[0][0].isStart = true;
  grid[ROWS-1][COLS-1].isFinish = true;
  
  // Randomized recursive backtracking
  const stack = [];
  const start = grid[0][0];
  start.visited = true;
  stack.push(start);
  generationOrder = [start];
  
  while (stack.length > 0) {
    const current = stack[stack.length - 1];
    const neighbors = [];
    if (current.x > 0 && !grid[current.y][current.x - 1].visited) neighbors.push(grid[current.y][current.x - 1]);
    if (current.x < COLS - 1 && !grid[current.y][current.x + 1].visited) neighbors.push(grid[current.y][current.x + 1]);
    if (current.y > 0 && !grid[current.y - 1][current.x].visited) neighbors.push(grid[current.y - 1][current.x]);
    if (current.y < ROWS - 1 && !grid[current.y + 1][current.x].visited) neighbors.push(grid[current.y + 1][current.x]);
    
    if (neighbors.length > 0) {
      const next = neighbors[Math.floor(Math.random() * neighbors.length)];
      removeWall(current, next);
      next.visited = true;
      stack.push(next);
      generationOrder.push(next);
    } else {
      stack.pop();
    }
  }
  
  generationComplete = true;
  genIndex = 0;
  // Start exploration animation
  startExploration();
}

function startExploration() {
  if (exploring || solving) return;
  exploring = true;
  explorationIndex = 0;
  // Compute BFS path
  const path = bfsPath();
  explorationQueue = path;
  // Reset exploration marks
  for (let y = 0; y < ROWS; y++) {
    for (let x =

We need to build a maze generator and solver visualization on a canvas. Requirements:

1. Generate a 25x15 cell rectangular maze using randomized recursive backtracking (Recursive Backtracking / DFS maze generation). All cells reachable, exactly one simple path between any pair of cells.
2. Upper-left cell = Start, lower-right cell = Finish.
3. Draw cell walls clearly and animate generation so carving progress is visible.
4. After generation finishes, animate either BFS or A* exploring the maze, then highlight the complete path from Start to Finish. Path must cross only open passages.
5. New Maze button cancels previous animation and generates a fresh maze; Replay Solver uses existing maze without changing walls.
6. Mark start, finish, exploration, and solution with distinguishable styles and a short legend.

Verification: Inspect maze-carving progress, request New Maze while animation is active, check that new generation replaces previous view cleanly, if solver starts during inspection, check visible steps follow open passages.

We need to write index.html with inline CSS and JS, no external resources/CDNs/network. No third-party libraries.

Let me plan the implementation:

- Canvas size: We'll use a canvas element. Maze is 25 columns x 15 rows of cells. Each cell will have some size, say 20px. So canvas width = 25*20 + wall thickness? Let's keep it simple: each cell is 20px, with walls drawn as lines. The canvas can be 25*20 + some padding = 500x300 (plus maybe border).

Actually, let's think about drawing walls. For a grid of cells, we can draw each cell as a square. Walls are between cells. A common approach: for each cell, draw its top and left walls if they exist. Or draw the entire grid with walls.

Simpler: Represent the maze as a grid of cells, each cell has walls (top, right, bottom, left). Use randomized recursive backtracking to carve passages.

Algorithm:
- Initialize all walls present.
- Start at (0,0).
- Stack-based DFS: push start, mark visited.
- While stack not empty: pop current cell, get unvisited neighbors, pick random one, remove wall between current and neighbor, recurse.

For animation: we can reveal cells progressively. One approach: during generation, we can show which cells have been visited (carved) by coloring them. But the requirement says "draw cell walls clearly and animate generation so carving progress is visible." So we should animate the wall removal process.

A common way: for each step of the DFS, draw the current cell's walls being removed. But that's complex. Simpler: animate by revealing cells in order - color visited cells. But walls need to be drawn too.

Alternative: Draw the full grid of walls first, then as the generation progresses, "carve" cells by filling visited cells with a color (e.g., light gray), and also remove walls between visited cells. Actually, in the final maze, walls between visited cells should be removed.

Let me think about what looks good:
- Initially, all walls are drawn (full grid).
- As the algorithm visits cells, we can "carve" the cell interior (fill with color) and remove the walls connecting to already-visited neighbors.

For animation, we can run the DFS step by step, with a delay, and after each step, update the canvas.

After generation completes:
- Animate BFS or A* exploration from start to finish.
- Then highlight the shortest path.

For BFS exploration: start from (0,0), explore neighbors level by level, marking visited cells with a different color (e.g., blue). When finish is reached, trace back the parent pointers to get the path, and highlight the path (e.g., with a thick colored line or cell fill).

Legend: small legend showing colors/styles for start, finish, exploration, solution.

Buttons: "New Maze" and "Replay Solver".

Let me design the layout:
- Canvas centered, maybe 520x340 (25*20=500 + 10 padding, 15*20=300 + 40 padding).
- Legend below the canvas.
- Buttons above or below.

Implementation details:

Maze data structure:
- grid: 2D array of cells. Each cell has walls: {top: true, right: true, bottom: true, left: true}, and visited flag.
- dimensions: cols=25, rows=15.

Generation:
```
function generateMaze() {
    // Initialize
    const visited = Array(rows).fill(null).map(() => Array(cols).fill(false));
    const stack = [];
    const start = {r: 0, c: 0};
    visited[0][0] = true;
    stack.push(start);
    
    while (stack.length > 0) {
        const current = stack[stack.length - 1];
        const neighbors = getUnvisitedNeighbors(current, visited);
        if (neighbors.length === 0) {
            stack.pop();
        } else {
            const next = neighbors[Math.floor(Math.random() * neighbors.length)];
            removeWall(current, next);
            visited[next.r][next.c] = true;
            stack.push(next);
        }
    }
}
```

removeWall: connects two adjacent cells by removing the shared wall.

For animation, we need to yield control back to the render loop. We can use setTimeout or requestAnimationFrame with a generator function.

Let me structure the code:

```html
<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: sans-serif; display: flex; flex-direction: column; align-items: center; margin: 20px; }
  canvas { border: 1px solid #333; }
  .controls { margin: 10px; }
  button { margin: 5px; padding: 8px 16px; cursor: pointer; }
  .legend { margin-top: 10px; display: flex; gap: 15px; font-size: 14px; }
  .legend-item { display: flex; align-items: center; gap: 4px; }
  .start { color: green; }
  .finish { color: red; }
  .explore { color: blue; }
  .solution { color: gold; }
</style>
</head>
<body>
<h2>Maze Generator & Solver</h2>
<canvas id="mazeCanvas"></canvas>
<div class="controls">
  <button id="newMazeBtn">New Maze</button>
  <button id="replayBtn">Replay Solver</button>
</div>
<div class="legend">
  <div class="legend-item"><span style="color:green">● Start</span></div>
  <div class="legend-item"><span style="color:red">● Finish</span></div>
  <div class="legend-item"><span style="color:blue">● Exploring</span></div>
  <div class="legend-item"><span style="color:gold">● Solution Path</span></div>
</div>
<script>
// ... JS code ...
</script>
</body>
</html>
```

Now the JS:

Constants:
- COLS = 25, ROWS = 15
- CELL_SIZE = 20
- CANVAS_WIDTH = COLS * CELL_SIZE = 500
- CANVAS_HEIGHT = ROWS * CELL_SIZE = 300
- Maybe add a 1px border around the whole thing.

Colors:
- Wall: black
- Visited/carved cells: light gray (#d0d0d0)
- Start: green
- Finish: red
- Exploration: blue
- Solution: gold/yellow

Maze representation:
```javascript
const maze = {
    cols: COLS,
    rows: ROWS,
    walls: [], // 2D array of objects: {top, right, bottom, left}
    visited: []
};
```

Cell coordinates: (row, col) where row is y (0 top), col is x (0 left).

Drawing functions:
- drawCell(r, c): fills cell interior with background color based on state.
- drawWalls(): draws all walls.

State for each cell: could be an object like {walls: {top:true,...}, state: 'wall'|'carved'|'path'}

Actually, for the final maze, we want walls only between cells that haven't been connected. In the final maze, all outer boundaries should have walls, and internal walls are removed where passages exist.

Let me define cell states:
- 'wall': cell is still walled off (not yet visited during generation)
- 'carved': cell has been visited and is part of the maze (interior filled)
- 'path': cell is on the solution path

During generation, visited cells get filled with a color (e.g., light gray). Walls between visited cells get removed.

After generation, we clear the visited state and set up the final rendering:
- Outer boundary walls always drawn.
- Internal walls: if both adjacent cells are visited (or part of the final path?), draw wall. Actually, in a perfect maze generated by DFS, every cell is visited, so all internal walls between cells are removed. Wait, in a perfect maze, every cell is reachable, and there's exactly one path between any two cells. That means all walls between cells are removed except those that form the unique path? No, that's not right.

In a maze generated by DFS with wall removal, when you visit a cell, you remove the wall between the current cell and the neighbor you go to. At the end, all cells are visited, and the remaining walls are... actually, in the standard DFS maze generation, you remove the wall between the current cell and the chosen neighbor each time. At the end, the maze has walls everywhere except the passages. Since every cell is visited, all internal walls between adjacent cells have been removed at some point? Not necessarily. Let me think.

Standard DFS maze generation:
- Start at (0,0), mark visited.
- While stack not empty:
  - Look at current cell's neighbors (up, down, left, right) that are within bounds and not visited.
  - If there are unvisited neighbors:
    - Choose one randomly.
    - Remove the wall between current and chosen.
    - Mark chosen as visited.
    - Push chosen onto stack.
  - Else, pop from stack.

At the end, all cells are visited. The walls that remain are the ones that were never removed. Which walls remain? Those that were never the target of a "remove wall" operation. Since we only remove walls when moving to an unvisited neighbor, and we eventually visit all cells, every cell gets connected to the main tree. But does that mean all internal walls are removed?

Consider: when we're at cell A and move to neighbor B, we remove the wall between A and B. This wall is now gone. Later, when we're at B, we might move to C, removing the wall between B and C. The wall between A and B was already removed. So all walls that were ever crossed get removed. Since the DFS tree spans all cells, every edge in the spanning tree has had its wall removed. But what about walls that are not part of the tree? In a grid, each pair of adjacent cells has a potential wall. The DFS tree uses exactly (rows*cols - 1) edges (for a spanning tree). So exactly (rows*cols - 1) walls are removed, and the rest remain.

Wait, but in a grid, each cell has up to 4 neighbors. The total number of potential walls is: horizontal walls: rows * (cols-1), vertical walls: (rows-1) * cols. Total = rows*(cols-1) + (rows-1)*cols. For 25x15: 15*24 + 14*25 = 360 + 350 = 710 walls. The spanning tree has 25*15 - 1 = 374 edges. So 374 walls are removed, 336 remain. These remaining walls are the ones that form the "maze" structure.

So in the final rendered maze, we should draw:
- Outer boundary walls (all of them).
- Internal walls: draw if they still exist (i.e., not removed during generation).

During generation animation, we can show the carving by filling visited cells with a color and removing the appropriate walls.

For the animation, I'll implement a generator function that yields steps. Each step: perform one DFS step (push/pop), update the visual state, then schedule the next frame.

Let me write the code step by step.

First, the setup:

```javascript
const COLS = 25;
const ROWS = 15;
const CELL_SIZE = 20;
const CANVAS_W = COLS * CELL_SIZE;
const CANVAS_H = ROWS * CELL_SIZE;

let maze = null;
let generationComplete = false;
let animationId = null;

// Cell state: each cell has walls and a status
// status: 'unvisited', 'visited', 'path'
```

Data structures:
```javascript
function createMaze() {
    maze = [];
    for (let r = 0; r < ROWS; r++) {
        maze[r] = [];
        for (let c = 0; c < COLS; c++) {
            maze[r][c] = {
                walls: { top: true, right: true, bottom: true, left: true },
                status: 'unvisited' // 'unvisited', 'visited', 'path'
            };
        }
    }
}
```

DFS generation with animation:

I'll make a function `generateStep()` that performs one step of the DFS and returns whether to continue. The main loop runs via `requestAnimationFrame` or setTimeout.

Actually, for smooth animation, I'll use a generator-like approach with a list of steps. But since we need to interleave with the solver animation, let's keep it simple: use a queue of steps.

Let me define the generation steps:

1. Initialize: mark (0,0) as visited, push to stack.
2. Loop:
   - Peek at top of stack.
   - Get unvisited neighbors.
   - If any: pick random, remove wall, mark visited, push to stack.
   - If none: pop stack.

Each iteration is one step. We can animate each step with a small delay (e.g., 5ms).

For the canvas rendering, I'll have a `render()` function that draws everything based on the current maze state.

Rendering:
- Clear canvas.
- Draw cell backgrounds based on status:
  - 'unvisited': dark gray or white? Let's draw unvisited cells as light gray background, visited as slightly darker, path as gold.
  - Actually, for the generation animation, unvisited cells should be visible as the "uncarved" area. Let's use:
    - Unvisited: light gray (#e0e0e0)
    - Visited (carved): slightly darker (#b0b0b0)
    - Path: gold (#ffd700)
  - Start cell: green background.
  - Finish cell: red background.

- Draw walls: for each cell, draw its walls if they exist. For each cell (r,c):
  - If wall exists, draw a line of thickness 1 or 2.
  - Top wall: from (c*CELL_SIZE, r*CELL_SIZE) to ((c+1)*CELL_SIZE, r*CELL_SIZE)
  - Right wall: from ((c+1)*CELL_SIZE, r*CELL_SIZE) to ((c+1)*CELL_SIZE, (r+1)*CELL_SIZE)
  - Bottom wall: from (c*CELL_SIZE, (r+1)*CELL_SIZE) to ((c+1)*CELL_SIZE, (r+1)*CELL_SIZE)
  - Left wall: from (c*CELL_SIZE, r*CELL_SIZE) to (c*CELL_SIZE, (r+1)*CELL_SIZE)

But note: if a wall was removed during generation, don't draw it.

After generation:
- Highlight the solution path: draw a thick line or fill the cells along the path. Let's fill the path cells with gold.

For the solver:
- BFS from start (0,0) to finish (ROWS-1, COLS-1).
- BFS explores open passages (all cells are open in a perfect maze, but we treat all cells as traversable).
- During exploration animation, mark explored cells with blue.
- Once finish is found, trace back the path using parent pointers.
- Highlight the path in gold.

The "Replay Solver" button: after generation is done, clicking it should run the solver on the existing maze (without regenerating). It should animate the exploration and then highlight the path.

"New Maze" cancels the previous animation and generates a fresh maze.

Let me structure the code:

```javascript
// Global state
let maze = null;
let generationComplete = false;
let solving = false;
let explorerPath = []; // cells explored during BFS
let solutionPath = []; // cells in the solution path

// Canvas setup
const canvas = document.getElementById('mazeCanvas');
const ctx = canvas.getContext('2d');

// ... functions ...

function init() {
    createMaze();
    generateMazeAnimation();
}

function createMaze() {
    // ...
}

function generateMazeAnimation() {
    // Reset maze state
    // Start DFS
    const stack = [{r: 0, c: 0}];
    maze[0][0].status = 'visited';
    maze[0][0].walls.left = false; // no wall on left edge? Actually outer walls stay
    // Actually, outer boundary walls should remain. Only internal walls can be removed.
    // For simplicity, keep all outer walls.
    
    // Animation loop
    runGenerationStep();
}

function runGenerationStep() {
    if (!maze || generationComplete) return;
    
    // Perform one DFS step
    const stack = [];
    // ... need to maintain stack across frames
}
```

Hmm, maintaining the stack across animation frames is tricky. Let me use a different approach: pre-compute the entire generation sequence (the order in which cells are visited), then animate by revealing cells in that order. But the wall removal needs to happen in sync with the cell visits.

Alternative: compute the full DFS traversal order first (the order cells are visited), and store the sequence of wall removals. Then animate by stepping through this sequence.

Actually, the simplest approach for a smooth animation:
- Pre-generate the entire maze (compute the full DFS tree).
- Then animate by revealing cells in the order they were visited, and simultaneously removing the appropriate walls.

But the order of wall removal matters for the visual "carving". If we just reveal cells, the walls might look weird because walls between cells that are both visited should be removed.

Let me think about what looks best:
- During generation, we want to see the maze being carved. So we can animate by:
  1. First, draw the full grid of walls (all present).
  2. Then, as the DFS progresses, fill visited cells with a color and remove the walls that have been crossed.

Since the DFS tree is known, we can simulate the animation by iterating through the visited cells in the order they were visited. For each cell in the visit order:
- Fill the cell interior with a color (e.g., light yellow for visited).
- Remove the wall between this cell and the previously visited cell (the one that led to it).

This way, the carving is visible: cells get filled one by one, and walls disappear as they're crossed.

Let me implement a pre-computed generation:

```javascript
function generateMazePrecompute() {
    // Returns an array of {r, c, fromR, fromC} representing the visit order and the wall removal
    // Actually, simpler: just the order of cell visits
    const order = [];
    const stack = [{r: 0, c: 0}];
    maze[0][0].status = 'visited';
    while (stack.length > 0) {
        const current = stack[stack.length - 1];
        const neighbors = getUnvisitedNeighbors(current);
        if (neighbors.length === 0) {
            stack.pop();
        } else {
            const next = neighbors[Math.floor(Math.random() * neighbors.length)];
            removeWallBetween(current, next);
            maze[next.r][next.c].status = 'visited';
            stack.push(next);
            order.push({r: next.r, c: next.c});
        }
    }
    return order;
}
```

Then animation: for each cell in order, fill it and remove the wall. But wait, the first cell (0,0) is visited before the loop. The order array contains cells visited after the initial one.

Actually, let me include the initial cell too. Order: [(0,0), ...]. For each cell in order:
- Fill cell with visited color.
- If it's not the first cell, remove the wall between it and the previous cell in the order.

This simulates the carving: the first cell appears, then the next cell appears and the wall between them disappears, etc.

After generation, draw the final maze: all cells are visited, so all internal walls that were removed should be gone. But wait, in the pre-computed version, we only removed walls along the DFS tree edges. The remaining walls (not on the tree) should still be drawn. So in the final render, we draw all walls that still exist (i.e., not removed).

To track which walls were removed, I can store a set of removed wall positions. Or, I can recompute: for each cell, if the wall to the left exists (not removed) and the cell to the left is visited, draw the left wall. Hmm, this is getting complicated.

Simpler approach for rendering:
- After generation, iterate over all cells and draw walls. For each cell, draw each wall that hasn't been removed.
- To know which walls were removed, I can store a 2D array of booleans for each wall direction, or just recompute the maze state.

Actually, let me take a step back. The goal is a nice visualization. Let me simplify:

1. Generate the maze using DFS, storing the final wall state (which walls exist).
2. For animation, I'll use a generator that yields the state after each step. But generating the full sequence first is fine.

Let me define the maze state more carefully:

Each cell has walls: top, right, bottom, left. Initially all true.
During DFS, when moving from cell A to adjacent cell B:
- Remove the wall between A and B: set the wall on A's side and B's side to false.

After generation, the maze is complete. The walls that remain are the ones that were never removed.

For the animation, I'll precompute the visit order and the wall removals. Then animate step by step.

Let me write the code:

```javascript
const COLS = 25;
const ROWS = 15;
const CELL = 20;

let maze = null;
let genOrder = []; // array of {r, c} in visitation order
let genComplete = false;

function initMaze() {
    maze = [];
    for (let r = 0; r < ROWS; r++) {
        maze[r] = [];
        for (let c = 0; c < COLS; c++) {
            maze[r][c] = {
                walls: { top: true, right: true, bottom: true, left: true },
                status: 'unvisited'
            };
        }
    }
}

function getUnvisitedNeighbors(cell) {
    const { r, c } = cell;
    const neighbors = [];
    // Up
    if (r > 0 && maze[r-1][c].status === 'unvisited') neighbors.push({ r: r-1, c: c, dir: 'top' });
    // Down
    if (r < ROWS-1 && maze[r+1][c].status === 'unvisited') neighbors.push({ r: r+1, c: c, dir: 'bottom' });
    // Left
    if (c > 0 && maze[r][c-1].status === 'unvisited') neighbors.push({ r: r, c: c-1, dir: 'left' });
    // Right
    if (c < COLS-1 && maze[r][c+1].status === 'unvisited') neighbors.push({ r: r, c: c+1, dir: 'right' });
    return neighbors;
}

function removeWallBetween(a, b) {
    const dr = b.r - a.r;
    const dc = b.c - a.c;
    if (dr === -1) { // b is above a
        maze[a.r][a.c].walls.top = false;
        maze[b.r][b.c].walls.bottom = false;
    } else if (dr === 1) {
        maze[a.r][a.c].walls.bottom = false;
        maze[b.r][b.c].walls.top = false;
    } else if (dc === -1) {
        maze[a.r][a.c].walls.left = false;
        maze[b.r][b.c].walls.right = false;
    } else if (dc === 1) {
        maze[a.r][a.c].walls.right = false;
        maze[b.r][b.c].walls.left = false;
    }
}

function generateMazeSequence() {
    // Pre-generate the full DFS sequence
    const stack = [{ r: 0, c: 0 }];
    maze[0][0].status = 'visited';
    genOrder = [];
    
    while (stack.length > 0) {
        const current = stack[stack.length - 1];
        const neighbors = getUnvisitedNeighbors(current);
        if (neighbors.length === 0) {
            stack.pop();
        } else {
            const next = neighbors[Math.floor(Math.random() * neighbors.length)];
            removeWallBetween(current, next);
            maze[next.r][next.c].status = 'visited';
            stack.push(next);
            genOrder.push({ r: next.r, c: next.c });
        }
    }
    // First cell is also part of the maze
    genOrder.unshift({ r: 0, c: 0 });
}
```

Animation loop:
```javascript
let genIndex = 0;

function animateGeneration() {
    if (genIndex >= genOrder.length) {
        genComplete = true;
        return;
    }
    
    const cell = genOrder[genIndex];
    // Render current state
    render();
    
    // Update cell appearance
    // ...
    
    genIndex++;
    setTimeout(animateGeneration, 5); // 5ms per step
}
```

But wait, I need to render the cell appearances correctly. Let me define the rendering:

For each cell (r,c):
- If status is 'unvisited': fill with light gray (#e8e8e8)
- If status is 'visited': fill with slightly darker (#c8c8c8)
- If status is 'path': fill with gold (#ffd700)
- Start cell (0,0): green (#4CAF50)
- Finish cell (ROWS-1, COLS-1): red (#F44336)

But during generation, the start cell should be green from the beginning. And the finish cell is unvisited until the end.

For walls: draw all walls that still exist. For each cell, check each wall direction; if the wall exists, draw it.

However, if I draw walls for every cell, I'll double-draw shared walls. That's fine, just draw them twice (no visual issue).

Actually, to avoid double drawing, I can draw walls per cell but only draw the top and left walls for each cell (plus the bottom wall for the last row and right wall for the last column). But for simplicity, drawing all four walls per cell is okay.

Let me refine the rendering:

```javascript
function render() {
    ctx.clearRect(0, 0, CANVAS_W, CANVAS_H);
    
    // Draw cell backgrounds
    for (let r = 0; r < ROWS; r++) {
        for (let c = 0; c < COLS; c++) {
            const cell = maze[r][c];
            let color;
            if (cell.status === 'unvisited') color = '#e0e0e0';
            else if (cell.status === 'visited') color = '#c8c8c8';
            else if (cell.status === 'path') color = '#ffd700';
            
            // Override start and finish
            if (r === 0 && c === 0) color = '#4CAF50';
            else if (r === ROWS-1 && c === COLS-1) color = '#F44336';
            
            ctx.fillStyle = color;
            ctx.fillRect(c * CELL + 1, r * CELL + 1, CELL - 2, CELL - 2);
        }
    }
    
    // Draw walls
    ctx.strokeStyle = '#333';
    ctx.lineWidth = 1;
    for (let r = 0; r < ROWS; r++) {
        for (let c = 0; c < COLS; c++) {
            const cell = maze[r][c];
            const x = c * CELL;
            const y = r * CELL;
            if (cell.walls.top) {
                ctx.beginPath();
                ctx.moveTo(x, y);
                ctx.lineTo(x + CELL, y);
                ctx.stroke();
            }
            if (cell.walls.right) {
                ctx.beginPath();
                ctx.moveTo(x + CELL, y);
                ctx.lineTo(x + CELL, y + CELL);
                ctx.stroke();
            }
            if (cell.walls.bottom) {
                ctx.beginPath();
                ctx.moveTo(x, y + CELL);
                ctx.lineTo(x + CELL, y + CELL);
                ctx.stroke();
            }
            if (cell.walls.left) {
                ctx.beginPath();
                ctx.moveTo(x, y);
                ctx.lineTo(x, y + CELL);
                ctx.stroke();
            }
        }
    }
}
```

This should work. Now for the solver:

BFS:
```javascript
function solveBFS() {
    const start = { r: 0, c: 0 };
    const finish = { r: ROWS-1, c: COLS-1 };
    
    const visited = Array(ROWS).fill(null).map(() => Array(COLS).fill(false));
    const parent = {};
    const queue = [start];
    visited[start.r][start.c] = true;
    parent[`0,0`] = null;
    
    while (queue.length > 0) {
        const current = queue.shift();
        if (current.r === finish.r && current.c === finish.c) break;
        
        const neighbors = getNeighbors(current);
        for (const next of neighbors) {
            if (!visited[next.r][next.c]) {
                visited[next.r][next.c] = true;
                parent[`${next.r},${next.c}`] = current;
                queue.push(next);
            }
        }
    }
    
    // Trace back path
    const path = [];
    let node = `${finish.r},${finish.c}`;
    while (node !== null) {
        const [r, c] = node.split(',').map(Number);
        path.unshift({ r, c });
        node = parent[node];
    }
    
    return path;
}
```

getNeighbors should return valid neighbors (within bounds), regardless of walls (since all cells are open in a perfect maze).

For the exploration animation:
- Mark explored cells with blue.
- After BFS completes, trace the path and mark with gold.

Now, the UI flow:
- Page loads: generate a maze (animate generation), then automatically start the solver? The requirements say "after generation finishes, animate either BFS or A* exploring the maze, then highlight the complete path." So after generation, the solver should run automatically.

But "New Maze" cancels the previous animation and generates a fresh maze. "Replay Solver" uses the existing maze without changing walls.

So the flow:
1. On load: generate maze (animate), then after generation, run BFS solver animation + path highlight.
2. Click "New Maze": cancel current animation, generate new maze, animate, then solve again.
3. Click "Replay Solver": run BFS solver on current maze (if not already running), animate exploration, highlight path.

Let me handle the state:
- `generationComplete`: boolean
- `solving`: boolean (BFS in progress)
- `explorerPath`: array of cells explored
- `solutionPath`: array of cells in the path

When "New Maze" is clicked:
- Set `generationComplete = false`, `solving = false`, `explorerPath = []`, `solutionPath = []`.
- Call `initMaze()` and `generateMazeSequence()`.
- Start the generation animation.

When "Replay Solver" is clicked:
- If not already solving, run BFS solver, animate exploration, then highlight path.

For the animation timing, I'll use `setTimeout` recursively for generation, and for BFS exploration, similar.

Let me write the complete code now.

Actually, let me reconsider the rendering during generation. The requirement: "animate generation so carving progress is visible." My approach of filling cells in visit order shows the carving. But the walls need to be updated accordingly. Since I'm precomputing the sequence and updating the maze state, the render function will reflect the current state.

One issue: during generation, the start cell should be green. In my genOrder, the first cell is (0,0) which is green. Good.

Also, the finish cell is unvisited until the end. Should it be shown as red only at the end? Yes, that's fine.

Now, let me think about the wall drawing during generation. When a cell is unvisited, its walls are all drawn. When it becomes visited, the wall to the parent is removed. This creates the visual effect of the maze being carved.

After generation, all cells are visited. The walls that remain are the ones not on the DFS tree. The render function draws all remaining walls, which will look like the maze.

Let me also add a legend explaining the colors.

Now, let me write the full HTML file.

I'll structure it like this:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Maze Generator & Solver</title>
<style>
  body { font-family: Arial, sans-serif; text-align: center; margin: 0; padding: 20px; background: #f5f5f5; }
  canvas { border: 2px solid #333; border-radius: 4px; background: #fff; }
  .controls { margin: 10px 0; }
  button { padding: 10px 20px; margin: 5px; font-size: 14px; cursor: pointer; border: 1px solid #333; background: #fff; }
  button:hover { background: #ddd; }
  .legend { margin: 10px 0; display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
  .legend-item { display: flex; align-items: center; gap: 6px; font-size: 13px; }
  .legend-color { width: 16px; height: 16px; border-radius: 3px; }
</style>
</head>
<body>
<h1>Maze Generator & Solver</h1>
<canvas id="mazeCanvas"></canvas>
<div class="controls">
  <button id="newMazeBtn">New Maze</button>
  <button id="replayBtn">Replay Solver</button>
</div>
<div class="legend">
  <div class="legend-item"><div class="legend-color" style="background:#4CAF50"></div> Start</div>
  <div class="legend-item"><div class="legend-color" style="background:#F44336"></div> Finish</div>
  <div class="legend-item"><div class="legend-color" style="background:#2196F3"></div> Exploration</div>
  <div class="legend-item"><div class="legend-color" style="background:#FFC107"></div> Solution Path</div>
</div>
<script>
// ... JavaScript ...
</script>
</body>
</html>
```

Now the JavaScript. Let me write it carefully.

```javascript
const COLS = 25;
const ROWS = 15;
const CELL = 20;
const CANVAS_W = COLS * CELL;
const CANVAS_H = ROWS * CELL;

let maze = null;
let genOrder = [];
let genIndex = 0;
let genComplete = false;
let solving = false;
let explorerPath = [];
let solutionPath = [];

const canvas = document.getElementById('mazeCanvas');
const ctx = canvas.getContext('2d');
canvas.width = CANVAS_W;
canvas.height = CANVAS_H;

function initMaze() {
    maze = [];
    for (let r = 0; r < ROWS; r++) {
        maze[r] = [];
        for (let c = 0; c < COLS; c++) {
            maze[r][c] = {
                walls: { top: true, right: true, bottom: true, left: true },
                status: 'unvisited'
            };
        }
    }
}

function getUnvisitedNeighbors(cell) {
    const { r, c } = cell;
    const neighbors = [];
    if (r > 0 && maze[r-1][c].status === 'unvisited') neighbors.push({ r: r-1, c: c });
    if (r < ROWS-1 && maze[r+1][c].status === '

We need to create a complete maze generator and solver visualization in a single index.html file. Let me plan the requirements:

1. Generate a 25x15 cell rectangular maze using randomized recursive backtracking (Recursive Backtracking / DFS maze generation)
2. All cells reachable, exactly one simple path between any pair of cells
3. Upper-left cell = Start, lower-right cell = Finish
4. Draw cell walls clearly, animate generation so carving progress is visible
5. After generation finishes, animate either BFS or A* exploring the maze, then highlight the complete path from Start to Finish
6. Path must cross only open passages
7. "New Maze" button cancels previous animation and generates fresh maze
8. "Replay Solver" uses existing maze without changing walls
9. Mark start, finish, exploration, and solution with distinguishable styles and a short legend

I'll write this as a single HTML file with inline CSS and JS.

Let me design the maze:
- Grid: 25 columns (width) x 15 rows (height)
- Each cell has walls: top, right, bottom, left
- Randomized recursive backtracking (DFS):
  - Start at (0,0)
  - Keep a stack
  - Visit unvisited neighbors, carve passage
  - Backtrack when no unvisited neighbors
- After generation, mark start (0,0) and finish (24,14)

For visualization:
- Canvas-based rendering
- Cell size: let's say 20px
- Maze dimensions: 25x15 = 500px wide, 300px tall
- Add some padding

Animation:
- Generation phase: show carving progress. Use setTimeout or requestAnimationFrame to reveal walls progressively.
- One approach: during generation, draw the maze with walls, but gradually "carve" by revealing cells. Or draw the maze with walls, and animate by showing the current frontier.

Actually, for a good visual, I can do this:
- Phase 1: Generate maze with animation. Show the maze being carved. For example, at each step, reveal the current cell's interior and maybe the wall between it and the next cell.
- Simpler approach: Draw all walls initially, then during generation, "remove" walls as they're carved. But that's complex.

Alternative simpler animation:
- Pre-generate the entire maze first (deterministically), then animate the generation by revealing cells in the order they were carved. This way we can show the carving process: start with an empty grid, then reveal cells one by one in the order of the DFS traversal.

Actually, the requirement says "animate generation so carving progress is visible." So I should animate the carving. Let me think about how to do this cleanly:

Option A: Pre-compute the full maze, then animate by revealing cells in DFS order. The maze is fully generated but cells are hidden until their turn in the traversal. This shows the "carving" order.

Option B: During generation, draw walls and gradually remove them. This is more complex but looks cool.

I'll go with Option A for reliability: pre-generate the maze, store the traversal order, then animate revealing cells in that order. This clearly shows carving progress.

For the solver:
- BFS or A*: BFS is simpler. Let's use BFS.
- Start from (0,0), find shortest path to (24,14)
- Animate the exploration: show visited cells (exploration steps) as they're discovered
- Then highlight the final path

Legend:
- Start: green circle/label
- Finish: red circle/label
- Exploration: blue
- Solution path: yellow/orange

Let me structure the code:

HTML structure:
- Canvas element (full size)
- Legend panel
- Buttons: New Maze, Replay Solver
- Legend text

CSS:
- Styling for buttons, legend, canvas layout

JS:
- Maze data structures
- RNG
- Recursive backtracking algorithm
- BFS solver
- Animation loop using requestAnimationFrame or setTimeout

Let me write the code.

Maze representation:
- `cells[row][col]` = { walls: {top, right, bottom, left}, visited: false }
- Actually, for generation, I'll use a grid of cells with wall states.

Algorithm for randomized recursive backtracking:
```
function generateMaze() {
  const rows = 15, cols = 25;
  // Initialize all walls
  for (let r = 0; r < rows; r++) {
    for (let c = 0; c < cols; c++) {
      cells[r][c] = { walls: [true, true, true, true], visited: false };
    }
  }
  
  const stack = [];
  const start = {r: 0, c: 0};
  cells[0][0].visited = true;
  stack.push(start);
  
  while (stack.length > 0) {
    const current = stack[stack.length - 1];
    const neighbors = getUnvisitedNeighbors(current.r, current.c);
    if (neighbors.length > 0) {
      const next = neighbors[Math.floor(Math.random() * neighbors.length)];
      carvePassage(current, next);
      cells[next.r][next.c].visited = true;
      stack.push(next);
    } else {
      stack.pop();
    }
  }
}
```

`carvePassage(current, next)`:
- Remove wall between current and next
- If next is above: remove top wall of next and bottom wall of current
- If next is below: remove bottom wall of next and top wall of current
- If next is left: remove left wall of next and right wall of current
- If next is right: remove right wall of next and left wall of current

`getUnvisitedNeighbors(r, c)`:
- Check up (r-1,c), down (r+1,c), left (r,c-1), right (r,c+1) — within bounds and not visited

Traversal order for animation:
- Store the order in which cells are visited during generation (the DFS order). This is the "carving order."
- When generating, record each cell as it gets visited.

For the animation:
- I'll have a `generationIndex` that goes from 0 to totalCells-1
- At each animation frame, reveal the cell at `generationIndex`
- Also reveal the walls between revealed cells? That's tricky.

Simpler: just reveal the cell interiors. The walls can be drawn all at once, but the cells themselves become visible. Hmm, but the walls should be visible too.

Better approach for visual clarity:
- Draw the full maze with all walls initially (solid black lines)
- Then during generation, "carve" by drawing the cell interiors as they're visited
- Actually, let me keep it simple: draw the maze with walls, and animate by revealing the cell interiors (fill color) in the order of visitation. The walls remain visible as borders.

So the canvas will show:
- Background: dark background
- Walls: white/gray lines
- Cell interiors: initially invisible (or black), then filled with colors based on state:
  - Not yet visited: dark (wall color)
  - Visited during generation: light gray
  - Explored during BFS: light blue
  - Solution path: yellow

Let me define cell states:
- 0: unvisited (not yet carved) — draw as wall color
- 1: visited during generation — draw as light gray
- 2: explored during BFS — draw as light blue
- 3: part of solution path — draw as yellow

Actually, for the generation animation, I want to show the "carving" — the walls being removed. Let me think about what looks best:

Option: Draw the maze with all walls as thick lines. During generation, fill in the cell interiors of visited cells with a lighter color. This creates a nice effect where the maze "opens up" as cells are visited.

For the BFS animation:
- Start from (0,0), explore neighbors through open passages (cells that are part of the maze — all cells are part of the maze since it's a perfect maze)
- Actually, in a perfect maze, all cells are connected. The BFS explores all reachable cells. The "exploration" is showing the BFS frontier expanding.
- Then highlight the shortest path.

Let me implement:

States per cell during rendering:
- `state`: 'unvisited' | 'visited' | 'explored' | 'onPath'

Colors:
- unvisited: #2a2a2a (dark)
- visited: #3a3a3a (medium gray)
- explored: #4a90d9 (blue)
- onPath: #f2a900 (yellow/orange)

Start cell: green border or label
Finish cell: red border or label

Legend:
- Green: Start (0,0)
- Red: Finish (24,14)
- Blue: BFS exploration
- Yellow: Solution path

Now, let me code this up.

Canvas size: Let's make it responsive. Cell size 24px. Maze: 25*24 = 600px wide, 15*24 = 360px tall. Plus some padding.

Total canvas: maybe 620x380 with padding.

Let me write the complete HTML file.

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Maze Generator & Solver</title>
<style>
  /* CSS */
</style>
</head>
<body>
  <!-- Content -->
  <script>
    // JS
  </script>
</body>
</html>
```

Let me flesh out the JavaScript:

```javascript
const COLS = 25;
const ROWS = 15;
const CELL_SIZE = 24;

// Cell structure
let cells = [];
let generationOrder = []; // array of {r, c} in visitation order
let generationComplete = false;

function initCells() {
  cells = [];
  for (let r = 0; r < ROWS; r++) {
    cells[r] = [];
    for (let c = 0; c < COLS; c++) {
      cells[r][c] = {
        walls: { top: true, right: true, bottom: true, left: true },
        visited: false,
        state: 'unvisited', // unvisited | visited | explored | onPath
        parent: null // for BFS
      };
    }
  }
}

function getUnvisitedNeighbors(r, c) {
  const neighbors = [];
  const dirs = [
    [-1, 0, 'top', 'bottom'], // up
    [1, 0, 'bottom', 'top'], // down
    [0, -1, 'left', 'right'], // left
    [0, 1, 'right', 'left'] // right
  ];
  for (const [dr, dc, wall1, wall2] of dirs) {
    const nr = r + dr;
    const nc = c + dc;
    if (nr >= 0 && nr < ROWS && nc >= 0 && nc < COLS && !cells[nr][nc].visited) {
      neighbors.push({ r: nr, c: nc, wall1, wall2 });
    }
  }
  return neighbors;
}

function carvePassage(current, next) {
  const { wall1, wall2 } = next;
  if (wall1 === 'top') {
    cells[current.r][current.c].walls.top = false;
    cells[next.r][next.c].walls.top = false;
  }
  if (wall1 === 'bottom') {
    cells[current.r][current.c].walls.bottom = false;
    cells[next.r][next.c].walls.bottom = false;
  }
  if (wall1 === 'left') {
    cells[current.r][current.c].walls.left = false;
    cells[next.r][next.c].walls.left = false;
  }
  if (wall1 === 'right') {
    cells[current.r][current.c].walls.right = false;
    cells[next.r][next.c].walls.right = false;
  }
}

function randomRecursiveBacktracking() {
  initCells();
  const stack = [];
  const start = { r: 0, c: 0 };
  cells[0][0].visited = true;
  stack.push(start);
  generationOrder = [{ r: 0, c: 0 }];
  
  while (stack.length > 0) {
    const current = stack[stack.length - 1];
    const neighbors = getUnvisitedNeighbors(current.r, current.c);
    if (neighbors.length > 0) {
      const next = neighbors[Math.floor(Math.random() * neighbors.length)];
      carvePassage(current, next);
      cells[next.r][next.c].visited = true;
      stack.push(next);
      generationOrder.push({ r: next.r, c: next.c });
    } else {
      stack.pop();
    }
  }
  
  // Reset states for rendering
  for (let r = 0; r < ROWS; r++) {
    for (let c = 0; c < COLS; c++) {
      cells[r][c].state = 'unvisited';
    }
  }
  
  // Now simulate the carving animation: reveal cells in generation order
  // We'll handle this in the animation loop
}

// BFS solver
function bfs() {
  const start = { r: 0, c: 0 };
  const finish = { r: ROWS - 1, c: COLS - 1 };
  const queue = [start];
  const visited = Array.from({ length: ROWS }, () => Array(COLS).fill(false));
  const parent = {};
  const startKey = `0,0`;
  visited[0][0] = true;
  parent[startKey] = null;
  
  while (queue.length > 0) {
    const current = queue.shift();
    const cr = current.r, cc = current.c;
    
    if (cr === finish.r && cc === finish.c) {
      // Reconstruct path
      const path = [];
      let key = `${cr},${cc}`;
      while (key) {
        const [r, c] = key.split(',').map(Number);
        path.unshift({ r, c });
        key = parent[key] ? `${r},${c}` : null;
      }
      return path;
    }
    
    // Explore neighbors through open passages
    const dirs = [
      [-1, 0], [1, 0], [0, -1], [0, 1]
    ];
    for (const [dr, dc] of dirs) {
      const nr = cr + dr;
      const nc = cc + dc;
      if (nr >= 0 && nr < ROWs && nc >= 0 && nc < COLS && !visited[nr][nc]) {
        // Check if there's a wall blocking
        // Actually, in our maze representation, walls are between cells
        // A cell can be entered from any direction if the corresponding wall is removed
        // For simplicity, since it's a perfect maze, all adjacent cells are connected via some path
        // But we need to check the actual wall
        const cell = cells[nr][nc];
        let canEnter = false;
        if (dr === -1) canEnter = !cell.walls.top;
        if (dr === 1) canEnter = !cell.walls.bottom;
        if (dc === -1) canEnter = !cell.walls.left;
        if (dc === 1) canEnter = !cell.walls.right;
        
        if (canEnter && !visited[nr][nc]) {
          visited[nr][nc] = true;
          const key = `${nr},${nc}`;
          parent[key] = `${cr},${cc}`;
          queue.push({ r: nr, c: nc });
        }
      }
    }
  }
  return null;
}

// Rendering
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // Draw walls
  ctx.strokeStyle = '#333';
  ctx.lineWidth = 2;
  for (let r = 0; r < ROWS; r++) {
    for (let c = 0; c < COLS; c++) {
      const x = c * CELL_SIZE;
      const y = r * CELL_SIZE;
      const cell = cells[r][c];
      
      if (cell.state === 'unvisited') {
        // Draw as wall (filled rectangle)
        ctx.fillStyle = '#1a1a1a';
        ctx.fillRect(x, y, CELL_SIZE, CELL_SIZE);
      } else if (cell.state === 'visited') {
        ctx.fillStyle = '#3a3a3a';
        ctx.fillRect(x, y, CELL_SIZE, CELL_SIZE);
      } else if (cell.state === 'explored') {
        ctx.fillStyle = '#4a90d9';
        ctx.fillRect(x, y, CELL_SIZE, CELL_SIZE);
      } else if (cell.state === 'onPath') {
        ctx.fillStyle = '#f2a900';
        ctx.fillRect(x, y, CELL_SIZE, CELL_SIZE);
      }
    }
  }
  
  // Draw walls as lines on top
  ctx.strokeStyle = '#555';
  ctx.lineWidth = 1;
  for (let r = 0; let c = 0; c < COLS; c++) {
    // ...
  }
}
```

Hmm, the wall drawing is getting complicated. Let me simplify: instead of filling cells with different colors, I'll draw the maze with walls as lines, and use cell interiors for state coloring.

Actually, a cleaner approach:
1. Draw the maze grid with walls as lines
2. For each cell, fill its interior based on state:
   - unvisited: dark (same as wall color)
   - visited: medium gray
   - explored: blue
   - onPath: yellow

But the walls should be visible. So:
- First draw all walls as lines (stroke)
- Then fill cell interiors

This way, the walls are always visible, and the cell colors show the state.

Let me restructure:

```javascript
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // Draw walls
  ctx.strokeStyle = '#444';
  ctx.lineWidth = 2;
  for (let r = 0; r <= ROWS; r++) {
    for (let c = 0; c <= COLS; c++) {
      const x = c * CELL_SIZE;
      const y = r * CELL_SIZE;
      if (r === 0 || r === ROWS || c === 0 || c === COLS) {
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.lineTo(x, y + ROWS * CELL_SIZE);
        ctx.lineTo(c * CELL_SIZE, y + ROWS * CELL_SIZE);
        ctx.lineTo(c * CELL_SIZE, y);
        ctx.closePath();
        ctx.fillStyle = '#1a1a1a';
        ctx.fill();
      }
    }
  }
  // ... this is getting messy
}
```

Actually, the standard way to draw a grid maze with walls is:
- For each cell, draw its four walls as line segments
- Or draw the outer border and then inner walls

Let me use a simpler approach: draw the maze as a grid of cells, where each cell has a background color representing its state, and draw walls as thin lines between cells.

```javascript
// Draw cell backgrounds
for (let r = 0; r < ROWS; r++) {
  for (let c = 0; c < COLS; c++) {
    const x = c * CELL_SIZE;
    const y = r * CELL_SIZE;
    const state = cells[r][c].state;
    switch(state) {
      case 'unvisited': ctx.fillStyle = '#1a1a1a'; break;
      case 'visited': ctx.fillStyle = '#3a3a3a'; break;
      case 'explored': ctx.fillStyle = '#4a90d9'; break;
      case 'onPath': ctx.fillStyle = '#f2a900'; break;
    }
    ctx.fillRect(x, y, CELL_SIZE, CELL_SIZE);
  }
}

// Draw walls
ctx.strokeStyle = '#555';
ctx.lineWidth = 2;
for (let r = 0; r < ROWS; r++) {
  for (let c = 0; c < COLS; c++) {
    const x = c * CELL_SIZE;
    const y = r * CELL_SIZE;
    const cell = cells[r][c];
    if (cell.walls.top) {
      ctx.beginPath();
      ctx.moveTo(x, y);
      ctx.lineTo(x + CELL_SIZE, y);
      ctx.stroke();
    }
    if (cell.walls.right) {
      ctx.beginPath();
      ctx.moveTo(x + CELL_SIZE, y);
      ctx.lineTo(x + CELL_SIZE, y + CELL_SIZE);
      ctx.stroke();
    }
    if (cell.walls.bottom) {
      ctx.beginPath();
      ctx.moveTo(x, y + CELL_SIZE);
      ctx.lineTo(x + CELL_SIZE, y + CELL_SIZE);
      ctx.stroke();
    }
    if (cell.walls.left) {
      ctx.beginPath();
      ctx.moveTo(x, y);
      ctx.lineTo(x, y + CELL_SIZE);
      ctx.stroke();
    }
  }
}
```

This should work. The walls are drawn on top of the cell backgrounds, creating a clear maze visualization.

Now, the animation flow:

1. Click "New Maze" or page load → generate maze
2. During generation: cells are revealed in DFS order. Initially all cells are invisible (or dark like unvisited). As the generation progresses, cells are revealed (state changes to 'visited').
3. After generation completes: animate BFS exploration. Cells become 'explored' one by one in BFS order.
4. Then highlight the solution path: cells become 'onPath'.

Animation timing:
- Generation: ~50ms per cell (25*15=375 cells) → about 19 seconds. That's too long. Let me speed it up: 10ms per cell → 3.75 seconds. Or use requestAnimationFrame with a delay.
- BFS exploration: similar speed
- Path highlighting: quick

Let me use setTimeout for sequential steps, or a simple animation loop with requestAnimationFrame.

Actually, for a smooth animation, I'll use a step counter and update every 20ms.

State machine:
- `phase`: 'idle' | 'generating' | 'exploring' | 'solving'
- `genIndex`: current index in generationOrder (0 to totalCells-1)
- `exploreIndex`: current index in bfsPath (0 to path.length-1)

During generation:
- If genIndex < generationOrder.length: set cells[genIndex.r][genIndex.c].state = 'visited', increment genIndex
- Otherwise, generation is complete

After generation:
- Switch to 'exploring' phase
- Animate BFS: reveal cells in BFS order one by one
- Then switch to 'solving' phase
- Highlight the path

Let me implement BFS that returns the path, and also store the BFS order (the order cells are dequeued).

```javascript
function bfs() {
  const start = { r: 0, c: 0 };
  const finish = { r: ROWS - 1, c: COLS - 1 };
  const queue = [start];
  const visited = Array.from({ length: ROWS }, () => Array(COLS).fill(false));
  const parent = {};
  visited[0][0] = true;
  
  const bfsOrder = [{ r: 0, c: 0 }];
  
  while (queue.length > 0) {
    const current = queue.shift();
    const cr = current.r, cc = current.c;
    
    if (cr === finish.r && cc === finish.c) {
      // Reconstruct path
      const path = [];
      let key = `${cr},${cc}`;
      while (key) {
        const [r, c] = key.split(',').map(Number);
        path.unshift({ r, c });
        key = parent[key] ? `${r},${c}` : null;
      }
      return { path, order: bfsOrder };
    }
    
    const dirs = [[-1,0],[1,0],[0,-1],[0,1]];
    for (const [dr, dc] of dirs) {
      const nr = cr + dr;
      const nc = cc + dc;
      if (nr >= 0 && nr < ROWS && nc >= 0 && nc < COLS && !visited[nr][nc]) {
        const cell = cells[nr][nc];
        let canEnter = false;
        if (dr === -1) canEnter = !cell.walls.top;
        if (dr === 1) canEnter = !cell.walls.bottom;
        if (dc === -1) canEnter = !cell.walls.left;
        if (dc === 1) canEnter = !cell.walls.right;
        if (canEnter && !visited[nr][nc]) {
          visited[nr][nc] = true;
          parent[`${nr},${nc}`] = `${cr},${cc}`;
          queue.push({ r: nr, c: nc });
          bfsOrder.push({ r: nr, c: nc });
        }
      }
    }
  }
  return { path: [], order: bfsOrder };
}
```

Wait, I'm pushing to bfsOrder inside the loop, but the start is already in the order. Let me fix: bfsOrder starts with [{r:0,c:0}], and each new cell added when discovered.

Now, the animation:

```javascript
let phase = 'idle'; // idle, generating, exploring, solving
let genIndex = 0;
let exploreIndex = 0;
let solutionPath = [];

function startGeneration() {
  phase = 'generating';
  genIndex = 0;
  // Reset all cells to unvisited
  for (let r = 0; r < ROWS; r++) {
    for (let c = 0; c < COLS; c++) {
      cells[r][c].state = 'unvisited';
      cells[r][c].walls = { top: true, right: true, bottom: true, left: true };
    }
  }
  // Run generation
  generateMaze(); // fills generationOrder
  // Start animation
  animateGeneration();
}

function animateGeneration() {
  if (phase !== 'generating' || genIndex >= generationOrder.length) {
    phase = 'exploring';
    return;
  }
  const cell = cells[generationOrder[genIndex]];
  cell.state = 'visited';
  genIndex++;
  requestAnimationFrame(animateGeneration);
}
```

Hmm, but `generateMaze` needs to be called before the animation starts. Let me restructure:

```javascript
function runGeneration() {
  // Reset cells
  initCellsWithWalls();
  generateMaze(); // fills generationOrder
  phase = 'generating';
  genIndex = 0;
  animateGeneration();
}
```

And in `animateGeneration`, after setting state, check if done, then switch phase.

For exploration:
```javascript
function animateExploration() {
  if (phase !== 'exploring' || exploreIndex >= solutionPath.length) {
    phase = 'solving';
    return;
  }
  // Highlight explored cells
  // Actually, exploration cells should be shown as blue
  // We need to track which cells have been explored
  // Let's use a separate set or mark cells as 'explored'
  // ...
  exploreIndex++;
  requestAnimationFrame(animateExploration);
}
```

Wait, the BFS path should be computed first, then animated. Let me compute the BFS path after generation completes, then animate the exploration along the path.

Actually, the requirement says "animate either BFS or A-star exploring the maze, then highlight the complete path from Start to Finish."

So:
1. Generate maze (animation)
2. Compute BFS path
3. Animate exploration (show BFS visiting cells)
4. Highlight the solution path

For exploration, I can animate by revealing cells along the BFS path one by one (in order). Or I can animate BFS search by revealing all reachable cells. Since it's a perfect maze, BFS will visit all cells. Let me animate by revealing cells in BFS order.

Let me simplify: after generation, compute BFS path. Then:
- Phase 'exploring': reveal cells in BFS order (all cells that BFS visits, i.e., all cells since it's a perfect maze)
- Phase 'solving': highlight the solution path cells

Actually, for a better visual, exploration should show the BFS frontier. But for simplicity, I'll animate by revealing cells in BFS discovery order.

Let me adjust:
- `bfsOrder`: the order cells are discovered by BFS (including start)
- `solutionPath`: the shortest path from start to finish

In the 'exploring' phase, reveal cells in `bfsOrder` one by one (set state to 'explored')
In the 'solving' phase, set those cells in `solutionPath` to 'onPath'

Now, the rendering needs to handle all states. Let me make sure the colors are distinct:
- unvisited: #1a1a1a (dark)
- visited: #3a3a3a (medium gray)
- explored: #4a90d9 (blue)
- onPath: #f2a900 (yellow)

And the walls are drawn on top.

Legend:
- Green: Start (0,0)
- Red: Finish (24,14)
- Blue: BFS exploration
- Yellow: Solution path

I'll add labels on the canvas or in a legend panel.

Let me now write the complete HTML file.

Canvas size: Let me calculate. 25 columns * 24px = 600px. 15 rows * 24px = 360px. Plus some padding. Let me make the canvas 620x380 and center it.

Actually, let me make it responsive. I'll set the canvas to a fixed size that fits well: 620x380.

Layout:
- Header with title
- Canvas
- Legend panel
- Controls (New Maze, Replay Solver)

Let me write the code now.

One more thing: the "New Maze" button should cancel the previous animation and generate a fresh maze. "Replay Solver" should use the existing maze without changing walls.

So:
- New Maze: reset everything, generate new maze, start generation animation
- Replay Solver: run BFS on current maze, animate exploration, highlight path (without regenerating walls)

OK, let me write the complete file.

Actually, let me reconsider the animation speed. 375 cells at 10ms each = 3.75 seconds. That's reasonable. BFS exploration: same. Total generation + exploration: about 7.5 seconds. Acceptable.

Let me also add a status indicator showing current phase.

Here's my plan for the complete file:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Maze Generator & Solver</title>
<style>
  body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background: #222; color: #eee; }
  h1 { text-align: center; }
  .container { max-width: 700px; margin: 0 auto; }
  canvas { display: block; margin: 0 auto; border: 2px solid #444; border-radius: 4px; }
  .controls { text-align: center; margin: 15px 0; }
  button { padding: 10px 20px; margin: 0 10px; font-size: 16px; cursor: pointer; border: none; border-radius: 4px; }
  #newMazeBtn { background: #4a90d9; color: white; }
  #replayBtn { background: #f2a900; color: #222; }
  #status { text-align: center; margin: 10px 0; font-size: 18px; }
  .legend { background: #2a2a2a; padding: 15px; border-radius: 8px; margin-top: 10px; }
  .legend-item { margin: 5px 0; display: flex; align-items: center; gap: 8px; }
  .swatch { width: 16px; height: 16px; border-radius: 3px; }
  .start-swatch { background: #30d158; }
  .finish-swatch { background: #ff4d4d; }
  .explore-swatch { background: #4a90d9; }
  .path-swatch { background: #f2a900; }
</style>
</head>
<body>
<h1>Maze Generator & Solver</h1>
<div class="container">
  <canvas id="mazeCanvas"></canvas>
  <div class="controls">
    <button id="newMazeBtn">New Maze</button>
    <button id="replayBtn">Replay Solver</button>
  </div>
  <div id="status">Generation in progress...</div>
  <div class="legend">
    <div class="legend-item"><span class="swatch start-swatch"></span> Start (0,0)</div>
    <div class="legend-item"><span class="swatch finish-swatch"></span> Finish (24,14)</div>
    <div class="legend-item"><span class="swatch explore-swatch"></span> BFS Exploration</div>
    <div class="legend-item"><span class="swatch path-swatch"></span> Solution Path</div>
  </div>
</div>
<script>
// ... JS code ...
</script>
</body>
</html>
```

Now the JavaScript. Let me write it carefully.

```javascript
const COLS = 25;
const ROWS = 15;
const CELL_SIZE = 24;
const CANVAS_WIDTH = COLS * CELL_SIZE;
const CANVAS_HEIGHT = ROWS * CELL_SIZE;

const canvas = document.getElementById('mazeCanvas');
const ctx = canvas.getContext('2d');

let cells = [];
let generationOrder = [];
let phase = 'idle'; // idle, generating, exploring, solving
let genIndex = 0;
let exploreIndex = 0;
let solutionPath = [];
let bfsOrder = [];

function initCells() {
  cells = [];
  for (let r = 0; r < ROWS; r++) {
    cells[r] = [];
    for (let c = 0; c < COLS; c++) {
      cells[r][c] = {
        walls: { top: true, right: true, bottom: true, left: true },
        state: 'unvisited'
      };
    }
  }
}

function getUnvisitedNeighbors(r, c) {
  const neighbors = [];
  const dirs = [
    [-1, 0, 'top', 'bottom'],
    [1, 0, 'bottom', 'top'],
    [0, -1, 'left', 'right'],
    [0, 1, 'right', 'left']
  ];
  for (const [dr, dc, w1, w2] of dirs) {
    const nr = r + dr;
    const nc = c + dc;
    if (nr >= 0 && nr < ROWS && nc >= 0 && nc < COLS && !cells[nr][nc].visited) {
      neighbors.push({ r: nr, c: nc, wall1: w1, wall2: w2 });
    }
  }
  return neighbors;
}

function carvePassage(current, next) {
  const { wall1, wall2 } = next;
  if (wall1 === 'top') {
    cells[current.r][current.c].walls.top = false;
    cells[next.r][next.c].walls.top = false;
  }
  if (wall1 === 'bottom') {
    cells[current.r][current.c].walls.bottom = false;
    cells[next.r][next.c].walls.bottom = false;
  }
  if (wall1 === 'left') {
    cells[current.r][current.c].walls.left = false;
    cells[next.r][next.c].walls.left = false;
  }
  if (wall1 === 'right') {
    cells[current.r][current.c].walls.right = false;
    cells[next.r][next.c].walls.right = false;
  }
}

function generateMaze() {
  initCells();
  const stack = [];
  const start = { r: 0, c: 0 };
  cells[0][0].visited = true;
  stack.push(start);
  generationOrder = [{ r: 0, c: 0 }];
  
  while (stack.length > 0) {
    const current = stack[stack.length - 1];
    const neighbors = getUnvisitedNeighbors(current.r, current.c);
    if (neighbors.length > 0) {
      const next = neighbors[Math.floor(Math.random() * neighbors.length)];
      carvePassage(current, next);
      cells[next.r][next.c].visited = true;
      stack.push(next);
      generationOrder.push({ r: next.r, c: next.c });
    } else {
      stack.pop();
    }
  }
}

function bfs() {
  const start = { r: