# One-Shot Prompt

**Theme**: Neon Arcade
**Generated**: 6 April 2026

## 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**.

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.

### Visual Treatment

**Palette**:
- Deep void background: `#0a0a1a`
- Electric cyan snake glow: `#00f0ff`
- Hot magenta accent: `#ff2d75`
- Laser purple highlights: `#a855f7`
- Grid lines: `#1a1a3e`

**Typography**: Use Orbitron font via Google Fonts for display text, monospace for score.

**Background**: Subtle perspective grid lines receding to a vanishing point, with slow color-cycling horizon glow. Use a semi‑transparent overlay each frame for a neon trail effect.

**Snake appearance**:
- Segments: glowing cyan squares with `shadowBlur: 15, shadowColor: '#00f0ff'`
- Head: slightly larger with forward-facing chevron (triangle) and two small white “eyes”
- Trail: don't fully clear canvas; instead draw a `rgba(10,10,26,0.15)` overlay each frame — previous frames fade gradually, creating a neon afterglow.

**Food design**:
- Shape: pulsating neon orb with concentric ring animation
- Color: hot magenta (`#ff2d75`) with purple glow (`#a855f7`)
- Animation: scale cycles between 0.8 and 1.2 every 800ms, rings expand outward and fade

**Particle effects**:
- On food collection: burst of 8‑12 particles with random velocities, colored cyan and magenta, gravity‑affected fade‑out
- Grid pulse: when food is eaten, a subtle radial wave propagates outward from the collection point (grid lines brighten briefly)

**Screen transitions**:
- Start screen: title “SERPENTINE” in glowing cyan, subtitle “Chase the light”, control hint, “Press SPACE to start”
- Playing screen: score displayed top‑left in monospace with glow, high‑score top‑right
- Paused screen: translucent dark overlay with “PAUSED” in large cyan text, press P or ESC to resume
- Game over screen: final score, new high‑score notification, “Press SPACE to restart” — flash the canvas white for one frame then fade to dark overlay

### Game Mechanics

**Core gameplay**:
- Snake moves continuously in current direction, speed increases gradually with score (cap at reasonable maximum)
- Controls: arrow keys AND WASD (both sets), touch/swipe for mobile
- Direction input buffering: queue up to 2 direction changes to handle fast inputs
- Prevent 180‑degree reversals (cannot go left if moving right)
- Eating food grows snake by 1 segment, adds 10 points
- Collision with walls or self → game over
- High score persisted in `localStorage`

**Game states**:
- START: title screen, ambient grid animation, press SPACE or tap to begin
- PLAYING: active gameplay, score display, pause with P or ESC
- PAUSED: game frozen, overlay with “PAUSED”
- GAME_OVER: show final score, high score, restart prompt

**Mobile support**:
- Canvas scales responsively to viewport (maintain aspect ratio)
- Touch/swipe detection: minimum 30px swipe to change direction
- Tap anywhere on start/game‑over screens to proceed

**Polish details**:
- Smooth snake movement: interpolate segment positions between grid cells using `lerp` with delta‑time, not teleport
- CRT‑style vignette: radial gradient overlay at canvas edges for depth
- Retina/HiDPI support: set `canvas.width/height` to `devicePixelRatio * logical size`, scale context accordingly
- `prefers‑reduced‑motion` media query to simplify animations
- Page title: “Serpentine — Neon Snake”
- Favicon: inline SVG data URI of a neon snake head

### Technical Constraints

- Single `.html` file: all HTML, CSS, JS in one file, no external images
- No CDN dependencies except Google Fonts (`@import`)
- Vanilla JS only, no frameworks
- HTML5 Canvas rendering, no DOM‑based grid
- Must work as a static file, self‑hostable on CodePen, Vercel, or Cloudflare Pages

### Quality Bar

The game should feel like a polished indie arcade experience — not a basic tutorial clone. Use smooth `requestAnimationFrame` loop with delta‑time, ambient animation even when paused, and a cohesive neon‑synthwave aesthetic throughout.

## Notes

- Game name: “Serpentine”
- Hosting: CodePen / Vercel / Cloudflare Pages
- Technique: neon trail via semi‑transparent overlay, glow via Canvas shadowBlur, input buffering, interpolation movement, particle burst
- Favicon: `<link href="data:image/svg+xml,..." rel="icon">` with neon snake head SVG