Snake · hy3
Build a playable Snake game on a canvas with arrow-key controls, a growing tail, food, score, and a game-over and restart state.
transcript · 4 messages
Build a playable Snake game on a canvas with arrow-key controls, a growing tail, food, score, and a game-over and restart state.
/workspace/index.html (9473 bytes)Successfully wrote 9473 bytes to /workspace/index.html
thinking
The user asked me to build a playable Snake game, and I've already written the complete `index.html` file with all the required features. Let me verify what I've included: 1. ✅ Canvas-based Snake game 2. ✅ Arrow-key controls 3. ✅ Growing tail (snake grows when eating food) 4. ✅ Food that appears randomly 5. ✅ Score display 6. ✅ Game-over state 7. ✅ Restart state (press any arrow key to restart) The file is self-contained with: - CSS in a `<style>` tag - JavaScript in a `<script>` tag - No external resources, CDNs, or network requests - Inline styling I also added some nice extras: - Best score with localStorage persistence - Touch/swipe support for mobile - Visual effects (glow, eyes on snake head, gradient body) - Grid lines - Blinking "press any arrow key" prompt - Responsive design The file has been written to `/workspace/index.html`. The task is complete. I should provide a brief confirmation to the user.
The Snake game is ready at `/workspace/index.html`. Here's what's included: **Gameplay:** - Arrow keys control the snake (also supports touch/swipe on mobile) - Snake grows by 1 segment each time it eats food (red glowing dot) - Score increments by 1 per food eaten - Best score is saved to `localStorage` **Game Over & Restart:** - Hitting a wall or yourself triggers game over - A dark overlay appears showing your final score - Press any arrow key to restart immediately **Visuals (all self-contained, no external resources):** - Dark background with subtle grid lines - Snake has a green-to-teal gradient body with glowing head and white eyes (that follow direction) - Food is a glowing red circle - Score/best display in the header with cyan styling - Canvas has a cyan border glow Open `index.html` in any browser to play!
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
Snake game renders with grid, food, and score; arrow keys move snake to corner but food never eaten, score stays 0.
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.