Pulse 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 2D browser arcade game titled “Pulse Snake” with a fixed full-screen canvas and an overlay HUD. Use a dark futuristic neon aesthetic: the background is a deep navy/near-black radial gradient, brightest around the center and fading toward the edges. In the center, render a square 24-by-24 grid board sized responsively to fit the viewport with margins, outlined by a thin cyan border with a soft cyan glow. Draw subtle cyan grid lines inside the board. Keep the top HUD over the canvas: on the upper left show the spaced, bold cyan brand text “PULSE SNAKE”; on the upper right show “SCORE”, “BEST”, and “SPEED” with their numeric values, using small uppercase light text and brighter magenta values. The game starts with a centered modal panel over the board. The panel is rounded with a thin translucent cyan border, a dark blue-to-purple gradient fill, cyan/magenta inset and outer glow, and centered text. Show a large glowing cyan heading “PULSE SNAKE”, the instruction “Eat the sparks. Grow longer. The grid accelerates every time you do.”, and a bright cyan pill-shaped “START RUN” button. Hide this panel while playing. If the snake crashes, show the same panel with heading “SIGNAL LOST”, text like “You reached [score] points at [speed]x speed. Ready for another run?”, and a “RESTART” button.

Implement classic grid-based Snake mechanics. The board has 24 columns and 24 rows. On a new run, initialize a three-segment snake horizontally at grid coordinates head (7,12), then (6,12), then (5,12), moving right. Place one food spark at a random unoccupied grid cell. Advance the snake at a timed step: initial movement interval is 155 ms, corresponding to speed 1.0x. The current direction can be changed to up, down, left, or right, but reject an immediate 180-degree reversal relative to the current direction. Each step moves the head one grid cell, adds the new head segment, and removes the tail unless the new head occupies the food. Eating food increases score by 1, grows the snake by retaining the tail, randomly relocates the food to an unoccupied cell, and accelerates movement: speed is 1 + score*0.12 capped at 3.8x, and the interval becomes 155/speed milliseconds. The run ends on collision with any board edge or with any snake segment other than the head. On game over, stop movement, preserve/update the best score in browser local storage under a key equivalent to “pulseSnakeBest”, and show the restart panel. The best score should persist between runs and page reloads.

Render the food as a pulsing hot-pink/magenta spark: a glowing filled circle centered in its cell, with radius about 28% of a cell, a faint white outline, and a subtle scale pulse. Render every snake segment as a glowing circular pulse rather than square blocks. The head is larger, bright yellow, with a dark small eye/dot offset toward the current movement direction; the body is cyan, slightly smaller, with decreasing opacity down the body while remaining luminous. When food is eaten, emit roughly 14 small pink square particles from the food position that drift outward and fade away. Maintain smooth animation with requestAnimationFrame while movement remains grid-stepped.

Support keyboard controls: ArrowUp/Down/Left/Right and W/A/S/D. Prevent browser scrolling when using these keys. Support the on-screen touch controls at the bottom center: a four-button directional pad arranged as up centered above left/down/right, using ▲ ◀ ▼ ▶ symbols. Buttons are circular/rounded dark translucent blue with cyan borders and subtle glow, sized about 52px with small gaps; make them more translucent on wider desktop screens and more visible on mobile. The touch controls should work with pointer/touch input and not trigger unwanted scrolling. Also allow Space or Enter to start/restart when the run is not active. Make the layout responsive, account for safe-area insets, use a readable system sans-serif font, and keep the canvas behind the HTML HUD. The visible initial state should show score 0, best 0 (or the stored best), speed 1.0x, the centered start panel, the neon grid, and the directional pad.