# One-Shot Prompt

**Theme**: Neon Arcade
**Generated**: 2026-04-17

## Prompt

Write a complete Snake game using HTML5 Canvas with all HTML, CSS, and JavaScript in a single self-contained file themed around Neon Arcade — synthwave arcade cabinet, electric trails on a dark grid.

The game must feel like a designer crafted it — not a tutorial exercise. Every pixel should feel intentional, from the snake's movement trail to the food animation to the game-over screen.

### Theme Visual Treatment

**Palette**: Deep void (#0a0a1a), electric cyan (#00f0ff), hot magenta (#ff2d75), laser purple (#a855f7), grid blue (#1a1a3e)

**Typography**: Orbitron (display, Google Fonts CDN), monospace (score)

**Background**: Subtle perspective grid lines receding to a vanishing point, slow color-cycling horizon glow. Dark void with CRT-style vignette via radial gradient overlay.

**Snake appearance**: Glowing segments with additive-blend trail. Head has forward-facing chevron shape. Cyan body with magenta glow on head segment. Trail uses semi-transparent overlay technique — canvas is not fully cleared each frame, creating afterglow.

**Food design**: Pulsing neon orb with concentric ring animation. Hot magenta color with expanding ring pulse cycle. Particle burst (8-12 particles) on collection — physics-based fade with gravity.

**Particle effects**: On food collection, 8-12 particles burst outward in all directions, colored magenta/cyan, with gravity-affected fade. Screen shake on game over (subtle 3-frame displacement).

**Screen transitions**: Fade between states — start screen dissolves into gameplay, game over fades in over frozen game state.

### Game States

1. **Start screen** — "SERPENTINE" title in Orbitron with neon glow, controls hint in monospace, "PRESS SPACE TO START" pulsing, scanline overlay
2. **Playing** — Active gameplay, score top-left in cyan monospace with glow, high score top-right
3. **Paused** — "PAUSED" overlay with scanline effect, press P or ESC to resume
4. **Game over** — "GAME OVER" in magenta with flicker, final score, high score (with NEW HIGH SCORE flash if beaten), "PRESS SPACE TO RESTART"

### Technical Requirements

- **Single file**: All HTML, CSS, JS in one `index.html`
- **No external images**: CSS gradients, Canvas API drawing, SVG inline only
- **HTML5 Canvas**: Game rendered on `<canvas>` — no DOM grid
- **Smooth movement**: requestAnimationFrame with delta-time interpolation between grid positions
- **Direction input buffering**: Queue up to 2 inputs to prevent lost fast inputs
- **No 180-degree reversal**: Cannot go left if moving right
- **Speed scaling**: Snake speeds up gradually as score grows (cap at reasonable max)
- **High score**: Persisted in localStorage
- **Mobile support**: Touch swipe controls, responsive canvas scaling, tap-to-start
- **Retina support**: devicePixelRatio scaling on canvas
- **Reduced motion**: Respects prefers-reduced-motion media query
- **Page title**: "Serpentine — Neon Arcade"
- **Favicon**: Inline SVG data URI with snake icon

### Color Palette (apply with intention)

- Background: #0a0a1a (deep void)
- Grid lines: #1a1a3e (grid blue)
- Snake body: #00f0ff (electric cyan)
- Snake head glow: #ff2d75 (hot magenta)
- Food orb: #ff2d75 (hot magenta)
- Accent: #a855f7 (laser purple)
- Score text: #00f0ff (electric cyan)
- UI panels: rgba(10, 10, 26, 0.85) with cyan border

### Score Display

In-canvas rendering with glow effect (`shadowBlur: 10, shadowColor: '#00f0ff'`). Score top-left, high score top-right. Both in monospace. Format: "SCORE: 000" and "BEST: 000".

### Animation Details

- Snake segments interpolate between grid positions (lerp, not teleport)
- Trail afterglow: semi-transparent fillRect each frame (alpha 0.12-0.18)
- Food pulse: concentric ring expanding outward, 1.2s cycle
- Particle burst: 10 particles, random velocity, 0.03 decay rate, gravity 0.05
- Screen shake: 3-frame canvas translation on game over (±3px)
- CRT vignette: radial gradient overlay, dark edges
- Grid pulse: brief brighten of grid lines emanating from food position

## Notes

- Technique: Canvas shadowBlur for all glow effects
- Technique: Semi-transparent overlay for trail/afterglow instead of clearRect
- Technique: requestAnimationFrame with fixed timestep game logic
- Hosting: Vercel static / CodePen / Cloudflare Pages