Snake · qwen3.6-35b-a3b
Output generated Cost / run $0.0032 Runtime 39.1s
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.
RUN
METRICS
Transcript · 7 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
The user wants me to build a Snake game in a single HTML file with inline CSS and JS. Let me plan the implementation: 1. 20x20 grid canvas 2. Arrow key controls (ignore reverse direction) 3. Food placement in unoccupied cells 4. Collision detection (walls, self) 5. Start, Pause/Resume, Restart buttons 6. Score display 7. Win state when board is full 8. Prevent scroll on arrow keys Let me write the complete file and then test it.
/tmp/job-0k4ud2/index.html (10434 bytes)Successfully wrote to /tmp/job-0k4ud2/index.html
thinking
File written. Now let me open it in the browser and test it.
{"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":"🐍 SNAKE\nScore: 0\nPress Start\nStart\nPause\nRestart\nUse Arrow Keys to move | Start / Pause/Resume / Restart","images":"attached"}
thinking
The initial render looks good. The game UI is displaying with the canvas, score, controls, and buttons. Now I need to test the actual gameplay behaviors: 1. Start the game and make turns to check grid-aligned movement 2. Pause and resume 3. Restart and verify snake length/score return to initial values Let me perform these checks using the browser tools.
The UI renders correctly. Let me test the gameplay behaviors now. Testing: Start → move right → check position → Restart and verify reset. <bash> # Click Start button mouse_move 300 380 && mouse_click left 300 380 && sleep 1 # Wait a moment for the game to start sleep 1 # Simulate key press for 'right' arrow (→) xte -xdisplay :0 key 113 sleep 0.1 </bash>