Snake · glm-4.7
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.
thinking
The user wants me to build a Snake game as a single-page web application. Let me plan the implementation: 1. HTML structure with a canvas element 2. CSS for styling (centered game, nice appearance) 3. JavaScript for game logic: - Snake represented as an array of segments - Food spawning at random positions - Arrow key controls to change direction - Game loop with requestAnimationFrame or setInterval - Collision detection (walls and self) - Score tracking - Game over state with restart functionality Let me write a complete, self-contained index.html file with all the functionality.
I'll create a complete Snake game in a single HTML file with all the requested features.
index.html (11519 bytes)Successfully wrote 11519 bytes to index.html
thinking
I've created a complete Snake game in a single HTML file. The game includes: 1. **HTML Structure**: Canvas element, score board, game over overlay, and start hint 2. **CSS Styling**: - Dark gradient background - Glowing effects for the game container and snake - Styled score board with current and high score - Game over overlay with restart button - Responsive layout centered on screen 3. **JavaScript Features**: - Snake represented as an array of segments - Food spawning at random positions (avoiding snake body) - Arrow key and WASD controls - Prevents 180-degree turns (can't immediately reverse) - Score tracking (10 points per food) - High score saved to localStorage - Speed increases as you eat more food - Collision detection (walls and self) - Game over state with overlay - Restart functionality - Visual polish: grid background, glowing effects, gradient snake colors, eyes on snake head - Start hint displayed before first keypress The game is fully self-contained with no external dependencies or CDN requests.
I've created a complete Snake game in a single HTML file. Here's what's included: **Features:** - 🎮 **Arrow key controls** (or WASD) with direction smoothing - 🐍 **Growing tail** - snake grows when eating food - 🍎 **Food spawning** - randomly placed, never on the snake - 📊 **Score tracking** - 10 points per food item - 🏆 **High score** - persisted in localStorage - ⚡ **Speed increase** - game gets faster as you score - 💀 **Game over state** - shows when hitting walls or yourself - 🔄 **Restart button** - play again after game over **Visual Polish:** - Dark gradient background with subtle grid - Glowing effects on snake head and food - Gradient-colored snake body (fades from head to tail) - Eyes on the snake head that follow the direction - Smooth game over overlay transition - Start hint before first keypress **How to Play:** 1. Press any arrow key to start 2. Use arrow keys or WASD to control the snake 3. Eat the red food to grow and score 4. Avoid hitting the walls or your own tail 5. Click "Play Again" when game over Open `index.html` in a 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 with canvas grid, score, snake movement via arrows/WASD, and game-over overlay with restart button.
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.