oneshotlm
Compare all models on this prompt →

Maze generator & solver · qwen3-235b-a22b-thinking-2507

Generate a random maze with the recursive-backtracker algorithm on a canvas, then animate an A-star or BFS solver finding the path from start to finish.

⛨ sandboxed Open in new tab ↗
transcript · 4 messages
user

Generate a random maze with the recursive-backtracker algorithm on a canvas, then animate an A-star or BFS solver finding the path from start to finish.

assistant
thinking
Okay, I need to create a single-page web app that generates a random maze using the recursive backtracker algorithm and then animates a solver using A* or BFS. All in one index.html file with inline CSS and JS, no external resources.

First, let's outline the structure. The HTML will have a canvas element. The CSS will style the canvas and maybe the body. The JS will handle maze generation and solving.

For the recursive backtracker algorithm: I need to set up a grid, mark cells as visited, and carve paths by removing walls between cells. The standard approach uses a stack to backtrack when stuck.

Then, for the solver, A* might be better for animation since it's more efficient. I'll need to implement the A* algorithm with a priority queue, using Manhattan distance as the heuristic.

The animation part: after generating the maze, the solver should step through each node, highlighting the path as it goes. Using requestAnimationFrame for smooth animation.

Wait, all in one file. So the index.html will have <style> and <script> tags.

Let me start with the HTML structure. Basic setup:

<!DOCTYPE html>
<html>
<head>
  <title>Maze Solver</title>
  <style>
    body { ... }
    canvas { ... }
  </style>
</head>
<body>
  <canvas id="mazeCanvas"></canvas>
  <script>
    // JS code here
  </script>
</body>
</html>

Now, the JS part. First, set up the canvas. Let's say 600x600 pixels. The maze grid can be 20x20 cells, each cell 30x30 pixels.

For the recursive backtracker:

- Create a 2D array for the grid, each cell has walls (top, right, bottom, left).
- Start at a random cell, mark as visited, push to stack.
- While stack not empty:
  - Check neighbors (up, down, left, right) that are unvisited.
  - If any, choose one randomly, remove the wall between current and chosen, push to stack, mark as visited.
  - If none, pop from stack (backtrack).

Need to represent walls. Each cell can have an object with top, right, bottom, left booleans.

Then, for the solver. Let's go with BFS for simplicity, though A* is also doable. BFS will explore all nodes level by level. For animation, we can step through each node in the queue, highlighting the current node being processed.

Wait, but BFS isn't optimal in terms of path length, but it's straightforward. A* would find the shortest path. Maybe A* is better for the demo.

Implementing A*:

- Open set (priority queue) starts with start node.
- Each node has g (cost from start), h (heuristic to end), f = g + h.
- Closed set for visited nodes.
- For each step, pick node with lowest f from open set.
- If it's the end, reconstruct path.
- Else, for each neighbor, calculate tentative g, update if better.

For the animation, we need to step through each iteration of the algorithm, updating the canvas each frame to show the current state (visited nodes, current path being explored).

So the JS will have:

- Maze generation using recursive backtracker, then draw the maze.
- Once maze is generated, start the solver animation.

Need to handle the animation loop. Maybe use a generator function for the solver steps, then in requestAnimationFrame, process a few steps per frame to make it visible.

Wait, but to keep it simple, maybe have a step function that processes one step of the solver each animation frame.

Let me outline the JS steps:

1. Initialize canvas and context.
2. Define grid size (cols, rows), cell size.
3. Generate maze using recursive backtracker.
4. Draw the maze (walls).
5. Run solver (A*), step by step, drawing each step.

For the maze generation:

function generateMaze() {
  let grid = createGrid();
  let stack = [];
  let current = {x: 0, y: 0};
  grid[current.y][current.x].visited = true;
  stack.push(current);

  while (stack.length > 0) {
    let neighbors = getUnvisitedNeighbors(current);
    if (neighbors.length > 0) {
      let next = chooseRandom(neighbors);
      removeWall(current, next);
      grid[next.y][next.x].visited = true;
      stack.push(next);
      current = next;
    } else {
      current = stack.pop();
    }
  }
}

Need to define the grid cells with walls. Each cell has top, right, bottom, left walls. When moving to a neighbor, remove the wall between them.

For example, moving right from (x,y) to (x+1,y), remove the right wall of current and left wall of next.

