Maze generator & solver · glm-5.3-flash
Output generated Cost / run $0.0037 Runtime 154.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 · 29 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.
index.html (5592 bytes)Successfully wrote to index.html
{"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 (Randomized DFS + BFS)\nNew Maze Replay Solver\nStart\nFinish\nExplored\nSolution\nWall\nCarving maze…","images":"attached"}
thinking
Carving works. Test New Maze mid-animation and solver.
Generation is animating. Let me test New Maze mid-carve and the solver.
{"action":"click","x":548,"y":68}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.","error: seen is not defined","error: path.has is not a function"],"dom":"Maze Generator & Solver (Randomized DFS + BFS)\nNew Maze Replay Solver\nStart\nFinish\nExplored\nSolution\nWall\nCarving maze…","images":"attached"}
thinking
There were console errors: "seen is not defined" and "path.has is not a function" — probably the previous run's stepSolve raced: when finishSolve is called mid loop? Actually errors occurred because when startSolve, stepSolve uses `seen` variable in for-loop — `seen` is const declared inside function, but at the end of stepSolve we reference `seen` again — it's fine. The error "seen is not defined" likely from finishSolve's draw(anim.seen, anim.path) with anim.path being... hmm, "path.has is not a function": path passed is anim.path which may be [] (array) — array has no .has. In stepSolve, if q empties without reaching finish, finishSolve called with anim.path=[] — array. Fix: guard; also when solver finishes early. Better: anim.path should be a Set always; init anim.path=new Set(). Also "seen is not defined": stepSolve after loop references `seen` — that's local const, fine... unless exception earlier? Actually errors might have been from an earlier buggy state mid New Maze click: clicking New Maze while solving → stopAnim clears, fine. Hmm "seen is not defined" could come from stepSolve when anim.q empty at first iteration... no. Wait — the loop `for(const [nx,ny,wi] of neighbors(x,y).map(...))` fine. Maybe the error came from draw(null, ...) during finishGen? No. Possibly from stepSolve when solver reached finish, finishSolve → draw(anim.seen, anim.path) but anim.path=[]? path.has error. And "seen is not defined": in stepSolve, after the for loop `anim.seen=seen` — but if we returned inside loop... no, seen is function-scoped const. Hmm — unless a stepSolve ran while anim from previous generation? When startSolve is called, anim replaced. Errors likely: stepSolve ran once with q from... Actually when clicking New Maze during solve: stopAnim clears timer, startGenerate resets. No errors there. Simplest fix: use Set for anim.path from start, and remove the trailing `anim.seen=seen` line (use anim directly). Let me just make anim.seen the Set referenced: replace seen usage with anim.seen. Fix and retest.
Two console errors appeared. Fixing the `anim.path` type (must be a Set) and the stray `seen` reference:
{"edits":[{"newText":" const prev=new Map();\n anim={prev,seen:new Set([0]),q:[[0,0]],path:new Set()};\n statusEl.textContent='Solving (BSuccessfully replaced 3 block(s) in index.html.
{"action":"reload"}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 (Randomized DFS + BFS)\nNew Maze Replay Solver\nStart\nFinish\nExplored\nSolution\nWall\nCarving maze…","images":"attached"}
thinking
Wait and screenshot later to see solver.
Generation animating cleanly. Let me wait for the solver phase and click New Maze mid-solve to test cancellation:
{"action":"motion"}Frame 1, +0ms
[Browser image supplied to model]
Frame 2, +541ms
[Browser image supplied to model]
Frame 3, +1068ms
[Browser image supplied to model]
Frame 4, +1597ms
[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 (Randomized DFS + BFS)\nNew Maze Replay Solver\nStart\nFinish\nExplored\nSolution\nWall\nSolved! Path length: 81 cells","images":"attached"}
thinking
Solved correctly. Now test New Maze mid-solver — need to click fast during solve. Reload and click quickly.
Solved correctly, path follows open passages. Now testing New Maze cancellation during the solver:
{"action":"reload"}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 (Randomized DFS + BFS)\nNew Maze Replay Solver\nStart\nFinish\nExplored\nSolution\nWall\nCarving maze…","images":"attached"}
{"action":"click","x":548,"y":68}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 (Randomized DFS + BFS)\nNew Maze Replay Solver\nStart\nFinish\nExplored\nSolution\nWall\nCarving maze…","images":"attached"}
thinking
New Maze mid-carve cleanly replaced the view (fresh maze, only new carving visible, no errors). Also should test clicking New Maze during solver phase — click after a delay so solver runs. Then verify Replay Solver.
Clean replacement during carve. Now let me test New Maze during the solver phase (click after solver starts) and then Replay:
{"action":"motion"}Frame 1, +0ms
[Browser image supplied to model]
Frame 2, +537ms
[Browser image supplied to model]
Frame 3, +1067ms
[Browser image supplied to model]
Frame 4, +1594ms
[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 (Randomized DFS + BFS)\nNew Maze Replay Solver\nStart\nFinish\nExplored\nSolution\nWall\nSolved! Path length: 105 cells","images":"attached"}
thinking
Solved again — exploration (blue) clearly covers all reachable cells, yellow path connects S to F. Note the yellow path is superimposed on explored cells; fine. Now test Replay Solver and New Maze during solver (solver runs only ~1s; click New Maze immediately after replay). Test Replay button:
Full BFS explored the maze, path connects S→F. Now testing Replay Solver:
{"action":"click","x":671,"y":68}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 (Randomized DFS + BFS)\nNew Maze Replay Solver\nStart\nFinish\nExplored\nSolution\nWall\nSolving (BFS)…","images":"attached"}
thinking
Replay started but the old drawing is still displayed (canvas not cleared until first stepSolve draw). Minor: initial frame shows previous solution briefly. Fine, but better to clear at start. Quick fix: call draw() at start of startSolve. Also test New Maze mid-solve. Let me apply fix then test both.
Replay works (solver restarted on same maze). One cosmetic issue: the old frame lingers until the first solver step. Fixing, then testing New Maze during solve:
{"edits":[{"newText":" statusEl.textContent='Solving (BFS)…';\n draw(new Set(), new Set());\n timer=setInterval(stepSolve,15);","oldText"Successfully replaced 1 block(s) in index.html.
{"action":"reload"}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 (Randomized DFS + BFS)\nNew Maze Replay Solver\nStart\nFinish\nExplored\nSolution\nWall\nCarving maze…","images":"attached"}
thinking
Wait a moment so the solver starts (~1s gen), then click New Maze during solve. Do a motion (~1.6s reaches solved though — solver takes ~1s). Click immediately: use motion 1 frame then click.
{"action":"motion"}Frame 1, +0ms
[Browser image supplied to model]
Frame 2, +529ms
[Browser image supplied to model]
Frame 3, +1061ms
[Browser image supplied to model]
Frame 4, +1585ms
[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 (Randomized DFS + BFS)\nNew Maze Replay Solver\nStart\nFinish\nExplored\nSolution\nWall\nSolved! Path length: 207 cells","images":"attached"}
thinking
Fine. I haven't yet caught a New Maze click mid-solve; the solver is fast (~1s). It already worked mid-carve, and the same stopAnim path is used, so behavior is consistent. One more: click New Maze immediately after a reload+short delay... I did test New Maze during carving, and the identical stopAnim+startGenerate handles solve too. Good enough. Done.
Everything checks out. Done — `index.html` in the working directory. **What I built:** - 25×15 maze generated with randomized recursive backtracking (iterative stack, animated carving with a purple "current stack" trace), walls drawn as clear light strokes; all cells reachable, perfect maze (exactly one path between any two cells). - Automatic BFS solver after generation: blue flood-fill exploration animated, then the full S→F path highlighted in yellow, with green Start (S) and red Finish (F) markers plus a legend and status line. - **New Maze** cancels any running timer and starts fresh generation; **Replay Solver** reruns BFS on the existing walls only (guarded so it can't double-run mid-animation). **Verified in browser:** - Initial load: carving animates visibly (multiple frames show progressive purple carve trace). - Clicked **New Maze** mid-carving: previous view replaced cleanly with a fresh maze, no console errors. - Solver runs to completion with "Solved! Path length: N cells" (checked 81, 105, 207 cells across runs); yellow path visibly follows open corridors from S to F, and unexplored dead regions stay dark. - **Replay Solver** restarts BFS on the unchanged maze (status shows "Solving (BFS)…"). - Fixed two console errors found during testing (path stored as array instead of Set; stale variable reference after refactor). **Not explicitly verified:** clicking New Maze during the ~1-second solve phase specifically (only tested during carve; the same `stopAnim()` code path handles both), and exact wall-openness consistency across every cell by programmatic audit (verified visually).