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 playable browser game titled “Neon Snake.” Use a responsive, centered single-column layout on a very dark navy/black page with a monospace/terminal-style font and cyan/magenta neon accents. The game shell should be at most about 620px wide and fit within the viewport. At the top, show the glowing cyan title “NEON SNAKE” on the left and three compact HUD stats on the right: SCORE, LENGTH, and SPEED, with bright numeric values. Below it, create a square 24x24 grid playfield with a thin teal border and subtle cyan-blue inset glow. Render the board on a canvas: fill it with #050b16-like dark navy, draw 23 evenly spaced faint teal grid lines in both directions, and keep the grid cells square.

Implement classic grid-based Snake. At the start/reset, initialize a three-segment snake horizontally around the middle-left area at grid coordinates (7,12), (6,12), and (5,12), moving right. Place one glowing magenta/pink food orb at a random unoccupied grid cell. The snake advances one grid cell at a time, initially every 150ms. The head moves in the current direction, and prevent immediate reversal into the opposite direction. The player eats the orb when the head enters its cell: add 10 score, keep the tail so the snake grows by one, place a new orb at a random unoccupied cell, and increase speed by reducing the step interval by 4ms per segment beyond the initial length, down to a minimum interval of 58ms. Display speed as a multiplier calculated from 150ms divided by the current interval, formatted like “1.0x.” If the snake moves beyond any edge of the 24x24 board or collides with any of its own segments, end the game.

Draw the food as a small pulsing hot-pink/magenta circle centered in its cell, with a strong pink glow. Draw each snake segment as a slightly inset square with neon bloom: the head is bright almost-white cyan (#e8ffff) with a white glow, while the body is cyan/turquoise with cyan glow; progressively vary the body hue toward cyan/teal and slightly darken later segments. Leave the grid visible behind everything. Continuously redraw using requestAnimationFrame so the food pulse animates and the neon shadows remain smooth.

Initially show a semi-transparent dark overlay over the board with a centered bordered panel. The panel should say “READY?”, explain “Eat the glowing orbs. Every bite makes you longer — and faster.”, and contain a cyan-outlined “START GAME” button. Clicking it resets and starts a new game and hides the overlay. On collision, stop movement and show the overlay again with the heading “SYSTEM CRASH,” text like “Final score: [score]. Your snake reached [length] segments.”, and change the button to “PLAY AGAIN.”

Provide both keyboard and touch-friendly controls. Support Arrow keys and WASD for up/down/left/right, and prevent the browser’s default behavior for those keys. Also include a visible directional control pad beneath the board: one up button on the first row and left/down/right buttons on the second row, using large cyan arrow glyphs and touch-sized buttons. Clicking these buttons changes direction subject to the no-reverse rule. Support swiping on the canvas: a horizontal or vertical swipe of at least roughly 18 pixels selects the corresponding direction. Include a small centered hint below the controls reading “Arrow keys / WASD • swipe the board • avoid the walls and your trail.” Make the UI responsive for narrow screens and short viewport heights, preserving the square board and reducing spacing/control height when needed. Use dark navy backgrounds, cyan borders and glows, pale cyan text, and magenta for the food and crash heading; do not add enemies, levels, power-ups, lives, weapons, or other mechanics.