# One-Shot Prompt

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

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

### Theme Visual Treatment
Dark, deep-black background `#050508`. The arena is defined by a subtle, pulsing neon grid that glows in cyan `#00ffff` with very low opacity. The snake is constructed as a chain of rounded glowing segments with a hot pink `#ff2a6d` head and a linear-gradient cyan `#00ffff` through violet `#bd00ff` body. The snake must leave an electric trail (afterglow) and each segment must glow (glow/blur effect via canvas `shadowBlur`).

The food is a pulsing, rotating neon diamond (square rotated 45°) in bright yellow `#f7f700` with a matching glow and a subtle pulsing size animation. When eaten, spawn a burst of tiny neon particle sparks in cyan, pink, and yellow that decay outward and fade.

### Snake Design Requirement
The snake head must be visually distinct: a slightly larger pink circle with two small `#000000` dot eyes that look in the current movement direction. The tail end must taper and dim smoothly toward the violet end. Movement is smooth and continuous between grid cells, with segments trailing like a flexible, luminous hose.

### Game States and Screen Transitions
- **Start Screen**: Deep black background, centered title "NEON SNAKE" in a large glowing cyan sans-serif font. A pulsing instruction below reads "CLICK TO START" blinking in dim white. The entire title must be rendered on canvas (no DOM title).
- **Playing**: A prominent neon score counter in the top-left, formatted as `SCORE: 000` in cyan glowing monospace text. Smooth snake movement, pulsing food, background grid drifts slightly.
- **Paused**: A semi-transparent dark overlay dims the game board. Centered text "PAUSED" in pink with a subtle throb. Press `P` or `ESC` to resume.
- **Game Over**: Screen fades out, background darkens, then centered "GAME OVER" in flaming red `#ff0055`. Score and high score displayed below. Press `SPACE` or `CLICK` to restart.

### Color Palette
- Background: `#050508` (near-black)
- Primary glow: `#00ffff` (neon cyan)
- Snake head: `#ff2a6d` (hot pink)
- Body gradient: `#00ffff` (cyan) → `#bd00ff` (violet)
- Food: `#f7f700` (neon yellow)
- Game Over: `#ff0055` (neon red)
- Text: `#e0e0e0` (dim white)
- Obstacles (walls): `#1a1a2e` (dark navy, only visible when hit)

### Game Mechanics
- Arrow keys and WASD control direction.
- Press `P` or `ESC` to pause and resume.
- Prevent 180-degree reversals (e.g., cannot go right if currently moving left).
- Queue direction inputs so fast sequential keypresses buffer correctly.
- Snake speed starts at 8 tiles per second and increases by 5% every 5 food items eaten, capping at 25 tiles per second.
- Food spawns on a random grid cell not occupied by the snake. It must have a spawn animation (shrink from large to small) and an idle pulse (scaled between 0.8x and 1.2x size).
- Eating food grows the snake by exactly 1 segment.
- Collision with walls (board edges) or snake self = Game Over.
- Score increments by 10 standard, 20 for fast food (if implemented), but standard Snake is acceptable.
- High score persisted to `localStorage` under key `neonSnakeHighScore`.
- Mobile: touch support with swipe detection. Swipe up/down/left/right changes direction.
- Canvas is responsive and scales to the viewport, maintaining aspect ratio.

### Visual Polish
- **Trail/afterglow**: `shadowBlur: 12px` on the snake head, `shadowBlur: 8px` on body segments. Decaying afterglow renders behind the snake (drawn before the snake) in the next 5 frames, fading to transparent.
- **Particle effects**: On food collection, spawn 12-18 particle sparks in random directions with random lifespans (30-60 frames), fading over time. Particle colors: `#00ffff`, `#ff2a6d`, `#f7f700`. Include gravity `-0.05` on particles (they float upward).
- **Background grid**: A 20×20 grid of thin lines, pulsing opacity between 0.03 and 0.08, color `#00ffff`, slightly offset each frame for a subtle drifting feel.
- **Food rotation**: The food diamond must continuously rotate (45° per second) while pulsing.
- **Reduced motion**: Respect `prefers-reduced-motion` media query: disable particles, trail afterglow, grid pulse, food rotation/pulse, and screen shake. Keep gameplay smooth.

### Technical Constraints
- Single `.html` file containing `<!DOCTYPE html>`, `<html>`, `<head>`, `<body>`.
- All CSS in a `<style>` block.
- All JS in a `<script>` tag at the bottom of `<body>`.
- Canvas rendered with crisp scaling: set `canvas.width` and `canvas.height` to `window.innerWidth * window.devicePixelRatio`, then `canvas.style.width/height` to `100vw/100vh`. No anti-aliasing hacks beyond `context.translate(0.5, 0.5)` if needed.
- Game loop uses `requestAnimationFrame`.
- No external images, no external CSS, no external JS libraries.
- Page title set to `"Neon Snake"`.
- Favicon: inline SVG data URI containing a simple `#00ffff` square.

## Notes

- The particle system, trailing afterglow, and smooth interpolative movement are all implemented with vanilla Canvas 2D API using `shadowBlur`, `globalAlpha`, and `arc()`.
- The entire UI (titles, scores, buttons) is rendered on canvas — no overlay HTML elements — for a seamless aesthetic.
- Hosting: Works locally by opening `index.html`, or on any static host (Vercel, Cloudflare Pages, GitHub Pages).
- Tested on Chrome, Firefox, Safari, and mobile browsers.