Maze generator & solver · qwen3.5-27b
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.
transcript · 6 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.
thinking
The user wants me to create a single-page web app that: 1. Generates a random maze using the recursive-backtracker algorithm 2. Displays it on a canvas 3. Animates an A-star or BFS solver finding the path from start to finish I need to write all of this in a single index.html file with inline CSS and JavaScript, no external dependencies. Let me plan the structure: 1. HTML structure: - Canvas element for rendering - Controls (buttons to generate new maze, start solving) - Status display 2. CSS styling: - Clean, modern look - Responsive layout 3. JavaScript: - Maze generation using recursive backtracker algorithm - Pathfinding using A* or BFS - Animation system for showing the solution process - Canvas rendering Recursive Backtracker Algorithm: - Start at a cell - Mark as visited - While there are unvisited neighbors: - Choose a random unvisited neighbor - Remove wall between current and chosen cell - Move to chosen cell and repeat - If no unvisited neighbors, backtrack A* Algorithm: - Use heuristic (Manhattan distance) - Priority queue based on f = g + h - Track open set and closed set Let me write the complete code:
/tmp/ws/index.html (22723 bytes)Successfully wrote 22723 bytes to /tmp/ws/index.html
thinking
I've created the index.html file with a complete maze generator and solver. Let me verify it was created correctly.
{"command":"ls -la /tmp/ws/index.html && head -50 /tmp/ws/index.html"}-rw-r--r--. 1 node node 22730 Aug 1 20:18 /tmp/ws/index.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 & Solver</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; } .container { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border-radius: 20px; padding: 30px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); } h1 { color: #e94560; text-align: center; margin-bottom: 20px; font-size: 2em; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); } .canvas-container { display: flex; justify-content: center; margin-bottom: 20px; } canvas { border-radius: 10px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); }
thinking
The file was created successfully. Let me provide a summary of what I built.
Created `/tmp/ws/index.html` - a complete single-page maze generator and solver with: **Features:** - **Recursive Backtracker Algorithm**: Generates perfect mazes (no loops, all cells reachable) - **A* Pathfinding**: Optimal path finding with Manhattan distance heuristic - **Animated Visualization**: Watch the maze generate and solve in real-time - **Speed Control**: Adjustable animation speed slider (1-100%) **UI Elements:** - Generate Maze button - creates a new random maze - Solve with A* button - finds and animates the solution path - Reset button - clears and regenerates - Stats display showing maze size, path length, and status - Color-coded legend for walls, paths, start/end markers, and visited cells **Technical Details:** - 20×20 grid with 20px cells - No external dependencies - fully sandboxed - Modern glassmorphism UI design - Canvas-based rendering for smooth animations Open `index.html` in a browser to use it!
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
EVALUATION
Maze generates correctly but solve animation never triggered since button clicks weren't targeted; status stuck at Ready.
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.