Challenges

Create a complete, playable Snake game as a single self-contained HTML file. No external libraries or assets.

REQUIRED FEATURES:
1. Canvas-based rendering (800x600 or viewport-filling canvas)
2. Snake movement on a grid (20x20 cells visible)
3. Arrow key + WASD controls (prevent reverse-direction)
4. Touch swipe controls for mobile (detect swipe direction)
5. Food spawns at random empty cell (different color per food type)
6. Score tracking (current score + high score persisted in localStorage)
7. Speed increases every 5 food eaten (faster tick interval)
8. Game states: start screen (press any key/tap to start), playing, paused (Space/Esc), game over
9. Game over shows final score + high score + "Press any key to restart"
10. Snake body rendered with rounded rectangles, head with eyes
11. Food rendered as apple/apple-icon style (red circle with leaf)
12. Grid lines visible (faint gray) for clarity
13. Score and high score displayed as clean HUD overlay
14. Responsive: canvas auto-scales to fit viewport (maintains aspect ratio)
15. Wall wrapping OR wall collision (choose one and document on screen)
16. Particle effect on food eat (small burst animation)
17. Smooth game over animation (flash snake red, brief delay before restart)

AUDIO:
18. Use Web Audio API for sound effects (food eat, game over) — no external files
19. Generate tones programmatically (oscillator + gain node, short beep for eat, descending tone for death)

CODE STRUCTURE:
20. All in one <script> tag
21. Use requestAnimationFrame with fixed-step game loop (tick interval)
22. Event listeners for keyboard and touch
23. Clean separation: game state object, update function, render function

STYLING:
24. Dark background with neon-style colors (green snake, red food, white text)
25. Canvas has subtle shadow/glow effect
26. Clean, modern font (system sans-serif)
27. No scrollbars, black body background