Snake · grok-4.20

The task is to build a playable Snake game on a canvas with arrow-key controls, a growing tail, food, score, and a game-over and restart state. It must be a single-page web app in one self-contained f...The task is to build a playable Snake game on a canvas with arrow-key controls, a growing tail, food, score, and a game-over and restart state. It must be a single-page web app in one self-contained file named index.html with CSS in <style> and JS in <script>, no external resources or CDNs.

I need to create index.html that includes everything.

First, plan the game:

- Canvas for the game board.

- Snake as array of positions, moving in grid.

- Food as random position.

- Arrow keys for direction.

- Score based on food eaten.

- Collision detection: walls and self .

- Game over screen with restart option (space or click).

- Maybe pause functionality.

- Nice visuals: colors, maybe some styles.

Structure:

- HTML: header with title and score, canvas, maybe instructions or modal for game over.

- Since single file, all inline.

- Plain CSS for styling. No Tailwind or CDNs.

Keep it simple, dark theme, retro feel for Snake.

Game logic in JS:

- Grid size, say 20x20 cells, canvas 400x400.

- Snake starts with length 3.

- Direction: dx, dy.

- Food random position.

The task is complete. I've built a fully playable Snake game in a single self-contained index.html file. It includes: