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” (page title can be “Neon Snake Math”) as a classic grid-based Snake game with a neon cyberpunk presentation. Use a full-viewport, dark navy/black background with a subtle radial gradient glow centered around the play area. Render the game board centered on screen as a rectangular grid, nominally 20 columns by 24 rows, with thin low-opacity cyan grid lines and a brighter cyan glowing outline. Adapt the board to the viewport: keep the board within about 92% of the width and leave room for the top HUD and bottom controls; use square cells, minimum roughly 16px, and resize responsively.

The snake starts near the center of the board with three horizontal segments, moving right. It is composed of glowing square cells with small padding between cells: the head is bright pale cyan/white and the body transitions through cyan/teal hues with a glow. A single collectible food orb appears at a random unoccupied grid cell. Draw it as a small pulsing hot-pink/magenta circle with a strong pink glow. The snake moves continuously one grid cell at a time, initially about every 0.115 seconds, and becomes gradually faster as the score rises, down to about 0.065 seconds per step. Arrow keys and WASD change direction, with 180-degree reversals disallowed. Also provide an on-screen touch/gamepad-style directional pad at the bottom center with four translucent dark buttons bordered and glowing cyan: up centered above left/down/right, with white triangular arrow glyphs. The controls should work with pointer/touch input.

Collecting an orb grows the snake by one segment, adds 10 points, updates the score, and relocates the orb to a random cell not occupied by the snake. Store and display a persistent best score using browser local storage. The snake dies when its head crosses any board edge or collides with its own body; stop movement and show a game-over modal containing the collision reason and current score, plus a “PLAY AGAIN” button that resets the snake and score. There are no enemies, weapons, lives, or wraparound edges.

At startup, show a centered modal over the board. The modal is a dark, nearly opaque navy panel with rounded corners, a thin pink border, pink and cyan ambient glow, and centered text. It should show the large pink glowing heading “NEON SNAKE”, the instruction “Collect glowing orbs. Every 100 points, solve a multiplication to keep going.”, a purple-to-pink gradient “START GAME” button, and the smaller instruction “Arrow keys / WASD or the touch pad”. The top HUD remains visible above the board: on the left, a cyan glowing pill panel labeled “NEON SNAKE” with spaced lettering; on the right, a matching dark pill panel showing “SCORE 0” and “BEST 0” (with the numeric values updating). Use clean Arial/sans-serif typography, responsive font sizing, rounded panels, backdrop-like dark translucent fills, and cyan/pink text shadows.

Every time the score reaches a positive multiple of 100, pause the snake and display a centered “MATH BREAK” modal. It must say “Solve this multiplication to continue:”, show a large cyan glowing randomly generated multiplication problem using factors from 2 through 10 (for example “7 × 8”), provide a centered numeric answer input, a full-width purple-to-pink “SUBMIT ANSWER” button, and an area for feedback. A correct answer resumes the snake and hides the modal; an incorrect answer keeps the game paused and displays “Try again — multiplication powers the snake.”, selecting the input for another attempt. Pressing Enter while the math modal is open should submit the answer. Starting/restarting clears the score, resets the three-segment snake, hides all overlays except the gameplay HUD, and places a new food orb. Pressing Space at the initial non-running state may also start the game.

Use smooth animation via a canvas render loop: clear and repaint the gradient background, grid, border, pulsing orb, and glowing snake each frame. Keep the UI overlays in HTML/CSS above the canvas, hide inactive cards, prevent page scrolling, and support safe-area insets on mobile. The intended visual style is polished neon arcade UI: cyan grid and borders, hot-pink food and modal accents, purple/pink action buttons, dark glassy panels, and soft bloom/glow effects. Include accessible labels for the directional buttons and answer input.