Maze generator & solver · qwen3-coder-flash
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.
This one-shot run produced no runnable artifact.
agent produced no index.html
The transcript below shows what the model did — read it to see why the one shot fell short.
transcript · 2 messages
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.
```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Maze Solver with A* Algorithm</title> <style> body { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; margin: 0; background-color: #f0f0f0; font-family: Arial, sans-serif; } h1 { color: #333; margin-bottom: 10px; } .controls { margin-bottom: 20px; display: flex; gap: 10px; } button { padding: 10px 15px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; transition: background-color 0.3s; } button:hover { background-color: #45a049; } #mazeCanvas { border: 2px solid #333; background-color: white; } .legend { margin-top: 15px; display: flex; gap: 20px; } .legend-item { display: flex; align-items: center; gap: 5px; } .color-box { width: 20px; height: 20px; border: 1px solid #333; } </style> </head> <body> <h1>Maze Solver with A* Algorithm</h1> <div class="controls"> <button id="generateBtn">Generate New Maze</button> <button id="solveBtn">Solve with A*</button> </div> <canvas id="mazeCanvas" width="600" height="600"></canvas> <div class="legend"> <div class="legend-item"> <div class="color-box" style="background-color: #ffffff;"></div> <span>Empty Space</span> </div> <div class="legend-item"> <div class="color-box" style="background-color: #000000;"></div> <span>Wall</span> </div> <div class="legend-item"> <div class="color-box" style="background-color: #ff0000;"></div> <span>Start</span> </div> <div class="legend-item"> <div class="color-box" style="background-color: #00ff00;"></div> <span>End</span> </div> <div class="legend-item"> <div class="color-box" style="background-color: #0000ff;"></div> <span>Solution Path</span> </div> </div> <script> // Canvas setup const canvas = document.getElementById('mazeCanvas'); const ctx = canvas.getContext('2d'); const cellSize = 20; const cols = Math.floor(canvas.width / cellSize); const rows = Math.floor(canvas.height / cellSize); // Maze generation and solving variables let maze = []; let visited = []; let stack = []; let solutionPath = []; let solving = false; let animationId = null; // Initialize maze grid function initializeMaze() { maze = []; for (let i = 0; i < rows; i++) { maze[i] = []; for (let j = 0; j < cols; j++) { maze[i][j] = 1; // 1 represents wall } } } // Generate maze using recursive backtracking function generateMaze() { initializeMaze(); // Start position let startX = 1; let startY = 1; // Mark start as empty maze[startY][startX] = 0; // Stack for backtracking stack = [[startX, startY]]; // Directions: right, down, left, up const directions = [ [2, 0], [0, 2], [-2, 0], [0, -2] ]; while (stack.length > 0) { const [x, y] = stack[stack.length - 1]; const neighbors = []; // Find unvisited neighbors for (const [dx, dy] of directions) { const nx = x + dx; const ny = y + dy; if (nx >= 1 && nx < cols - 1 && ny >= 1 && ny < rows - 1 && maze[ny][nx] === 1) { neighbors.push([nx, ny, dx, dy]); } } if (neighbors.length > 0) { // Choose random neighbor const [nx, ny, dx, dy] = neighbors[Math.floor(Math.random() * neighbors.length)]; // Remove wall between current cell and neighbor maze[y + dy/2][x + dx/2] = 0; maze[ny][nx] = 0; stack.push([nx, ny]); } else { stack.pop(); } } // Set start and end points maze[1][1] = 0; // Start maze[rows-2][cols-2] = 0; // End drawMaze(); } // Draw the maze function drawMaze() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let y = 0; y < rows; y++) { for (let x = 0; x < cols; x++) { if (maze[y][x] === 1) { ctx.fillStyle = '#000000'; // Wall } else { ctx.fillStyle = '#ffffff'; // Empty space } ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize); } } // Draw start and end points ctx.fillStyle = '#ff0000'; // Red for start ctx.fillRect(1 * cellSize, 1 * cellSize, cellSize, cellSize); ctx.fillStyle = '#00ff00'; // Green for end ctx.fillRect((cols-2) * cellSize, (rows-2) * cellSize, cellSize, cellSize); } // A* Algorithm implementation class Node { constructor(x, y, g = 0, h = 0, parent = null) { this.x = x; this.y = y; this.g = g; // Distance from start this.h = h; // Heuristic distance to end this.f = g + h; // Total cost this.parent = parent; } equals(node) { return this.x === node.x && this.y === node.y; } } // Heuristic function (Manhattan distance) function heuristic(a, b) { return Math.abs(a.x - b.x) + Math.abs(a.y - b.y); } // Get neighbors of a node function getNeighbors(node) { const neighbors = []; const directions = [[0, 1], [1, 0], [0, -1], [-1, 0]]; // Right, Down, Left, Up for (const [dx, dy] of directions) { const newX = node.x + dx; const newY = node.y + dy; // Check if the neighbor is within bounds and is not a wall if (newX >= 0 && newX < cols && newY >= 0 && newY < rows && maze[newY][newX] === 0) { neighbors.push(new Node(newX, newY)); } } return neighbors; } // A* pathfinding algorithm function solveMaze() { if (solving) return; solving = true; // Clear previous solution solutionPath = []; // Start and end positions const startNode = new Node(1, 1); const endNode = new Node(cols - 2, rows - 2); // Open and closed sets const openSet = [startNode]; const closedSet = []; // Track visited nodes const visitedNodes = new Set(); // Animation state let animationStep = 0; const maxSteps = 1000; // Prevent infinite loops function animate() { if (animationStep >= maxSteps || openSet.length === 0) { solving = false; return; } // Find node with lowest f score let lowestIndex = 0; for (let i = 1; i < openSet.length; i++) { if (openSet[i].f < openSet[lowestIndex].f) { lowestIndex = i; } } const currentNode = openSet.splice(lowestIndex, 1)[0]; // Add to closed set closedSet.push(currentNode); // Check if we reached the end if (currentNode.equals(endNode)) { // Reconstruct path let temp = currentNode; solutionPath = [temp]; while (temp.parent) { temp = temp.parent; solutionPath.unshift(temp); } // Draw solution drawSolution(); solving = false; return; } // Get neighbors const neighbors = getNeighbors(currentNode); for (const neighbor of neighbors) { // Skip if already evaluated if (closedSet.some(n => n.equals(neighbor))) continue; // Calculate tentative g score const tentativeG = currentNode.g + 1; // Check if this path to neighbor is better const existingNode = openSet.find(n => n.equals(neighbor)); if (!existingNode) { // Add new node to open set neighbor.g = tentativeG; neighbor.h = heuristic(neighbor, endNode); neighbor.f = neighbor.g + neighbor.h; neighbor.parent = currentNode; openSet.push(neighbor); } else if (tentativeG < existingNode.g) { // Update existing node existingNode.g = tentativeG; existingNode.f = existingNode.g + existingNode.h; existingNode.parent = currentNode; } } // Visualize the search process drawSearchProcess(openSet, closedSet); animationStep++; animationId = requestAnimationFrame(animate); } animate(); } // Draw the search process function drawSearchProcess(openSet, closedSet) { // Redraw the base maze drawMaze(); // Draw open set (nodes to explore) ctx.fillStyle = 'rgba(0, 0, 255, 0.3)'; for (const node of openSet) { ctx.fillRect(node.x * cellSize, node.y * cellSize, cellSize, cellSize); } // Draw closed set (explored nodes) ctx.fillStyle = 'rgba(255, 0, 0, 0.3)'; for (const node of closedSet) { ctx.fillRect(node.x * cellSize, node.y * cellSize, cellSize, cellSize); } } // Draw the final solution path function drawSolution() { // Redraw the base maze drawMaze(); // Draw solution path ctx.strokeStyle = '#0000ff'; ctx.lineWidth = 4; ctx.beginPath(); if (solutionPath.length > 0) { const start = solutionPath[0]; ctx.moveTo(start.x * cellSize + cellSize/2, start.y * cellSize + cellSize/2); for (let i = 1; i < solutionPath.length; i++) { const node = solutionPath[i]; ctx.lineTo(node.x * cellSize + cellSize/2, node.y * cellSize + cellSize/2); } ctx.stroke(); } } // Event listeners document.getElementById('generateBtn').addEventListener('click', () => { if (animationId) { cancelAnimationFrame(animationId); } generateMaze(); }); document.getElementById('solveBtn').addEventListener('click', () => { if (animationId) { cancelAnimationFrame(animationId); } solveMaze(); }); // Initialize the maze generateMaze(); </script> </body> </html> ```
TAKE IT TO CODE
This run produced no artifact — reuse the prompt with a different model or your own pi-agent run.