How to Build Snake in Cursor

Create a classic Snake game as a single HTML file with embedded CSS and JavaScript. Here are the requirements:

GAME BOARD:
- Canvas-based game board, 400x400 pixels on desktop, scales to fit mobile screen width
- Grid size: 20x20 cells (each cell is 20px)
- Dark background (#1a1a2e) with subtle grid lines (#16213e)
- Centered on the page with a dark background behind it

SNAKE:
- Starts in the center of the board, 3 segments long, moving right
- Controlled with arrow keys (up, down, left, right)
- Cannot reverse direction (pressing left while moving right does nothing)
- Head is a brighter green (#00ff88), body segments are a darker green (#00cc66)
- Smooth movement: snake moves one cell per game tick
- Snake wraps... no, snake dies when hitting any wall (game over)
- Snake dies when hitting its own body (game over)

FOOD:
- One red (#ff4757) food item on the board at all times
- Randomly placed on an empty cell (not on the snake)
- When the snake's head moves onto the food, the snake grows by 1 segment and new food spawns
- Brief flash effect when food is eaten

SCORING AND SPEED:
- Score starts at 0, increases by 10 for each food eaten
- Score displayed above the game board in large white text
- Game speed starts at 150ms per tick
- Speed increases by 5ms every 3 food items eaten (game gets faster over time)
- Show current level (Level 1 at start, increases every 5 food items)

GAME STATES:
- Start screen: show "SNAKE" title and "Press SPACE to Start" message over the game board
- Playing: active gameplay
- Game over: show "GAME OVER" with final score, high score (saved to localStorage), and "Press SPACE to Restart"
- Show high score on start screen too

UI:
- Retro pixel-style aesthetic
- Score and level displayed in a header bar above the canvas
- Use a monospace font for all text
- Game should auto-focus so keyboard input works immediately
- Page background matches the game aesthetic

Add these features to the Snake game:
1. Show the current speed as "Speed: X" next to the level display, where X increases as the game gets faster
2. Add pause functionality: pressing P or Escape pauses the game and shows "PAUSED - Press P to Resume" overlaid on the game board in semi-transparent black
3. The game should also pause if the browser tab loses focus
4. Add a brief 3-2-1 countdown when unpausing before the snake starts moving again

Improve the visuals of the Snake game:
1. Give the snake body a gradient effect: the head is brightest, and each segment gets slightly darker toward the tail
2. Add rounded corners to each snake segment so it looks smoother
3. Add a subtle glow effect around the food item (pulsing red glow)
4. When food is eaten, show a brief "+10" text that floats up from the food position and fades out
5. Add a subtle trail effect behind the snake tail (fading ghost segments)
6. Make the grid lines slightly animated (very subtle pulse) on the start screen

Add special food to the Snake game:
1. Regular food (red) appears normally: +10 points, grows snake by 1
2. Golden food (gold/yellow, glowing) appears randomly with 20% chance instead of regular food: +30 points, grows snake by 1, but disappears after 5 seconds if not eaten
3. Blue food (blue, pulsing) appears every 10 regular food eaten: +20 points, does NOT grow the snake (helpful when you're getting long), stays for 7 seconds
4. Show a small indicator next to the score showing which type of food is currently on the board

Add retro sound effects to the Snake game using the Web Audio API (no external files):
1. A short "blip" sound when the snake eats regular food
2. A special "power-up" chime when eating golden or blue food
3. A low "thud" followed by a descending tone when the game ends
4. A subtle rhythmic tick that plays on each movement (very quiet, adds to the retro feel)
5. Add a mute/unmute button (speaker icon) in the top right corner using an HTML element overlaid on the page
6. Sounds should be muted by default
7. A brief jingle when the player beats their high score

Add mobile support to the Snake game:
1. On screens under 768px wide, resize the canvas to fill the screen width with 16px padding on each side
2. Add on-screen directional buttons below the game board: Up arrow on top, Left and Right arrows in the middle row, Down arrow on the bottom. Style them as large circular buttons (60px diameter) with arrow icons
3. Add swipe gesture support: swiping on the canvas changes the snake direction (swipe up = up, etc.)
4. The on-screen buttons should only appear on touch devices
5. Add a "Tap to Start" message on mobile instead of "Press SPACE to Start"
6. Make sure touch events don't cause the page to scroll while playing

Add a difficulty selection on the start screen: Easy (speed starts at 200ms, walls wrap around instead of killing), Normal (speed starts at 150ms, wall collision kills), Hard (speed starts at 100ms, wall collision kills, obstacles appear on the board every 15 food items eaten — gray blocks the snake cannot pass through). Show the selected difficulty on the game over screen next to the score.

Add a "Time Attack" mode selectable from the start screen. In Time Attack, the player has 90 seconds to get the highest score possible. The snake doesn't speed up over time. Show a large countdown timer above the game board. When time runs out, show the game over screen with the final score. Track the best Time Attack score separately in localStorage.

Add a screen shake effect when the snake dies (the canvas shakes briefly). Add a ripple effect on the grid when food spawns (cells near the food briefly light up). When the snake eats food, the snake head should briefly flash white. On the game over screen, the snake should do a "death animation" where segments fall off one by one from tail to head. Add a particle burst when golden food is eaten.

Expand the high score system: save the top 5 scores with the date and difficulty level to localStorage. On the start screen, show a "High Scores" section with a table listing rank, score, difficulty, and date. Highlight the current session's best score if it's on the leaderboard. Add a "Clear Scores" button at the bottom of the high scores list.

Add a two-player mode: Player 1 uses arrow keys (green snake), Player 2 uses WASD (blue snake). Both snakes are on the same board. Each player has their own score. If a snake hits the other snake's body, that snake dies and the other player wins. If both snakes hit each other head-on, it's a draw. The board should be larger (30x30) in two-player mode. Show both scores in the header with player colors.