# One-Shot Prompt

**Theme**: Neon Arcade — Crisp Grid
**Generated**: 2026-04-25

## Prompt

Write a complete Snake game using HTML5 Canvas with all HTML, CSS, and JavaScript in a single self-contained file. The theme is "neon arcade snake with crisp grid feel" — electric glow on a dark, clean grid.

**Game name**: Serpentine

**Visual identity**:
- **Palette**: Deep void (#0a0a1a), electric cyan (#00f0ff), hot magenta (#ff2d75), laser purple (#a855f7), grid line (#1a1a3e)
- **Background**: Dark void with a crisp grey grid overlay (subtle 1px lines forming a regular grid pattern). A dark radial vignette at the canvas edges draws the eye to the centre.
- **Snake**: Neon cyan segments with a strong `shadowBlur` glow effect. Each segment is a rounded rectangle with a 1px gap between them. The head is distinguished by two small magenta eyes and a slightly larger size. The snake leaves a brief afterglow trail via semi-transparent overlay.
- **Food**: A pulsing magenta orb with concentric ring ripple animation. Glows with laser purple aura.
- **Grid**: Clean, visible grid lines at low opacity (0.06–0.08) that give the play area a crisp, measured feel. Grid is a flat orthogonal grid (not perspective).
- **Score**: Rendered directly on the canvas with neon glow, positioned top-left. High score shown in smaller text below.

**Game mechanics**:
- 20x20 grid on a 600x600 canvas
- Arrow keys AND WASD for direction control
- Direction input buffering (queue up to 2 moves)
- 180-degree reversal prevention
- Snake speed increases every 5 food collected (caps at 120ms interval)
- Score increments by 1 per food
- High score persisted in localStorage
- Food respawns at random empty cell with a grow-in animation
- Particle burst on food collection (10-14 particles in cyan/magenta, physics-based fade)

**Game states**:
1. **Start screen** — "SERPENTINE" title in large neon cyan text with glow. Subtitle "Chase the light". Controls hint: "Arrow keys / WASD to move  |  P to pause". "Press SPACE or tap to start" blinks.
2. **Playing** — Active gameplay with score display and subtle particle ambiance.
3. **Paused** — Semi-transparent dark overlay with "PAUSED" centred, pulsing gently.
4. **Game over** — Dark overlay with "GAME OVER", final score, high score, and "Press SPACE to restart". Brief screen flash (white radial flash at collision point) on death.

**Technical requirements**:
- Single self-contained HTML file (CSS + JS inline, no external resources)
- HTML5 Canvas rendering
- Retina/HiDPI display support via devicePixelRatio scaling
- Smooth game loop with requestAnimationFrame and fixed-timestep updates
- Canvas trails via semi-transparent fillRect overlay instead of full clearRect
- Mobile responsive: canvas scales to viewport width, touch swipe controls
- prefers-reduced-motion respected
- Page title: "Serpentine — Neon Snake"
- No Web Audio API (soundless by default)
- No console errors, no memory leaks

## Notes

- Uses the trail/afterglow technique where the canvas is not fully cleared between frames, creating a brief comet-tail effect behind the snake
- Retina canvas setup ensures crisp rendering on high-DPI displays
- Particle system uses simple velocity + gravity + lifespan for natural-feeling bursts
- Grid overlay gives the classic arcade "measured playfield" look without being distracting
- Hosting: CodePen / Vercel / local file open