Grid 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 “Grid Snake” in plain HTML, CSS, and JavaScript using a 2D canvas. Make it a classic grid-based Snake game on a fixed 18-by-18 board. The canvas should be square, internally 576x576 (32-pixel tiles), scale responsively while preserving a 1:1 aspect ratio, and use pixelated/crisp rendering.

Gameplay: initialize the snake horizontally near the middle of the board at cells (6,9), (5,9), and (4,9), with the head at (6,9) moving right. Place the first food/coin at (12,9). Advance the snake one cell every 135 ms. On each step, apply the next queued turn if present, move the head one cell, and remove the tail unless the new head lands on the food. Eating the food increases the score by 1 and grows the snake by one segment; then place the next food randomly in any unoccupied cell. The snake dies when its head leaves the 18x18 board or collides with its own body. For body collision, treat the current tail as available when the snake is not eating, as in standard Snake behavior. If the entire board is filled, show a “Perfect!” game-over result. Wall deaths show “Wall!” and self-collisions show “Crash!”. After any game over, display a centered overlay saying the result and “Restarting…”, briefly flash the board with a translucent pulsing pink/red tint, and automatically restart after 700 ms. A directional input while game over may also start a new round immediately. Keep a persistent best score in localStorage under a game-specific key and update it as the score increases.

Controls: support ArrowUp/Down/Left/Right and W/A/S/D keyboard input, four large touch buttons arranged as a directional pad below the board, and swipe gestures on the canvas. Queue up to two upcoming turns so quick cornering is possible. Ignore a direction that is the same as the current queued heading or that directly reverses the current/last queued heading; never permit an immediate 180-degree reversal. Prevent browser scrolling/default behavior for the keyboard, buttons, and touch gestures.

Presentation and layout: use a dark arcade-style page background with a purple/navy radial glow at the top and a dark navy gradient below. Center a responsive game column. Above the board, show a rounded translucent dark HUD panel with “Score”, the current numeric score, “Best”, the persistent best score, and a right-aligned status message. Start with “Eat the coin.”, show “Nice — keep going.” after eating, show “New best!” when an end score establishes a positive new best, and otherwise show “Try again.” after game over. Below the board, show a large rounded four-button directional pad and help text: “Arrow keys, WASD, or the buttons below. Don’t reverse into yourself.”

Render the board as a high-contrast alternating checkerboard of 18x18 square tiles. Use dark teal/navy base colors with alternating tile texture images or an equivalent pixel-art treatment resembling the visible Kenney pixel-platformer background tiles; overlay subtle cyan/white transparency. Add a thick bright cyan border inset slightly from the canvas edges. Draw the food as a small glowing golden/orange coin centered in its cell, with a pixel-art coin sprite if available and a soft yellow-orange shadow/glow. Draw the snake from tail to head so the head appears on top: body segments are smaller rounded green tiles with bright green fill and light outline, while the head is a larger glowing mint-green rounded tile with a light outline, pixel-art character sprite if available, and two small dark eyes. Rotate the head sprite/eyes according to the current direction (up, down, left, or right). Preserve the crisp pixel-art aesthetic while combining it with the bright neon glow effects.

Use a rounded dark translucent board shell around the canvas with padding, subtle border, inner highlight, and drop shadow. Add a dark translucent rounded game-over card centered over the board. Make the interface usable on both desktop and mobile. Expose game state hooks equivalent to window.getGameState(), returning grid dimensions/tile size, snake cells, food cell, current direction, queued directions, score, best score, gameOver, speed, and round number; and window.setGameState(patch), allowing valid patches for those values and then refreshing the HUD/rendering.