Snake · laguna-xs-2.1
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 · 10 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.
thinking
The user wants me to create a playable Snake game as a single HTML file with all CSS and JS inline. Let me build this from scratch. I need to create: 1. A canvas element 2. CSS for styling 3. JavaScript for game logic including: - Snake movement with arrow keys - Growing tail - Food spawning - Score tracking - Game over state - Restart functionality Let me write a complete, self-contained index.html file.
/workspace/index.html (9976 bytes)Successfully wrote 9976 bytes to /workspace/index.html
thinking
I've created a complete Snake game in a single HTML file. Let me verify the file exists and check its contents.
{"command":"ls -la /workspace/index.html && head -50 /workspace/index.html"}-rw-r--r-- 1 node node 9978 Jul 22 17:34 /workspace/index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Snake Game</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; overflow: hidden; } .game-container { text-align: center; } h1 { color: #fff; margin-bottom: 10px; font-size: 2.5rem; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); } .score-container { color: #fff; font-size: 1.5rem; margin-bottom: 15px; font-weight: bold; } canvas { background: #0f0f23; border: 3px solid #00ff88; border-radius: 10px; box-shadow: 0 0 20px rgba(0, 255, 136, 0.3); } .game-over { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.9); border: 2px solid #ff4444; border-radius: 15px;
thinking
The file is created successfully. Let me verify the complete file is there and check that it's a complete HTML file.
{"command":"wc -l /workspace/index.html && tail -20 /workspace/index.html"}312 /workspace/index.html break; case 'r': case 'R': restartGame(); break; case ' ': e.preventDefault(); break; } }); // Start the game initGame(); draw(); // Auto-start on page load startGame(); </script> </body> </html>
thinking
The file is complete with 312 lines and properly closed with </html>. Let me verify the file is complete by checking the end.
{"path":"/workspace/index.html","offset":300}e.preventDefault(); break; } }); // Start the game initGame(); draw(); // Auto-start on page load startGame(); </script> </body> </html>
I've created a complete playable Snake game in a single self-contained HTML file at `/workspace/index.html`. The game features: **Game Features:** - **Arrow-key controls** - Move the snake with up/down/left/right arrows - **Growing tail** - Snake grows when it eats food - **Food spawning** - Red food appears randomly on the grid - **Score tracking** - Score increases by 10 for each food eaten - **Game-over state** - Detected when snake collides with itself - **Restart functionality** - Press 'R' key or click the restart button **Visual Features:** - Dark gradient background with neon green snake - Subtle grid pattern - Snake head highlight effect - Smooth gradient on snake body segments - Animated food with highlight - Centered game-over overlay with styled restart button **Technical Details:** - All CSS in `<style>` tag - All JavaScript in `<script>` tag - No external resources or network requests - Canvas-based rendering (400x400px, 20x20 grid) - Snake wraps around screen edges - Speed increases slightly as score grows
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 canvas with moving snake responding to arrow keys and WASD, score display, food dot visible.
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.