Mistral Small 4

I need to create a polished Snake game in a single HTML file with vanilla JS and canvas. Let me break down the requirements:

1. Grid: at least 20x20 cells, centered on page
2. Controls: Arrow keys and WASD, quick successive presses honored, can't reverse onto itself
3. Game mechanics: Eating food adds 10 points, grows snake by 1 cell, food never spawns on snake
4. Game over: hits wall or itself, overlay shows score, Space/Enter restarts, P pauses
5. Visual polish: smooth movement, snake with distinct head and eyes facing direction, particle burst on eating
6. Display: current score and best score of session

Let me plan the structure:

HTML:
- Canvas element
- Score display elements
- Game over overlay
- Start message

CSS:
- Center the canvas
- Style the score display
- Style the game over overlay
- Responsive design for different screen sizes

JavaScript:
- Game state variables (snake, food, direction, nextDirection, score, bestScore, gameOver, paused)
- Canvas setup and rendering
- Snake movement logic with smooth animation
- Collision detection
- Food spawning logic
- Score tracking
- Game loop with requestAnimationFrame
- Event listeners for keyboard controls
- Particle system for eating effect
- Snake head with eyes that face direction

Key considerations:
- Smooth movement: I'll use a fixed timestep for game logic but interpolate for rendering
- Snake head with eyes: I'll draw a circle for the head and two smaller circles for eyes, positioned based on direction
- Particle burst: when eating, create particles that move outward from the food position
- Can't reverse: track current direction and prevent opposite direction input
- Quick successive presses: buffer the next direction and apply it when possible

Let me structure the code:

1. HTML structure with canvas, score displays, and game over overlay
2. CSS for styling and centering
3. JavaScript:
   - Game class or object to manage state
   - Canvas rendering functions
   - Snake drawing with head/eyes
   - Food drawing
   - Particle system
   - Game loop
   - Input handling
   - Collision detection
   - Game state management

I'll use a grid system where each cell is a certain size. For a 20x20 grid, if I make each cell 20px, the canvas would be 400x400. But I need to center it, so I'll add padding.

Let me think about the grid size. A 20x20 grid with 20px cells = 400x400 canvas. I can center this with margin: auto and add some padding.

For smooth movement, I'll use a game loop that updates at a fixed rate (e.g., 10 updates per second) but renders at 60fps. This gives smooth visuals while maintaining consistent game speed.

Alternatively, I can use a simpler approach: update position every X milliseconds, but render continuously. For Snake, a fixed timestep is good.

Let me outline the game loop:

- lastTime = 0
- gameSpeed = 100ms per move (10 moves per second)
- Then in the loop, accumulate time and update when enough has passed

But for simplicity and smoothness, I'll use requestAnimationFrame and track the time delta to update the game state proportionally.

Actually, for Snake, it's common to have discrete moves. Let me do:

- Fixed update rate: update game state every 100ms
- Render continuously at 60fps
- Use a timer to track when next update should happen

This ensures consistent game speed regardless of frame rate.

Now, for the snake representation:
- Store snake as an array of positions [{x, y}, ...]
- Head is at index 0
- When moving, add new head based on direction, remove tail unless food was eaten

For the head with eyes:
- Direction can be: up, down, left, right
- Eyes should be positioned relative to head direction
- For up: eyes at top of head
- For down: eyes at bottom
- For left: eyes on left side
- For right: eyes on right side

I'll draw the head as a circle, and eyes as smaller circles offset based on direction.

For particles on eating:
- Create an array of particles at food position
- Each particle has position, velocity, color, and lifetime
- Update and render particles
- Remove dead particles

Game states:
- IDLE: showing start message
- PLAYING: game is running
- PAUSED: game is paused
- GAME_OVER: game over overlay shown

Controls:
- In IDLE: any key starts game
- In PLAYING: arrow keys/WASD change direction
- In PAUSED: P unpauses, Space/Enter restarts
- In GAME_OVER: Space/Enter restarts, P pauses (but game is already over)