Then, drawing the maze: for each cell, draw the walls that are present.

For the solver:

Implement A*:

function aStar(start, end) {
  let openSet = [start];
  let cameFrom = {};
  let gScore = initialize with Infinity;
  gScore[start] = 0;
  let fScore = initialize with Infinity;
  fScore[start] = heuristic(start, end);

  while (openSet.length > 0) {
    let current = node in openSet with lowest fScore;
    if (current equals end) {
      return reconstructPath(cameFrom, current);
    }
    openSet.remove(current);
    closedSet.add(current);

    for each neighbor of current:
      if neighbor is wall or in closedSet, skip.
      let tentativeG = gScore[current] + 1;
      if tentativeG < gScore[neighbor]:
        cameFrom[neighbor] = current;
        gScore[neighbor] = tentativeG;
        fScore[neighbor] = gScore[neighbor] + heuristic(neighbor, end);
        if neighbor not in openSet, add it.
  }
}

But in the maze, movement is only through open paths (no walls). So neighbors are cells adjacent without a wall between.

Wait, in the maze grid, each cell's walls determine which neighbors are accessible. So when checking neighbors for A*, need to check if the wall between current and neighbor is removed.

For example, from cell (x,y), can go up if top wall is not present (i.e., the cell above has bottom wall not present, or current cell's top wall is removed).

Wait, in the grid setup, each cell's walls: when generating the maze, when moving from current to next, we remove the wall between them. So for cell (x,y), the right wall is present if there's no path to (x+1,y).

So for a cell (x,y), the neighbors are:

- Left: (x-1,y) if left wall is not present (i.e., current cell's left wall is removed, which means the cell to the left has right wall removed)
- Similarly for other directions.

Wait, perhaps it's better to have a grid where each cell has a list of which walls are present. Then, for a given cell, the accessible neighbors are those where the corresponding wall is not present.

So for cell (x,y), to move up, check if top wall is present. If not, then (x, y-1) is accessible.

Wait, in the maze generation, when moving up from (x,y) to (x, y-1), we remove the top wall of (x,y) and the bottom wall of (x, y-1). So if top wall of (x,y) is removed, then (x, y-1) is accessible.

Therefore, for cell (x,y), the accessible neighbors are:

- Up: if top wall is not present (y > 0 and grid[y][x].top === false)
- Down: if bottom wall is not present (y < rows-1 and grid[y][x].bottom === false)
- Left: if left wall is not present (x > 0 and grid[y][x].left === false)
- Right: if right wall is not present (x < cols-1 and grid[y][x].right === false)

Wait, but during maze generation, when moving to a neighbor, we remove the wall between them. So for example, moving right from (x,y) to (x+1,y), we set grid[y][x].right = false and grid[y][x+1].left = false.

Therefore, for cell (x,y), the right wall is present if grid[y][x].right is true, meaning no path to (x+1,y).

So in the solver, to get neighbors of (x,y), check each direction's wall.

Now, the A* algorithm needs to consider these accessible neighbors.

For the animation, each step of the algorithm (processing a node) should be drawn. So when the open set is updated, or when a node is processed, we can highlight it on the canvas.

The animation loop would call a function that processes one step of A*, then redraws the current state (maybe color the current node being processed, and the path so far).

Need to manage the solver state: open set, closed set, current node, etc., and step through each iteration.

Implementing this as a generator might help, but maybe simpler to have a step counter and process a few steps per frame.

Alternatively, use setInterval or requestAnimationFrame to trigger each step.

Let me think about the structure.

After generating the maze, initialize the solver:

let solver = {
  openSet: [start],
  closedSet: [],
  gScore: new Map(),
  fScore: new Map(),
  cameFrom: new Map(),
  current: null
};

Then, in the animation loop:

function animateSolver() {
  if (solver.openSet.length === 0) {
    // no solution
    return;
  }
  // Find the node in openSet with lowest fScore
  let current = findLowestFScore(solver.openSet);
  if (current.x === end.x && current.y === end.y) {
    // Reconstruct path
    return;
  }
  solver.openSet = solver.openSet.filter(node => !(node.x === current.x && node.y === current.y));
  solver.closedSet.push(current);

  // Process neighbors
  let neighbors = getAccessibleNeighbors(current);
  for (let neighbor of neighbors) {
    if (solver.closedSet.some(n => n.x === neighbor.x && n.y === neighbor.y)) continue;
    let tentativeG = gScore.get(current) + 1;
    if (!solver.openSet.some(n => n.x === neighbor.x && n.y === neighbor.y) || tentativeG < gScore.get(neighbor)) {
      solver.cameFrom.set(neighbor, current);
      gScore.set(neighbor, tentativeG);
      fScore.set(neighbor, tentativeG + heuristic(neighbor, end));
      if (!solver.openSet.some(n => n.x === neighbor.x && n.y === neighbor.y)) {
        solver.openSet.push(neighbor);
      }
    }
  }
  // Draw current state: highlight current node, openSet, closedSet
  drawSolverState();
  requestAnimationFrame(animateSolver);
}

But this would run the entire solver in one go. To animate step by step, need to process one step per frame.

So instead, have a function that does one step of the solver, then calls requestAnimationFrame to do the next step.

So:

function stepSolver() {
  if (solver.openSet.length === 0) {
    return;
  }
  // Do one step: process current node
  // ... same as above, but only one iteration
  drawSolverState();
  requestAnimationFrame(stepSolver);
}

But need to manage the state between steps.

Alternatively, use a generator function that yields after each step, and the animation loop calls next() each frame.

But maybe for simplicity, use a step counter and process one neighbor per step, but that might complicate.

Alternatively, in each animation frame, process all neighbors of the current node, but that might be too fast.

Hmm. Maybe the best approach is to have the solver function be a generator that yields after each node is processed, then in the animation loop, call next() each frame.

But given the constraints of a single file and no external libraries, perhaps the simplest way is to have a function that processes one node per frame.

Wait, but the A* algorithm processes one node per iteration (the current node with lowest fScore). So each frame, process one node.

So the animateSolver function would:

- Find the current node (lowest fScore in openSet)
- Move it to closedSet
- Process its neighbors
- Then redraw

So each frame corresponds to processing one node.

This would make the animation slow enough to see.

So in code:

let animationFrameId;
function animateSolver() {
  if (solver.openSet.length === 0) {
    // No solution
    return;
  }
  // Find current node
  let currentIndex = 0;
  for (let i = 1; i < solver.openSet.length; i++) {
    if (solver.fScore.get(solver.openSet[i]) < solver.fScore.get(solver.openSet[currentIndex])) {
      currentIndex = i;
    }
  }
  let current = solver.openSet[currentIndex];
  solver.openSet.splice(currentIndex, 1);
  solver.closedSet.push(current);

  if (current.x === end.x && current.y === end.y) {
    // Reconstruct path
    reconstructPath();
    return;
  }

  let neighbors = getNeighbors(current);
  for (let neighbor of neighbors) {
    if (solver.closedSet.some(n => n.x === neighbor.x && n.y === neighbor.y)) continue;
    let tentativeG = solver.gScore.get(current) + 1;
    if (!solver.openSet.some(n => n.x === neighbor.x && n.y === neighbor.y) || tentativeG < solver.gScore.get(neighbor)) {
      solver.cameFrom.set(neighbor, current);
      solver.gScore.set(neighbor, tentativeG);
      solver.fScore.set(neighbor, tentativeG + heuristic(neighbor, end));
      if (!solver.openSet.some(n => n.x === neighbor.x && n.y === neighbor.y)) {
        solver.openSet.push(neighbor);
      }
    }
  }

  drawSolver();
  animationFrameId = requestAnimationFrame(animateSolver);
}

Then, start the animation after maze generation.

Now, putting it all together.

First, the HTML structure.

Then, CSS to center the canvas.

JS:

- Define constants: cols, rows, cell size.
- Canvas setup.
- Maze generation functions.
- Solver functions.
- Drawing functions.

Need to handle the drawing of the maze, then the solver's progress.

For drawing the maze: for each cell, draw the walls that are present.

For example, for cell (x,y):

- Top wall: if grid[y][x].top is true, draw a line from (x*cellSize, y*cellSize) to ((x+1)*cellSize, y*cellSize)
- Similarly for other walls.

The solver drawing: for each node in closedSet, fill with a color (e.g., red), openSet with another color (e.g., green), current node with blue.

Wait, but in the animation, each frame we process one node, so closedSet grows, openSet changes.

Now, writing all this in a single script tag.

Potential issues:

- Making sure the maze generation is correct.
- Handling the grid representation correctly.
- Implementing A* correctly with the maze walls.
- Animation timing.

Let me draft the code.

First, the HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Maze Solver</title>
  <style>
    body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background: #222; }
    canvas { border: 1px solid #fff; }
  </style>
</head>
<body>
  <canvas id="mazeCanvas" width="600" height="600"></canvas>
  <script>
    // JS code here
  </script>
</body>
</html>

Now, the JS part.

Define constants:

const cols = 20;
const rows = 20;
const cellSize = 30;
const canvas = document.getElementById('mazeCanvas');
const ctx = canvas.getContext('2d');

Then, the grid:

let grid = [];

function setupGrid() {
  grid = Array(rows).fill().map(() => 
    Array(cols).fill().map(() => ({
      top: true,
      right: true,
      bottom: true,
      left: true,
      visited: false
    }))
  );
}

But wait, the recursive backtracker needs a stack.

Wait, in the setupGrid, each cell has walls on all sides initially.

Then, generateMaze function:

function generateMaze() {
  setupGrid();
  let stack = [];
  let current = {x: 0, y: 0};
  grid[current.y][current.x].visited = true;
  stack.push(current);

  while (stack.length > 0) {
    let neighbors = [];
    let {x, y} = current;

    // Check unvisited neighbors
    if (y > 0 && !grid[y-1][x].visited) neighbors.push({x, y: y-1, dir: 'top'});
    if (x < cols-1 && !grid[y][x+1].visited) neighbors.push({x: x+1, y, dir: 'right'});
    if (y < rows-1 && !grid[y+1][x].visited) neighbors.push({x, y: y+1, dir: 'bottom'});
    if (x > 0 && !grid[y][x-1].visited) neighbors.push({x: x-1, y, dir: 'left'});

    if (neighbors.length > 0) {
      let next = neighbors[Math.floor(Math.random() * neighbors.length)];
      removeWall(current, next);
      grid[next.y][next.x].visited = true;
      stack.push(current);
      current = next;
    } else {
      current = stack.pop();
    }
  }
}

function removeWall(current, next) {
  // Remove wall between current and next
  if (next.dir === 'top') {
    grid[current.y][current.x].top = false;
    grid[next.y][next.x].bottom = false;
  } else if (next.dir === 'right') {
    grid[current.y][current.x].right = false;
    grid[next.y][next.x].left = false;
  } else if (next.dir === 'bottom') {
    grid[current.y][current.x].bottom = false;
    grid[next.y][next.x].top = false;
  } else if (next.dir === 'left') {
    grid[current.y][current.x].left = false;
    grid[next.y][next.x].right = false;
  }
}

Wait, the dir in neighbors is the direction from current to next. So for example, if next is top (y-1), then current's top wall is removed, and next's bottom wall is removed.

Yes, that's correct.

Now, drawing the maze:

function drawMaze() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = '#000';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  for (let y = 0; y < rows; y++) {
    for (let x = 0; x < cols; x++) {
      let cell = grid[y][x];
      let px = x * cellSize;
      let py = y * cellSize;

      ctx.strokeStyle = '#fff';
      ctx.lineWidth = 2;

      if (cell.top) {
        ctx.beginPath();
        ctx.moveTo(px, py);
        ctx.lineTo(px + cellSize, py);
        ctx.stroke();
      }
      if (cell.right) {
        ctx.beginPath();
        ctx.moveTo(px + cellSize, py);
        ctx.lineTo(px + cellSize, py + cellSize);
        ctx.stroke();
      }
      if (cell.bottom) {
        ctx.beginPath();
        ctx.moveTo(px + cellSize, py + cellSize);
        ctx.lineTo(px, py + cellSize);
        ctx.stroke();
      }
      if (cell.left) {
        ctx.beginPath();
        ctx.moveTo(px, py + cellSize);
        ctx.lineTo(px, py);
        ctx.stroke();
      }
    }
  }

  // Mark start and end
  ctx.fillStyle = 'green';
  ctx.fillRect(0, 0, cellSize/2, cellSize/2);
  ctx.fillStyle = 'red';
  ctx.fillRect((cols-1)*cellSize, (rows-1)*cellSize, cellSize/2, cellSize/2);
}

Wait, start is (0,0), end is (cols-1, rows-1).

Now, the solver.

Define start and end:

const start = {x: 0, y: 0};
const end = {x: cols-1, y: rows-1};

A* solver:

function heuristic(a, b) {
  return Math.abs(a.x - b.x) + Math.abs(a.y - b.y);
}

let solver = {
  openSet: [start],
  closedSet: [],
  gScore: new Map(),
  fScore: new Map(),
  cameFrom: new Map()
};

// Initialize gScore and fScore
solver.gScore.set(start, 0);
solver.fScore.set(start, heuristic(start, end));

function getNeighbors(node) {
  let neighbors = [];
  let {x, y} = node;

  // Check each direction's wall
  if (y > 0 && !grid[y][x].top) neighbors.push({x, y: y-1});
  if (x < cols-1 && !grid[y][x].right) neighbors.push({x: x+1, y});
  if (y < rows-1 && !grid[y][x].bottom) neighbors.push({x, y: y+1});
  if (x > 0 && !grid[y][x].left) neighbors.push({x: x-1, y});

  return neighbors;
}

function stepSolver() {
  if (solver.openSet.length === 0) {
    console.log("No solution");
    return;
  }

  // Find the node with lowest fScore
  let currentIndex = 0;
  for (let i = 1; i < solver.openSet.length; i++) {
    if (solver.fScore.get(solver.openSet[i]) < solver.fScore.get(solver.openSet[currentIndex])) {
      currentIndex = i;
    }
  }
  let current = solver.openSet[currentIndex];
  solver.openSet.splice(currentIndex, 1);
  solver.closedSet.push(current);

  // Check if reached end
  if (current.x === end.x && current.y === end.y) {
    reconstructPath();
    return;
  }

  // Process neighbors
  let neighbors = getNeighbors(current);
  for (let neighbor of neighbors) {
    if (solver.closedSet.some(n => n.x === neighbor.x && n.y === neighbor.y)) continue;

    let tentativeG = solver.gScore.get(current) + 1;
    let neighborG = solver.gScore.get(neighbor);
    if (neighborG === undefined || tentativeG < neighborG) {
      solver.cameFrom.set(neighbor, current);
      solver.gScore.set(neighbor, tentativeG);
      solver.fScore.set(neighbor, tentativeG + heuristic(neighbor, end));
      if (!solver.openSet.some(n => n.x === neighbor.x && n.y === neighbor.y)) {
        solver.openSet.push(neighbor);
      }
    }
  }

  drawSolver();
  requestAnimationFrame(stepSolver);
}

function reconstructPath() {
  let current = end;
  let path = [];
  while (current) {
    path.push(current);
    current = solver.cameFrom.get(current);
  }
  drawPath(path);
}

function drawSolver() {
  // Redraw maze first
  drawMaze();

  // Draw openSet in green
  ctx.fillStyle = 'rgba(0, 255, 0, 0.3)';
  for (let node of solver.openSet) {
    ctx.fillRect(node.x * cellSize, node.y * cellSize, cellSize, cellSize);
  }

  // Draw closedSet in red
  ctx.fillStyle = 'rgba(255, 0, 0, 0.3)';
  for (let node of solver.closedSet) {
    ctx.fillRect(node.x * cellSize, node.y * cellSize, cellSize, cellSize);
  }
}

function drawPath(path) {
  ctx.strokeStyle = 'yellow';
  ctx.lineWidth = 3;
  ctx.beginPath();
  ctx.moveTo(path[0].x * cellSize + cellSize/2, path[0].y * cellSize + cellSize/2);
  for (let i = 1; i < path.length; i++) {
    ctx.lineTo(path[i].x * cellSize + cellSize/2, path[i].y * cellSize + cellSize/2);
  }
  ctx.stroke();
}

Now, putting it all together.

The main steps:

1. Generate maze.
2. Draw maze.
3. Start solver animation.

So in the script:

generateMaze();
drawMaze();
setTimeout(() => {
  stepSolver();
}, 1000); // Delay to see the maze first

Wait, but the maze generation is synchronous, so the canvas will be drawn after generation.

But the solver starts after a delay.

Wait, but in the code, generateMaze() is called, then drawMaze(), then start solver.

But the problem is that generateMaze is a synchronous function, which might take some time for large grids, but for 20x20 it's okay.

Now, putting all the code into the script tag.

Potential issues:

- The grid setup: in setupGrid, using Array(rows).fill().map(...) to create a 2D array. This is correct.

- In removeWall, the dir is set in neighbors. Wait, in generateMaze, when checking neighbors, the dir is set as 'top', 'right', etc., based on the direction from current to next.

Yes, because for example, if next is y-1 (top direction), then current's top wall is removed.

Testing the code mentally:

When current is (0,0), neighbors would be right (x+1) and bottom (y+1), since top and left are out of bounds.

Assuming the maze is generated correctly.

Now, the solver: when getNeighbors is called, it checks the walls. For example, if current cell's top wall is false, then the cell above is accessible.

Yes.

Now, the animation: each frame, stepSolver processes one node, draws the open and closed sets.

The drawSolver function redraws the entire maze, then overlays the open and closed sets.

This might be a bit slow for large grids, but for 20x20 it's manageable.

Now, putting all together in the index.html.

Need to make sure all functions are defined in the correct order.

Also, the initial call to generateMaze and start the solver.

Wait, but the code needs to be in the script tag, so the order is:

- Constants
- setupGrid, generateMaze, removeWall, drawMaze
- A* functions
- Then the main code: generateMaze(), drawMaze(), stepSolver()

Wait, but stepSolver is called via requestAnimationFrame, so need to start it after drawing the maze.

Wait, in the code:

generateMaze();
drawMaze();
stepSolver(); // But this would start immediately. Maybe add a delay.

But to see the maze first, maybe use setTimeout.

Alternatively, start the solver after the maze is drawn.

But in the code, after drawMaze(), call stepSolver().

But stepSolver uses requestAnimationFrame, so it will start the animation loop.

Wait, in the code:

generateMaze();
drawMaze();
stepSolver(); // This starts the animation

But stepSolver() calls requestAnimationFrame(stepSolver), which starts the loop.

Wait, no: stepSolver is the function that processes one step and then schedules the next.

So the initial call should be:

requestAnimationFrame(stepSolver);

Wait, no. The stepSolver function is designed to be called once to start the animation.

Wait, looking at stepSolver:

function stepSolver() {
  // ... process one step
  requestAnimationFrame(stepSolver);
}

So to start, you need to call stepSolver() once, which then schedules the next frame.

But the first call to stepSolver() processes the first step.

So after generating and drawing the maze, call stepSolver().

But in the code, after generateMaze() and drawMaze(), call stepSolver().

Wait, but stepSolver() is a function that when called, does one step and then schedules the next.

So the initial call should be stepSolver(), which then keeps going.

Wait, no. Let's see:

stepSolver() {
  ... process current node
  requestAnimationFrame(stepSolver);
}

So the first call to stepSolver() will process the first node, then schedule the next call.

Therefore, after the maze is drawn, we need to call stepSolver() once to start the animation.

So in the main code:

generateMaze();
drawMaze();
stepSolver();

But stepSolver() is defined, so this should work.

Wait, but in the code, stepSolver is defined, but the solver state needs to be initialized.

Ah, right. Before calling stepSolver, need to initialize the solver.

So:

// Initialize solver
solver.openSet = [start];
solver.closedSet = [];
solver.gScore = new Map();
solver.fScore = new Map();
solver.cameFrom = new Map();
solver.gScore.set(start, 0);
solver.fScore.set(start, heuristic(start, end));

Then call stepSolver().

So the main code:

generateMaze();
drawMaze();

// Initialize solver
solver.openSet = [start];
solver.closedSet = [];
solver.gScore = new Map();
solver.fScore = new Map();
solver.cameFrom = new Map();
solver.gScore.set(start, 0);
solver.fScore.set(start, heuristic(start, end));

stepSolver();

Wait, but stepSolver is the function that processes each step. So the initial call to stepSolver() starts the animation.

Wait, no: stepSolver is the function that does one step and then schedules the next. So to start, you need to call stepSolver() once.

But in the code, stepSolver is defined as:

function stepSolver() {
  ... process one step
  requestAnimationFrame(stepSolver);
}

So the first call to stepSolver() will process the first step, then schedule the next.

Therefore, after initializing the solver, call stepSolver().

Thus, the order is:

generateMaze();
drawMaze();

// Solver init
solver.openSet = [start];
// ... etc.

stepSolver();

Now, putting all this into the script tag.

Let me draft the entire script.

Potential issues to check:

- The grid is 20x20, cellSize 30, so canvas 600x600, which matches.

- The start is (0,0), end is (19,19).

- In drawMaze, the start and end markers are drawn as small squares.

- In the solver, the getNeighbors function correctly checks the walls.

Now, writing the complete code.

One thing to note: the grid in generateMaze uses grid[y][x], which is correct since rows are y, cols are x.

Another thing: in the A* solver, when checking if a neighbor is in openSet or closedSet, using array.some() which is O(n), but for small grids it's okay.

Now, the complete index.html.
→ write index.html (7067 bytes)
toolResult

Successfully wrote 7067 bytes to index.html

assistant
thinking
Okay, let me check what the user asked for. They wanted a single-page web app with a maze generated using the recursive backtracker algorithm and an A* solver animation, all in one index.html file with inline CSS and JS, no external resources.

First, I need to verify that the generated index.html meets all the requirements. The user specified that it should be self-contained, so no external files or CDNs. Looking at the code I wrote, it's all in one HTML file with style and script tags. The canvas is set up correctly, and there are no external links.

Next, the maze generation using recursive backtracker. The code has a generateMaze function that uses a stack to backtrack, which is the correct approach. It checks unvisited neighbors, randomly selects one, removes the wall, and continues. The removeWall function correctly updates both cells' walls (e.g., top of current and bottom of next). That seems right.

Then the A* solver. The heuristic is Manhattan distance, which is appropriate for grid-based movement. The stepSolver function processes one node per frame, updating open and closed sets, which should animate the search. The drawSolver function highlights open (green) and closed (red) sets, and the final path is drawn in yellow. That should show the A* progression.

I should check if the maze is properly generated. The grid setup initializes all walls as present, then the algorithm carves paths. The drawMaze function checks each wall direction and draws them if present. Start and end markers are green and red, which is visible.

Testing the solver: the getNeighbors function checks adjacent cells based on wall presence, so it only considers valid paths. The A* logic updates g and f scores correctly, and the priority queue (openSet) is managed by finding the lowest fScore each step. Since it's a small grid (20x20), the performance should be okay even with O(n) operations for the openSet.

Potential issues: The openSet is an array, and finding the lowest fScore is O(n), which is acceptable for small grids. The animation uses requestAnimationFrame, so it should be smooth. The initial delay isn't needed because the maze is drawn before starting the solver.

Everything seems to fit the requirements. The file is self-contained, uses no external resources, and implements both maze generation and A* solving with animation. The code structure follows the guidelines, with all CSS and JS inline. I think this meets the user's request.

The single-page maze generator and solver has been successfully created as a self-contained `index.html` file. It features: 1. A 20×20 cell maze generated using the recursive backtracker algorithm 2. A* pathfinding visualization that: - Shows open set (green semi-transparent) - Shows closed set (red semi-transparent) - Animates the search process step-by-step - Highlights the final solution path in yellow The implementation includes: - Pure HTML/CSS/JS with no external dependencies - Canvas-based rendering - Complete maze generation and solving logic - Start (green) and end (red) markers - Responsive animation using requestAnimationFrame You can run it directly by opening the generated `index.html` file in any modern browser. The maze is generated immediately, followed by the A* solver animation that shows the pathfinding process in real-time.

TAKE IT TO CODE

A single self-contained HTML file — copy it and open in any browser, or reuse the prompt with your own pi-agent run.

RUN

modelqwen3-235b-a22b-thinking-2507
vendorQwen
harnesspi-agent
generated2026-08-01

EVALUATION

★★★★★ 3/5 working

Maze generation animates automatically with a solver path (dark red) growing over time; keyboard/mouse inputs have no visible effect.

Vision grade · anthropic/claude-sonnet-5

MEASUREMENTS

Raw readings from the capture, not a verdict — the grade above is the only judgement. Percentages are how much of the screen changed; the measure under-reports sparse motion on a dark background.

idle motion1.2%
on click2.7%
on drag0.0%
on wheel0.0%
on enter + space0.0%
on arrow keys0.0%
on w/a/s/d0.0%
frame spread17.1 / 255
console errors0
js errors none

METRICS

runtime182.7s
tokens in12k
tokens out9.7k
cached0
cost / run$0.0327