Snake · muse-ember
Output generated Cost / run $0.0101 Runtime 35.5s
Prompt for this run
Build a playable Snake game on a canvas with a 20 by 20 cell board. 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: - Use arrow keys to turn a snake that advances one cell at a time. Ignore a direction that would immediately reverse into its own neck, including rapid inputs before the next movement step. - Place one food item in an unoccupied cell. Eating it grows the snake by one segment, increases the score, and spawns new food in another unoccupied cell. - Use solid board boundaries: hitting a wall or the snake's body ends the game. Moving into a tail cell that vacates on that same non-growing step is allowed. - Provide Start, Pause/Resume, and Restart. Restart resets snake length, direction, score, food, and game state. Filling the board shows a win state instead of trying to place impossible food. - Display the controls and score. Prevent arrow keys from scrolling the page. Verify: Start the game and make a few turns to check grid-aligned movement and direction response. Pause and resume, then use Restart and check that snake length and score return to their initial values and food occupies a free cell.
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.
METRICS
Transcript · 25 messages
Build a playable Snake game on a canvas with a 20 by 20 cell board. 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: - Use arrow keys to turn a snake that advances one cell at a time. Ignore a direction that would immediately reverse into its own neck, including rapid inputs before the next movement step. - Place one food item in an unoccupied cell. Eating it grows the snake by one segment, increases the score, and spawns new food in another unoccupied cell. - Use solid board boundaries: hitting a wall or the snake's body ends the game. Moving into a tail cell that vacates on that same non-growing step is allowed. - Provide Start, Pause/Resume, and Restart. Restart resets snake length, direction, score, food, and game state. Filling the board shows a win state instead of trying to place impossible food. - Display the controls and score. Prevent arrow keys from scrolling the page. Verify: Start the game and make a few turns to check grid-aligned movement and direction response. Pause and resume, then use Restart and check that snake length and score return to their initial values and food occupies a free cell.
thinking
index.html (13759 bytes)Successfully wrote to index.html
thinking
{"action":"inspect"}Frame 1, +0ms
[Browser image supplied to model]
{"console":[],"dom":"SNAKE 20 × 20\nCANVAS BOARD • SOLID WALLS\nSCORE\n0\nLENGTH\n3\nREADY\n▶ Start\n⏸ Pause\n↻ Restart\n↑↓←→ turn • Space start / pause • R restart\nEat the red food to grow. Hitting a wall or your own body ends the game.","images":"attached"}
thinking
{"action":"click","x":493,"y":665}Frame 1, +0ms
[Browser image supplied to model]
{"console":[],"dom":"SNAKE 20 × 20\nCANVAS BOARD • SOLID WALLS\nSCORE\n0\nLENGTH\n3\nPLAYING\n▶ Start\n⏸ Pause\n↻ Restart\n↑↓←→ turn • Space start / pause • R restart\nEat the red food to grow. Hitting a wall or your own body ends the game.","images":"attached"}
thinking
{"action":"screenshot"}Frame 1, +0ms
[Browser image supplied to model]
{"console":[],"dom":"SNAKE 20 × 20\nCANVAS BOARD • SOLID WALLS\nSCORE\n0\nLENGTH\n3\nGAME OVER\n▶ Start\n⏸ Pause\n↻ Restart\nYou hit the wall! Final score: 0. Press Restart to play again.\n↑↓←→ turn • Space start / pause • R restart\nEat the red food to grow. Hitting a wall or your own body ends the game.","images":"attached"}
thinking
{"path":"index.html","edits":[{"oldText":" function setState(next, note = '') {\n state = next;\n noteEl.textContent = note;\n updSuccessfully replaced 2 block(s) in index.html.
thinking
{"action":"reload"}Frame 1, +0ms
[Browser image supplied to model]
{"console":[],"dom":"SNAKE 20 × 20\nCANVAS BOARD • SOLID WALLS\nSCORE\n0\nLENGTH\n3\nREADY\n▶ Start\n⏸ Pause\n↻ Restart\n↑↓←→ turn • Space start / pause • R restart\nEat the red food to grow. Hitting a wall or your own body ends the game.","images":"attached"}
{"action":"click","x":493,"y":665}Frame 1, +0ms
[Browser image supplied to model]
{"console":[],"dom":"SNAKE 20 × 20\nCANVAS BOARD • SOLID WALLS\nSCORE\n0\nLENGTH\n3\nPLAYING\n▶ Start\n⏸ Pause\n↻ Restart\n↑↓←→ turn • Space start / pause • R restart\nEat the red food to grow. Hitting a wall or your own body ends the game.","images":"attached"}
thinking
{"action":"key","text":"ArrowUp"}Frame 1, +0ms
[Browser image supplied to model]
{"console":[],"dom":"SNAKE 20 × 20\nCANVAS BOARD • SOLID WALLS\nSCORE\n0\nLENGTH\n3\nGAME OVER\n▶ Start\n⏸ Pause\n↻ Restart\nYou hit the wall! Final score: 0. Press Restart to play again.\n↑↓←→ turn • Space start / pause • R restart\nEat the red food to grow. Hitting a wall or your own body ends the game.","images":"attached"}
thinking
{"action":"click","x":702,"y":665}Frame 1, +0ms
[Browser image supplied to model]
{"console":[],"dom":"SNAKE 20 × 20\nCANVAS BOARD • SOLID WALLS\nSCORE\n0\nLENGTH\n3\nPLAYING\n▶ Start\n⏸ Pause\n↻ Restart\n↑↓←→ turn • Space start / pause • R restart\nEat the red food to grow. Hitting a wall or your own body ends the game.","images":"attached"}
thinking
{"action":"click","x":594,"y":665}Frame 1, +0ms
[Browser image supplied to model]
{"console":[],"dom":"SNAKE 20 × 20\nCANVAS BOARD • SOLID WALLS\nSCORE\n0\nLENGTH\n3\nGAME OVER\n▶ Start\n⏸ Pause\n↻ Restart\nYou hit the wall! Final score: 0. Press Restart to play again.\n↑↓←→ turn • Space start / pause • R restart\nEat the red food to grow. Hitting a wall or your own body ends the game.","images":"attached"}
thinking
{"command":"ls -lh index.html && grep -c \"http\" index.html || true; grep -n \"setInterval\\|preventDefault\\|spawnFood\" index.html | head-rw-r--r-- 1 node node 14K Nov 10 01:08 index.html 0 145: food = spawnFood(); 150: function spawnFood() { 164: function startTimer() { stopTimer(); timerId = setInterval(tick, TICK_MS); } 273: food = spawnFood(); 367: e.preventDefault();
thinking
Built `index.html` (single self-contained file, no external resources) with a 20×20 canvas Snake game: - Arrow/WASD steering with a direction queue — opposite/reverse inputs are rejected against the last queued direction, preventing neck-reversal on rapid inputs; arrow keys and Space are `preventDefault`-ed to stop page scrolling. - One food item spawned only on free cells; eating grows the snake, adds 10 to the score, and spawns new food. - Solid wall and self collisions end the game, with the vacating tail cell allowed on non-growing steps; filling all 400 cells triggers the win state instead of food placement. - Start, Pause/Resume, and Restart buttons (plus Space/R shortcuts), with Restart resetting snake, direction, score, food, and state. Score, length, status, and controls are displayed. **Actually checked in the browser:** - Initial render with no console errors; snake at start position, food visible on a free cell, score 0 / length 3. - Start → status changed to PLAYING and the snake advanced grid-aligned across the board until hitting the right wall, showing “Game Over — You hit the wall!” - Restart after game over → snake, score (0), and length (3) reset, new food in a free cell, status PLAYING. - Fixed a found issue: the “Press Start” overlay lingered after starting; state changes now redraw immediately. **Remains unverified visually:** pause/resume and successful turning/eating — tool latency between actions exceeded the ~1.3 s it takes the snake to reach a wall from its start position, so the game ended before a second input could be delivered. Those paths are implemented in the game loop/queue logic as described above.