Wait, the requirement says: "Space or Enter restarts, P pauses" for game over. So in game over state, P should pause (but it's already game over, so maybe it doesn't make sense). Let me re-read:

"Game over when the snake hits a wall or itself, with an overlay showing the score; Space or Enter restarts, P pauses."

So in game over state:
- Space/Enter: restart
- P: pause (but game is over, so maybe it should restart? Or perhaps P does nothing in game over? The requirement is a bit ambiguous.)

I think it means:
- In game over state, Space/Enter restarts the game
- P pauses the game (but if it's game over, pausing doesn't make sense, so maybe P is ignored in game over state)

Similarly, during gameplay:
- P pauses the game
- Space/Enter would restart? But that doesn't make sense during gameplay. Let me re-read:

"Game over when the snake hits a wall or itself, with an overlay showing the score; Space or Enter restarts, P pauses."

This seems to describe the game over state specifically. So:
- In game over overlay: Space/Enter restarts, P pauses (but pausing a game over doesn't make sense, so maybe P is ignored)
- During gameplay: P pauses

Also, "Click or press a key to start" message for the demo mode.

Let me plan the states more clearly:

States:
- IDLE: waiting for user to start. Show "Click or press a key to start" and demo snake moving automatically
- PLAYING: game is active, user controls snake
- PAUSED: game is paused, show pause overlay
- GAME_OVER: game over, show score overlay

Controls:
- IDLE: any key/click starts game (goes to PLAYING)
- PLAYING: arrow keys/WASD change direction (can't reverse), P pauses (goes to PAUSED)
- PAUSED: P unpauses (goes to PLAYING), Space/Enter restarts (goes to PLAYING with new game)
- GAME_OVER: Space/Enter restarts (goes to PLAYING with new game), P pauses (goes to PAUSED? But game is over, so maybe just restart)

The requirement says for game over: "Space or Enter restarts, P pauses". So in GAME_OVER state:
- Space/Enter: restart game
- P: pause (but it's game over, so maybe it transitions to PAUSED state? That doesn't make sense. Perhaps P is ignored in GAME_OVER state.)

I think the most logical interpretation is:
- In GAME_OVER state, only Space/Enter restarts the game
- P is only relevant in PLAYING and PAUSED states

But the requirement explicitly says "P pauses" in the context of game over description. Maybe it means that P always pauses, regardless of state? So:
- In GAME_OVER state, P pauses (transitions to PAUSED state)
- In PAUSED state, P unpauses (transitions to PLAYING)

But if the game is over, pausing it doesn't make much sense. However, to follow the requirement literally, I'll implement:
- In any state except IDLE, P toggles pause
- In GAME_OVER state, Space/Enter restarts

Actually, let me re-read: "Game over when the snake hits a wall or itself, with an overlay showing the score; Space or Enter restarts, P pauses."

This is describing what happens in the game over state specifically. So:
- When in GAME_OVER state:
  - Space or Enter: restart game
  - P: pause (but since it's game over, maybe it doesn't do anything, or transitions to PAUSED)

I think the most reasonable implementation is:
- GAME_OVER state: only Space/Enter restarts, P is ignored (or maybe transitions to PAUSED, but that seems odd)
- PAUSED state: P unpauses, Space/Enter restarts
- PLAYING state: P pauses

But to be safe, I'll implement:
- In GAME_OVER state: Space/Enter restarts, P does nothing (or maybe transitions to PAUSED, but I'll make P restart in GAME_OVER to be more useful)

Actually, let's make it:
- In GAME_OVER state:
  - Space/Enter: restart
  - P: restart (since pausing a dead game isn't useful)
- In PAUSED state:
  - P: unpause
  - Space/Enter: restart
- In PLAYING state:
  - P: pause
  - Arrow keys/WASD: change direction

And for IDLE state:
- Any key/click: start game

Now for the demo mode: "Games must start in a self-playing demo mode (a simple AI plays) behind a 'Click or press a key to start' message"

So initially, the game should be in IDLE state with a demo snake moving automatically. Then when user clicks/presses key, it goes to PLAYING state with user control.

For the demo AI, I can make the snake follow a simple path, like going in a circle or back and forth.

Let me outline the code structure:

HTML:
```html
<div class="container">
  <canvas id="gameCanvas"></canvas>
  <div class="score-display">
    <span id="score">Score: 0</span>
    <span id="bestScore">Best: 0</span>
  </div>
  <div id="gameOverOverlay" class="overlay hidden">
    <div class="overlay-content">
      <h2>Game Over</h2>
      <p>Your score: <span id="finalScore">0</span></p>
      <p>Best score: <span id="finalBestScore">0</span></p>
      <p>Press Space or Enter to restart</p>
    </div>
  </div>
  <div id="pauseOverlay" class="overlay hidden">
    <div class="overlay-content">
      <h2>Paused</h2>
      <p>Press P to resume</p>
    </div>
  </div>
  <div id="startMessage" class="overlay">
    <div class="overlay-content">
      <h2>Snake Game</h2>
      <p>Click or press a key to start</p>
    </div>
  </div>
</div>
```

CSS:
- Center the container
- Style canvas and overlays
- Make overlays centered with absolute positioning
- Responsive design with media queries

JavaScript:
- Game class with all state and methods
- Initialize game state
- Game loop with requestAnimationFrame
- Handle keyboard input
- Update game state
- Render everything

Let me think about the snake movement:

I'll store:
- snake: array of {x, y} positions, head at index 0
- direction: current direction (e.g., 'UP', 'DOWN', 'LEFT', 'RIGHT')
- nextDirection: buffered direction (can be different from current)
- food: {x, y} position
- score: current score
- bestScore: best score in session
- gameOver: boolean
- paused: boolean
- particles: array for eating effect

For smooth movement, I need to track:
- The grid cell size
- The snake's position in continuous space (for interpolation)
- Or use discrete steps with a timer

I think for simplicity and to meet the "smooth movement" requirement, I'll use continuous movement with interpolation.

Approach:
- Each cell is CELL_SIZE pixels
- Snake moves at a constant speed (e.g., 5 pixels per frame)
- Position is stored as continuous values
- When position crosses a cell boundary, check for collisions and food

But this is more complex. Alternatively, I can use a fixed timestep for updates but render smoothly.

Let me go with a simpler approach that still looks smooth:
- Update game state every 100ms (10 updates per second)
- In each update, move the snake by one cell
- Render at 60fps, so the snake appears to slide smoothly between cells

This is a common technique: discrete game logic with smooth rendering.

So:
- gameSpeed = 100ms per move
- lastUpdateTime = 0
- In game loop, if currentTime - lastUpdateTime >= gameSpeed, then update game state and reset lastUpdateTime

For rendering, I'll interpolate between the previous and current positions to make it look smooth.

Actually, for Snake, it's often rendered as discrete steps but with animation. Let me do:

- Store snake positions as integers (grid coordinates)
- For rendering, use a continuous position that interpolates between grid cells
- Update the continuous position based on direction and speed

But this requires storing both the current grid position and the continuous offset.

Let me simplify: I'll use a fixed update rate for game logic, but render continuously with smooth animation.

Game state updates every 100ms:
- Move snake
- Check collisions
- Spawn food if needed
- etc.

Rendering at 60fps:
- Interpolate the snake's position between the last two game states
- This gives smooth movement

This is a standard technique.

So I'll need:
- previousSnake: positions from last update
- currentSnake: positions from current update
- interpolationFactor: 0 to 1, based on time since last update

But this doubles the memory for snake positions. For a snake of length L, it's 2L positions, which is fine.

Alternatively, I can just store the current positions and the next positions, but that's more complex.

Let me go with a simpler approach: just update the game state at fixed intervals and render the snake at its current grid position. The "smooth movement" can be achieved by making the snake move continuously across cells in the render phase, even though the game logic is discrete.

Actually, I think the easiest way to get smooth movement is to:
- Store the snake's position as continuous values (x, y in pixels)
- Update the position continuously based on direction and speed
- But only check for collisions and food when the snake is exactly on a grid cell

But this is more complex to implement correctly.

Let me look at common Snake implementations. Most use discrete moves but with animation frames to make it look smooth.

I'll do this:
- Game logic updates every 100ms
- In each update, move the snake by one cell in the current direction
- Store the snake as grid coordinates
- For rendering, interpolate between the previous and current grid positions based on time

So:
- snake: array of {x, y} (grid coordinates)
- targetSnake: array of {x, y} (where the snake will be after next update)
- But this is complex

Simpler: just store the current snake positions as grid coordinates, and when rendering, draw the snake with a slight offset based on how far along the 100ms interval we are.

For example:
- lastUpdateTime = time when last game update happened
- currentTime = now
- progress = (currentTime - lastUpdateTime) / gameSpeed (0 to 1)
- For each segment, draw at position = previousPosition + (currentPosition - previousPosition) * progress

But I need to store the previous positions.

Let me implement it this way:

State variables:
- snake: array of {x, y} (current grid positions)
- nextSnake: array of {x, y} (positions after next move)
- lastUpdateTime: timestamp
- gameSpeed: 100

In update:
- Move snake in direction
- Check collisions
- If no collision, set nextSnake as new snake positions
- Update lastUpdateTime

In render:
- progress = (Date.now() - lastUpdateTime) / gameSpeed
- Clamp progress to [0, 1]
- For each segment, render at interpolated position

But this requires storing both current and next snake positions.

Alternatively, I can just store the current snake positions and the direction, and for rendering, calculate the offset based on time.

Let me do a simpler approach that's still smooth:

- The snake moves at a constant speed (e.g., 100 pixels per second)
- Position is stored as continuous values
- When the position crosses a cell boundary, snap to the new cell and check for collisions/food

This is more physics-based but works well.

Let me outline this:

Constants:
- GRID_SIZE = 20 (cells)
- CELL_SIZE = 20 (pixels)
- CANVAS_SIZE = GRID_SIZE * CELL_SIZE = 400

State:
- snake: array of {x, y} in continuous space (pixels)
- direction: current direction vector {dx, dy}
- nextDirection: buffered direction
- food: {x, y} in continuous space
- score: number
- bestScore: number
- gameOver: boolean
- paused: boolean
- particles: array of particles

Movement:
- snake[0].x += direction.dx * speed
- snake[0].y += direction.dy * speed

When snake[0].x crosses a cell boundary (e.g., from 100 to 101, and CELL_SIZE=20, so boundary at 100, 120, etc.):
- Actually, boundaries are at multiples of CELL_SIZE
- When snake[0].x % CELL_SIZE == 0 and snake[0].y % CELL_SIZE == 0, it's on a grid point
- But we want to check for collisions and food when entering a new cell

Better:
- When the snake's head moves from one cell to another, check for collisions and food

So:
- previousCell = {x: floor(oldX / CELL_SIZE), y: floor(oldY / CELL_SIZE)}
- newCell = {x: floor(newX / CELL_SIZE), y: floor(newY / CELL_SIZE)}
- If newCell != previousCell, then we've entered a new cell

In that case:
- Check if newCell is food
- Check if newCell is snake body (except tail, since tail moves)
- If food, grow snake
- If wall or self, game over

For the snake body collision, we need to check all segments except the tail (since the tail is about to move).

This approach gives smooth movement because the snake moves continuously.

Let me implement this:

Speed: let's say 100 pixels per second
Frame rate: 60fps, so per frame: 100/60 ≈ 1.67 pixels

In update:
- Move head by speed * deltaTime
- Check if head has crossed into new cell
- If yes, check collisions and food
- Move tail (remove last segment, unless food was eaten)

For the demo AI in IDLE state:
- Make the snake move in a simple pattern, like oscillating horizontally

Now for the visual polish:

Snake head with eyes:
- Draw head as a circle
- Eyes as smaller circles
- Position eyes based on direction:
  - Up: eyes at top (y - headRadius/2)
  - Down: eyes at bottom (y + headRadius/2)
  - Left: eyes on left (x - headRadius/2)
  - Right: eyes on right (x + headRadius/2)

Particle burst on eating:
- Create particles at food position
- Each particle has:
  - position: {x, y}
  - velocity: {dx, dy} (random direction)
  - color: snake color or white
  - lifetime: time to live
- Update particles each frame: position += velocity, lifetime -= deltaTime
- Remove dead particles

Score display:
- Current score and best score at top of canvas
- Update when score changes

Game over overlay:
- Show final score and best score
- "Press Space or Enter to restart"

Pause overlay:
- Show "Paused" message

Start message:
- "Click or press a key to start"

Controls:
- Arrow keys and WASD change direction
- Can't reverse: if current direction is UP, can't go DOWN, etc.
- So store direction as a vector, and nextDirection as another vector
- When changing direction, set nextDirection, and in update, if nextDirection is not opposite to current, set current to nextDirection

Opposite directions:
- UP (0, -1) opposite is DOWN (0, 1)
- DOWN (0, 1) opposite is UP (0, -1)
- LEFT (-1, 0) opposite is RIGHT (1, 0)
- RIGHT (1, 0) opposite is LEFT (-1, 0)

So when setting nextDirection, check if it's opposite to current direction. If not, set current direction to nextDirection.

Now, let's code this.

I'll create a single HTML file with everything inline.

Structure:

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Snake Game</title>
  <style>
    /* CSS here */
  </style>
</head>
<body>
  <div class="container">
    <!-- Canvas and overlays -->
  </div>
  <script>
    // JavaScript here
  </script>
</body>
</html>
```

Let me write the CSS first:

- Container: max-width, margin auto, text-align center
- Canvas: display block, margin auto, background #f0f0f0
- Score display: position fixed at top, or just above canvas
- Overlays: absolute positioned, centered, with background rgba
- Responsive: use vmin for font sizes, adjust canvas size

For a 20x20 grid, I'll make the canvas 400x400px, but scale it down on small screens.

Actually, to make it responsive, I can set the canvas size in CSS to be a percentage of the container, but for pixel-perfect rendering, it's better to set a fixed size and center it.

Let me set:
- GRID_SIZE = 20
- CELL_SIZE = 20
- CANVAS_SIZE = GRID_SIZE * CELL_SIZE = 400

In CSS:
- .container: width: min(400px, 90vw); margin: 20px auto;
- canvas: width: 100%; height: auto; display: block;

But this will make the canvas scale, which might make pixels blurry. Better to set a fixed size for the canvas element.

I'll set:
- canvas { width: 400px; height: 400px; }

And center it.

For small screens, I can reduce CELL_SIZE dynamically, but to keep it simple, I'll make the canvas responsive by setting its CSS width to min(400px, 90vw) and height auto, but keep the drawing buffer at 400x400.

Actually, for a canvas game, it's common to:
- Set canvas.width and canvas.height to the logical size (400x400)
- Set canvas.style.width and canvas.style.height to the CSS size (responsive)

So in JavaScript:
- const GRID_SIZE = 20;
- const CELL_SIZE = 20;
- const CANVAS_LOGICAL_SIZE = GRID_SIZE * CELL_SIZE;

Then in CSS:
- canvas { width: 100%; max-width: 400px; height: auto; }

This way, the canvas scales but the drawing is crisp.

Now for the overlays:
- Position: fixed, top 0, left 0, width 100%, height 100%
- Display: flex, align-items center, justify-content center
- Background: rgba(0,0,0,0.7)
- Color: white
- Text-align: center

Overlay content:
- padding: 20px
- border-radius: 10px
- background: rgba(0,0,0,0.8)

Start message, pause overlay, game over overlay all use the same style.

Now the JavaScript:

I'll create a Game class to encapsulate all state and methods.

Game class properties:
- canvas: HTMLCanvasElement
- ctx: CanvasRenderingContext2D
- gridSize: 20
- cellSize: 20
- snake: array of {x, y} in pixels (continuous)
- direction: {dx, dy}
- nextDirection: {dx, dy}
- food: {x, y} in pixels
- score: number
- bestScore: number (from localStorage or 0)
- gameOver: boolean
- paused: boolean
- particles: array of particles
- lastUpdateTime: number
- gameSpeed: 100 (ms per cell move)
- animationFrameId: number
- demoMode: boolean (for IDLE state)

Methods:
- constructor()
- init()
- start()
- pause()
- resume()
- gameOver()
- restart()
- update(deltaTime)
- render()
- handleKeyDown(e)
- spawnFood()
- checkCollision(x, y)
- drawSnake()
- drawFood()
- drawParticles()
- drawScore()
- drawOverlays()
- gameLoop(timestamp)

For the demo AI in IDLE state:
- When in IDLE state (gameOver or start), run a simple AI that moves the snake in a pattern
- For example, move right until hitting edge, then down, then left, then up, making a rectangle

But the requirement says: "Games must start in a self-playing demo mode (a simple AI plays) behind a 'Click or press a key to start' message"

So initially, the game is in a demo mode where the snake moves automatically. When user clicks/presses key, it switches to user-controlled mode.

So states:
- IDLE: demo mode, snake moving automatically, show start message
- PLAYING: user-controlled, show score
- PAUSED: game paused, show pause overlay
- GAME_OVER: game over, show overlay

In IDLE state:
- Snake moves automatically (demo AI)
- No user input except to start
- Show "Click or press a key to start"

In PLAYING state:
- User controls snake
- Snake moves at fixed speed

In PAUSED state:
- Game paused, show pause overlay
- User can press P to resume or Space/Enter to restart

In GAME_OVER state:
- Show game over overlay with score
- User can press Space/Enter to restart or P to pause (but pausing game over doesn't make sense, so maybe just restart on P)

Let me implement the demo AI:

In IDLE state, the snake should move in a simple pattern. I'll make it go in a circle or back and forth.

Simple AI:
- Keep track of a target direction
- Change direction when hitting wall or after some time

For example:
- Move right
- When x >= gridSize - 1, move down
- When y >= gridSize - 1, move left
- When x <= 0, move up
- When y <= 0, move right

This makes a rectangle.

In the update loop for IDLE state, set nextDirection based on this pattern.

Now, for the snake head with eyes:

I'll draw:
- Head: circle at (x, y) with radius headRadius
- Eyes: two circles, radius eyeRadius
- Position based on direction:
  - UP: eyes at (x - eyeOffset, y - headRadius/2) and (x + eyeOffset, y - headRadius/2)
  - DOWN: eyes at (x - eyeOffset, y + headRadius/2) and (x + eyeOffset, y + headRadius/2)
  - LEFT: eyes at (x - headRadius/2, y - eyeOffset) and (x - headRadius/2, y + eyeOffset)
  - RIGHT: eyes at (x + headRadius/2, y - eyeOffset) and (x + headRadius/2, y + eyeOffset)

Where eyeOffset is a small value, like headRadius/3.

For the body segments, I'll draw circles with a slightly smaller radius.

Color scheme:
- Snake: green gradient from head to tail
- Head: slightly darker green
- Food: red
- Background: dark gray
- Particles: white or yellow

Now, let's code it all.

I'll start with the HTML structure, then CSS, then JavaScript.

To save space and make it a single file, I'll put everything in one HTML file.

Let me write the complete code.