Maze generator & solver · claude-haiku-5.5
Output generated Cost / run $0.0072 Runtime 64.0s
Prompt for this run
Build a maze generator and solver visualization on a canvas. Use HTML, CSS, and JavaScript as needed. Write it to `index.html` in the current working directory using your file tools. Inline your own CSS and JavaScript. Do not use external assets, CDNs, or network requests. No third-party libraries are provided. Required behavior: - Generate a 25 by 15 cell rectangular maze using randomized recursive backtracking. All cells must be reachable, with exactly one simple path between any pair of cells. - Use the upper-left cell as Start and lower-right as Finish. Draw cell walls clearly and animate generation so carving progress is visible. - After generation finishes, animate either BFS or A-star exploring the maze, then highlight the complete path from Start to Finish. The path must cross only open passages. - Provide New Maze and Replay Solver. New Maze cancels the previous animation and generates a fresh maze; Replay Solver uses the existing maze without changing its walls. - Mark start, finish, exploration, and solution with distinguishable styles and a short legend. Verify: Inspect maze-carving progress and request New Maze while animation is active. Check that the new generation replaces the previous view cleanly. If the solver starts during inspection, check that its visible steps follow open passages.
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
METRICS
Transcript · 11 messages
Build a maze generator and solver visualization on a canvas. Use HTML, CSS, and JavaScript as needed. Write it to `index.html` in the current working directory using your file tools. Inline your own CSS and JavaScript. Do not use external assets, CDNs, or network requests. No third-party libraries are provided. Required behavior: - Generate a 25 by 15 cell rectangular maze using randomized recursive backtracking. All cells must be reachable, with exactly one simple path between any pair of cells. - Use the upper-left cell as Start and lower-right as Finish. Draw cell walls clearly and animate generation so carving progress is visible. - After generation finishes, animate either BFS or A-star exploring the maze, then highlight the complete path from Start to Finish. The path must cross only open passages. - Provide New Maze and Replay Solver. New Maze cancels the previous animation and generates a fresh maze; Replay Solver uses the existing maze without changing its walls. - Mark start, finish, exploration, and solution with distinguishable styles and a short legend. Verify: Inspect maze-carving progress and request New Maze while animation is active. Check that the new generation replaces the previous view cleanly. If the solver starts during inspection, check that its visible steps follow open passages.
thinking
I'm planning the maze structure as a grid of cells with wall booleans, then setting up recursive backtracking generation animated step-by-step using a stack and generation token to allow restarts. For solving, I'll support BFS/A* with animated frontier exploration and visited marking, then reconstruct and highlight the path via parent pointers once the target is found, with a replay function to rerun the chosen algorithm. Drawing involves rendering grid walls as lines, coloring explored cells, and drawing the final path as a polyline through cell centers with start/end markers in distinct colors. Setting up canvas and grid dimensions... I'm structuring the maze cells with wall data and designing a token-based animation loop using requestAnimationFrame, where each frame runs a step function and redraws until completion, then triggers a callback. For the generation and solving logic, I'm defining job objects with step functions: the generator carves cells via a DFS stack with a configurable steps-per-frame rate, and the solver resets each cell's exploration state before running pathfinding from start to goal. For BFS and A* I'm unifying both into a shared frontier structure—BFS shifts the queue front, A* pops the lowest f-score (g+h) node—marking cells explored, tracking parents, and updating neighbors until the goal is found. Once found, I trace back through parent pointers to build the path, then reveal it progressively frame-by-frame as a growing polyline. Now I'm designing the drawing logic: coloring cells by state (explored in light blue, start green, finish red, current carving/search cell orange), rendering maze walls as line segments based on each cell's wall flags, drawing the gold path polyline up to the current progress, and adding start/finish text labels plus a legend of colored swatches explaining each state. I'm planning the UI controls (New Maze, Replay Solver, algorithm selector) and the animation loop structure, using an incrementing token so starting a new job cancels any in-flight generation or solving frames. I need to make sure each cell's visited/explored flags reset properly between a fresh maze and a replayed solve, and I'm tuning how many steps run per animation frame for generation versus solving versus path drawing to keep the pacing smooth.
/tmp/job-OuoXc8/index.html (10648 bytes){"action":"reload"}Successfully wrote to /tmp/job-OuoXc8/index.html
Frame 1, +0ms
[Browser image supplied to model]
{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."],"dom":"Maze Generator & Solver\nNew Maze\nReplay Solver\nAlgorithm \nBFS\nA*\nCarving passages…\nStart (upper-left)\nFinish (lower-right)\nExplored\nSolution path\nCarving head","images":"attached"}
thinking
The screenshot looks fine for carving progress. I'm noticing gridlines appear on every cell since all walls start true and get drawn by default—each cell shows N/W borders, with S/E only on the outer boundary, meaning interior walls are essentially double-drawn. Thinking through consistency: shared walls between adjacent cells get represented once (N of lower cell covers S of the one above), and carving properly removes walls on both sides, so that logic checks out. I'm also verifying the A* solver tracks explored nodes and updates g-scores correctly, and that the draw phase skips explored markers during generation. One thing I want to double-check is the animation token handling—clicking "New Maze" mid-solve should properly cancel the old render loop via the incrementing token, and the handoff from generation finishing into starting the solver's new frame loop needs to not create overlapping loops. I also want to verify the path-reveal phase: once the solver finds the goal, it should swap the job function to a path-stepping routine and the frame loop should pick that up seamlessly on the next tick. Given limited time, I'll just click "New Maze" mid-animation and take a screenshot to visually confirm no glitches occur.
The carving screenshot looks right: the orange head moves through open passages and the grid fills in behind it. Next I'll click New Maze mid-animation to check that the old view is replaced cleanly.
{"action":"click","x":465,"y":164}{"action":"screenshot"}Frame 1, +0ms
[Browser image supplied to model]
{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."],"dom":"Maze Generator & Solver\nNew Maze\nReplay Solver\nAlgorithm \nBFS\nA*\nCarving passages…\nStart (upper-left)\nFinish (lower-right)\nExplored\nSolution path\nCarving head","images":"attached"}
Frame 1, +0ms
[Browser image supplied to model]
{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."],"dom":"Maze Generator & Solver\nNew Maze\nReplay Solver\nAlgorithm \nBFS\nA*\nCarving passages…\nStart (upper-left)\nFinish (lower-right)\nExplored\nSolution path\nCarving head","images":"attached"}
thinking
The New Maze click worked, confirmed by a fresh carving with a different layout and no leftovers. Now I want to check the solver and final state, but since there's no wait action available, I'll just take another screenshot after a moment to see the progress.
The New Maze click replaced the view cleanly: the second screenshot is a fresh carve with no leftover walls or markers from the first. Next I'll let generation finish and check the solver.
{"action":"screenshot"}Frame 1, +0ms
[Browser image supplied to model]
{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."],"dom":"Maze Generator & Solver\nNew Maze\nReplay Solver\nAlgorithm \nBFS\nA*\nSolved: 134 steps, 167 cells explored. Replay to watch again.\nStart (upper-left)\nFinish (lower-right)\nExplored\nSolution path\nCarving head","images":"attached"}
thinking
The solved maze image looks correct — the path draws through cell centers under the walls, crossing only open passages, and the border looks fine. Let me check for anything else that might need fixing. The A* heuristic seems fine, and explored cells are properly filled during solving. I haven't programmatically verified replay, algorithm switching, BFS, or mid-solve cancellation, but since the path is built via parent links that only traverse passable edges, the logic should be sound — given limited time, I'll wrap up with what's verified.
I've written `index.html` to the working directory as one self-contained file with inline CSS and JS, and checked it in the browser. **Checked:** - **Carving animation:** the carving head moves through open passages and the visited region fills in behind it. - **New Maze mid-carve:** clicking it during generation replaced the view cleanly. The new maze showed no leftover walls or markers from the previous one. - **Solver run (A\*, default):** after generation the solver explored and traced a path from the green Start (upper-left) to the red Finish (lower-right). The screenshot shows 134 steps and 167 cells explored. The yellow path follows open passages, and the legend is visible. - **Console:** no errors. The only message was the browser's sandbox iframe warning. **Not verified:** - Replay Solver, and switching to BFS. The code paths exist but I did not click them. - New Maze clicked while the solver is animating. I only tested it during carving. - Path correctness was checked visually only. The path is built from parent links over passable edges, so it should be valid by construction. - Behaviour at different viewport sizes.