Maze generator & solver · deepseek-chat
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.
Here's a single-page web app that generates a maze using the recursive backtracking algorithm and solves it with A* (A-star) pathfinding. The maze is drawn on a canvas, and the solving process is animated step by step. html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Maze Generator and Solver</title> <style> body { font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #f0f0f0; margin: 0; padding: 20px; } h1 { color: #333; } canvas { border: 2px solid #333; margin: 20px 0; background-color: white; } button { padding: 10px 15px; margin: 5px; font-size: 16px; cursor: pointer; background-color: #4CAF50; color: white; border: none; border-radius: 4px; } button:hover { background-color: #45a049; } .controls { display: flex; gap: 10px; margin-bottom: 20px; } </style> </head> <body> <h1>Maze Generator and Solver</h1> <div class="controls"> <button id="generate-btn">Generate Maze</button> <button id="solve-btn">Solve Maze</button> </div> <canvas id="maze" width="500" height="500"></canvas> <script> const canvas = document.getElementById('maze'); const ctx = canvas.getContext('2d'); const generateBtn = document.getElementById('generate-btn'); const solveBtn = document.getElementById('solve-btn'); // Maze configuration const cellSize = 20; const gridWidth = Math.floor(canvas.width / cellSize); const gridHeight = Math.floor(canvas.height / cellSize); let grid = []; // Colors const colors = { wall: '#333', path: '#fff', start: '#4CAF50', end: '#F44336', visited: '#2196F3', solution: '#FFC107' }; // Directions: north, south, east, west const directions = [ { dx: 0, dy: -1, name: 'north' }, { dx: 1, dy: 0, name: 'east' }, { dx: 0, dy: 1, name: 'south' }, { dx: -1, dy: 0, name: 'west' } ]; // Initialize grid function initGrid() { grid = []; for (let y = 0; y < gridHeight; y++) { grid[y] = []; for (let x = 0; x < gridWidth; x++) { grid[y][x] = { x: x, y: y, walls: { north: true, east: true, south: true, west: true }, visited: false }; } } } // Draw the maze function drawMaze() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let y = 0; y < gridHeight; y++) { for (let x = 0; x < gridWidth; x++) { const cell = grid[y][x]; // Fill cell background ctx.fillStyle = colors.path; ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize); // Draw walls ctx.strokeStyle = colors.wall; ctx.lineWidth = 2; if (cell.walls.north) { ctx.beginPath(); ctx.moveTo(x * cellSize, y * cellSize); ctx.lineTo((x + 1) * cellSize, y * cellSize); ctx.stroke(); } if (cell.walls.east) { ctx.beginPath(); ctx.moveTo((x + 1) * cellSize, y * cellSize); ctx.lineTo((x + 1) * cellSize, (y + 1) * cellSize); ctx.stroke(); } if (cell.walls.south) { ctx.beginPath(); ctx.moveTo(x * cellSize, (y + 1) * cellSize); ctx.lineTo((x + 1) * cellSize, (y + 1) * cellSize); ctx.stroke(); } if (cell.walls.west) { ctx.beginPath(); ctx.moveTo(x * cellSize, y * cellSize); ctx.lineTo(x * cellSize, (y + 1) * cellSize); ctx.stroke(); } } } // Draw start and end points ctx.fillStyle = colors.start; ctx.fillRect(0, 0, cellSize, cellSize); ctx.fillStyle = colors.end; ctx.fillRect((gridWidth - 1) * cellSize, (gridHeight - 1) * cellSize, cellSize, cellSize); } // Recursive backtracking maze generation function generateMaze() { initGrid(); const stack = []; const startCell = grid[0][0]; startCell.visited = true; stack.push(startCell); while (stack.length > 0) { const current = stack[stack.length - 1]; const neighbors = []; // Find unvisited neighbors for (const dir of directions) { const nx = current.x + dir.dx; const ny = current.y + dir.dy; if (nx >= 0 && nx < gridWidth && ny >= 0 && ny < gridHeight && !grid[ny][nx].visited) { neighbors.push({ dir, cell: grid[ny][nx] }); } } if (neighbors.length > 0) { const { dir, cell } = neighbors[Math.floor(Math.random() * neighbors.length)]; cell.visited = true; // Remove walls between current and neighbor switch (dir.name) { case 'north': current.walls.north = false; cell.walls.south = false; break; case 'east': current.walls.east = false; cell.walls.west = false; break; case 'south': current.walls.south = false; cell.walls.north = false; break; case 'west': current.walls.west = false; cell.walls.east = false; break; } stack.push(cell); } else { stack.pop(); } } drawMaze(); } // A* pathfinding algorithm async function solveMaze() { const start = grid[0][0]; const end = grid[gridHeight - 1][gridWidth - 1]; // Heuristic function (Manhattan distance) function heuristic(a, b) { return Math.abs(a.x - b.x) + Math.abs(a.y - b.y); } const openSet = [start]; const closedSet = []; const cameFrom = {}; start.g = 0; start.f = heuristic(start, end); while (openSet.length > 0) { // Find node in openSet with lowest f score let current = openSet[0]; for (let i = 1; i < openSet.length; i++) { if (openSet[i].f < current.f) { current = openSet[i]; } } // Draw visited cell if (current !== start && current !== end) { ctx.fillStyle = colors.visited; ctx.fillRect(current.x * cellSize, current.y * cellSize, cellSize, cellSize); await new Promise(resolve => setTimeout(resolve, 10)); } // Check if we reached the end if (current === end) { // Reconstruct path const path = []; let temp = current; while (temp) { path.push(temp); temp = cameFrom[`${temp.x},${temp.y}`]; } path.reverse(); // Draw solution path for (const cell of path) { if (cell !== start && cell !== end) { ctx.fillStyle = colors.solution; ctx.fillRect(cell.x * cellSize, cell.y * cellSize, cellSize, cellSize); await new Promise(resolve => setTimeout(resolve, 20)); } } return; } // Move current from openSet to closedSet openSet.splice(openSet.indexOf(current), 1); closedSet.push(current); // Check neighbors for (const dir of directions) { const nx = current.x + dir.dx; const ny = current.y + dir.dy; // Check bounds if (nx < 0 || nx >= gridWidth || ny < 0 || ny >= gridHeight) continue; // Check if there's a wall blocking if ( (dir.name === 'north' && current.walls.north) || (dir.name === 'east' && current.walls.east) || (dir.name === 'south' && current.walls.south) || (dir.name === 'west' && current.walls.west) ) continue; const neighbor = grid[ny][nx]; // Skip if already evaluated if (closedSet.includes(neighbor)) continue; const tentativeG = current.g + 1; // Discover a new node if (!openSet.includes(neighbor)) { openSet.push(neighbor); } else if (tentativeG >= neighbor.g) { continue; } // This is the best path so far cameFrom[`${neighbor.x},${neighbor.y}`] = current; neighbor.g = tentativeG; neighbor.f = neighbor.g + heuristic(neighbor, end); } } // No solution found alert('No path found!'); } // Event listeners generateBtn.addEventListener('click', generateMaze); solveBtn.addEventListener('click', solveMaze); // Initialize 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.