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 2D arcade game titled “Neon Snake” using a full-screen canvas with no scrolling. The game is viewed straight-on from above as a single square playfield centered below a top header. Use a dark futuristic neon cyber aesthetic: the entire background is a deep navy/black radial gradient with subtle diagonal glowing lines; the playfield is a dark blue-black square with a fine 24-by-24 blue grid, a softly glowing cyan outer border, rounded corners, and a cyan ambient shadow. Keep the interface highly readable on both desktop and mobile.

Gameplay: implement classic grid-based Snake on exactly a 24x24 cell board. At the start of a run, the snake has three segments arranged horizontally around the center at cells (11,12), (10,12), and (9,12), moving right. A small glowing yellow square food item is placed randomly on an unoccupied cell and gently pulses. The snake advances one grid cell at a time in its current direction. Eating food increases the score by 1, grows the snake by leaving the new head in place instead of removing the tail, and spawns another food item on a free random cell. The snake dies when its next head cell goes outside the 24x24 board or hits any part of its own body. On death, stop movement, save the highest score as a persistent local best, and show the game-over overlay. Do not allow an immediate 180-degree reversal; direction changes are queued and applied on the next movement step. Movement timing starts at 165 ms per step and becomes 5 ms faster for each segment beyond the initial three, down to a minimum of 54 ms. Display this as a speed multiplier calculated as 1000 divided by the current step interval, to one decimal place.

Draw the snake as glowing rounded square cells with small bright highlight marks. Make the head pink/magenta and the body cyan. Draw the food as a smaller yellow glowing rounded square with a pale center highlight. When food is collected, emit approximately 12 small yellow particles that radiate outward and fade; when the snake crashes, emit approximately 12 pink particles at the head that radiate and fade. Keep the visuals crisp and grid-aligned.

Header: at the upper left, display “NEON” in bold cyan and “SNAKE” in bold pink/magenta. At the upper right, display “SCORE  0” (using the live score) in bright white and “BEST  0” (using the persistent best score) below it in muted blue-gray. Add a thin subtle horizontal divider below the header. In the lower area, place a four-button directional pad centered beneath the board: an up button above, left/down/right buttons in a row below, each a translucent dark navy rounded square with a thin muted outline; highlight the currently active direction with a translucent cyan fill and cyan outline. Use white arrow glyphs for inactive buttons and cyan for the active one. At bottom left display “Swipe or use the pad” in small muted text, and at bottom right display “SPEED  x.x” in the same style.

Responsive layout: size the square board to fit the viewport with small side margins, leaving room for the header above and the directional controls below; on the reference mobile layout it is roughly 368 pixels square, centered around y=86, with 18-pixel page margins and a 58-pixel control-button maximum size. Maintain the 24-cell grid regardless of board pixel size. Use device-pixel-ratio-aware canvas rendering for sharp visuals, but cap the pixel ratio at 2. The board should remain at least a reasonable small square on very small screens.

States and input: initially show the board, food, and centered white “Tap to start” message without the snake moving. Tapping the board starts a new run. On mobile, support swiping in the four cardinal directions; interpret a swipe only when its largest axis exceeds about 24 pixels, and otherwise treat a tap on the initial screen as start. Tapping the on-screen directional buttons changes direction and also starts/restarts when appropriate. On desktop, support Arrow keys and WASD for movement. Press P to toggle a translucent “PAUSED” overlay and freeze movement; press R to reset/start a run. If the snake crashes, cover the board with a translucent dark overlay and show pink “SYSTEM CRASH” plus white “Score N  •  Tap to reboot”; tapping should reset the game. Preserve the best score in browser local storage under a stable key so it survives reloads. Include only the actual game, with no debug panels or extra features.