Neon Snake

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Create a responsive browser game titled “Neon Snake,” a polished neon arcade Snake game on a dark cyberpunk interface. Use a centered layout that fills the viewport with a compact header, square play board, and controls below. The page background should be nearly black/navy (#050510). The header should show the glowing cyan uppercase title “NEON SNAKE,” the subtitle “GROW FAST. DODGE YOURSELF.”, and three compact HUD cards showing Score, Length, and Speed. Start with score 0, length 3, and speed 1.0x.

The game board is a square 24×24 grid. Render it on a canvas with a dark radial-gradient navy background, subtle blue grid lines, rounded outer border, and cyan-blue inset glow. The board should resize responsively to the available square area while preserving the 24×24 logical grid. Initialize the snake horizontally at grid coordinates (8,12), (7,12), and (6,12), moving right. Draw the snake as glowing rounded cyan square cells with small padding inside each grid cell: the head is bright pale cyan/near-white with a stronger glow, while the body is blue/cyan with a subtly changing hue along its length. Place one collectible food item at a random unoccupied grid cell; render it as a small pulsing magenta/pink glowing circle.

The player controls the snake in four cardinal directions. Support Arrow keys and WASD, on-screen directional pad buttons (up, left, down, right), and swipe gestures on the canvas. Reject an immediate 180-degree reversal. Pressing a direction before the game has started should start it. Use a fixed-step movement system: begin at 155 ms per cell (1.0x), and after every food bite add 10 score, increase length by one, and speed up by reducing the step interval by 4 ms per bite, down to a minimum of 58 ms; display the speed as the base interval divided by current interval with one decimal place (for example, 1.0x). The food must relocate randomly after being eaten and never appear inside the snake.

On each movement, advance the head one grid cell. The game ends immediately if the head leaves the 24×24 board or hits any snake segment. There are no enemies, walls, power-ups, wraparound, lives, or extra stages. When the snake moves without eating, remove the tail segment; when it eats, retain the tail so the snake grows. Keep the board animated with a subtle pulsing food glow and continuous rendering.

Before play, show a translucent dark overlay over the board with the centered magenta glowing heading “Ready?”, the text “Use arrow keys, WASD, swipe, or the pad. Every bite makes you longer — and faster.”, and a cyan-outlined “START GAME” button. Starting hides the overlay and begins movement. Include a control row beneath the board with the hint “Arrow keys / WASD · Space pauses,” a four-button arrow pad arranged like a directional cross, and a “PAUSE” button. Spacebar and the pause button toggle pause. While paused, freeze the grid and show the overlay with heading “Paused”, text “The grid is frozen. Resume when you are ready.”, and a “RESUME” button. On collision or leaving the board, stop play and show the overlay with heading “System Crash”, text reporting “Final score: [score]. You reached length [length].”, and change the button to “PLAY AGAIN”.

Use a cohesive neon visual style: cyan text and outlines with blue glows, magenta food and overlay headings, dark navy panels, uppercase labels with letter spacing, rounded corners, and subtle shadows. Make buttons touch-friendly, prevent touch scrolling during swipes, and make the layout work on both desktop and narrow mobile screens. Keep the gameplay rules simple and faithful to classic Snake: one snake, one food, self/wall collision, growth and acceleration.