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 dark, centered single-screen layout with a neon cyberpunk arcade aesthetic. The page background should be very dark navy/black. The main game column should be capped around 760px wide, with padding, and contain: a header showing the uppercase title “NEON SNAKE” in bright cyan with wide letter spacing and cyan glow, plus the subtitle “GROW FAST. DON'T HIT THE WALLS.” in small uppercase pink text; a three-column HUD showing Score, Length, and Speed in dark translucent blue panels with cyan borders and subtle glow; a square game board; mobile controls; and a small instruction hint.

Implement classic grid-based Snake on a 24 by 24 grid. Use a 600x600 square canvas (responsive CSS sizing, square aspect ratio, with a thin blue border, cyan-blue outer glow, and pixelated rendering). The board interior is deep navy (#060b1d) with faint cyan grid lines between cells. Start the snake centered horizontally around grid coordinate (12,12), initially facing right, with three cells: head at (12,12) and two body cells trailing left at (11,12) and (10,12). Render the head as a bright pale-cyan square with a strong cyan glow, and render the body as smaller-padded glowing cyan/teal squares, with the body color gradually darkening along its length. Draw food as a glowing hot-pink/magenta circular orb centered in its grid cell.

The snake advances automatically on a timed grid step. The initial step interval is 155ms, displayed as Speed 1.0x. Arrow keys and WASD change direction; reject an immediate 180-degree reversal. Queue the requested direction so it takes effect on the next movement step. Also provide mobile interaction: four on-screen directional buttons arranged as a directional pad (up above, left/down/right below), and swipe detection on the canvas where a horizontal or vertical swipe longer than about 18px selects the dominant direction. On compact/touch layouts show the directional pad; on taller screens it may be hidden while the keyboard/swipe hint remains visible. Prevent page scrolling when using the controls or swiping the board.

Each movement should check collision before moving. Hitting any board edge ends the run with the message “The grid got you.” Hitting the snake’s own trail ends it with “You crossed your own trail.” When the head reaches the food, increase score by 10, grow by retaining the tail instead of removing it, spawn a new food randomly on an unoccupied cell, and make the snake faster: set the interval to max(58ms, 155ms - (snake length - 2) * 5.5). Update the HUD continuously: score as an integer, length as the current number of cells, and speed as the multiplier 155 / current interval formatted to one decimal place followed by “x.” The win condition is reaching length 30; show a win overlay immediately with “YOU WIN,” the reason “You reached length 30 — perfect run.” and the final score.

On collision or winning, stop movement and overlay the board with a centered modal panel. Use a dark translucent purple background, thin bright pink border, pink glow, uppercase pink heading (“GAME OVER” or “YOU WIN”), a reason line, and “Final score: [score]”. Include a cyan-bordered “PLAY AGAIN” button. Clicking it resets the game to the initial three-cell centered state, score 0, interval 155ms, a newly randomized unoccupied food cell, and clears the overlay. If the player presses a direction key or mobile direction button after the game has ended, reset and accept that direction.

Use smooth requestAnimationFrame rendering but keep movement discrete on the grid. The visual treatment should be crisp pixel-like squares with neon bloom/shadows: cyan for the snake and board accents, magenta for food and end-state accents, and deep navy/purple for surfaces. Include no extra enemies, obstacles, powerups, lives, weapons, levels, or camera movement; the only objective is to eat food, grow to length 30, and avoid walls and the snake’s own trail.