MiniMax M3.1 Flash

Let me build a polished Snake game.

Key features:
- Canvas grid 24x24 cells
- Smooth movement (interpolation between grid steps)
- Input queue for quick successive presses
- Food, particles, score, best score
- Overlay for game over, pause
- Responsive down to 375px

Let me write it carefully.

Design: dark theme, neon green snake, glowing eyes, rounded segments, gradient food, particle burst.

Implementation details:
- Grid size 24, cell size computed from canvas size.
- Canvas CSS size responsive; internal resolution = css size * dpr.
- Use requestAnimationFrame with fixed step logic and interpolation.

Snake represented as array of {x,y} grid cells, head at index 0. Move: compute new head, unshift, pop.

Smooth movement: keep prevPositions and a progress t between steps. Render with interpolated positions.

Let me do: snake array in grid coords. Each frame, stepTimer advances by dt. When stepTimer >= stepDuration, perform a grid step. For rendering, compute `t = stepTimer/stepDuration` and lerp between previous snake cells and current cells. Simpler: keep `renderSnake` array where each segment's position is lerp from previous cell to current cell. i.e., for index i, current cell = snake[i], previous cell = snake[i+1] (the cell it came from). Interpolate from snake[i+1] to snake[i] by t? Actually when snake moves, head goes to new cell, and body segment i takes cell that was segment i-1's cell. So segment i moves from snake[i+1] to snake[i]. Yes: before step, segments at positions p0..pn. After step: new positions p0'=newHead, p1'=p0, p2'=p1... So segment i moves from old p_i to new p_{i+1}... hmm.

Let me define after a step, snake[i] is current grid position of segment i. Before that step, snake_old[i]. Segment i's previous position = snake_old[i]. Since snake_new[i] = snake_old[i-1] for i>=1, segment i travels from snake_old[i] to snake_old[i-1]. So if I store prev array copy before step, then lerp(prev[i], cur[i]) with t gives smooth movement. Segment i: from prev[i] to cur[i] where cur[i]=prev[i-1]. Good.

For rendering, at t=0 render prev positions, at t=1 render cur. t = stepTimer/stepDuration.

Input queue: queue of directions pressed. On key press, validate against the last queued direction (or current direction if queue empty) — not reversing. Also prevent 180 relative to current dir. Use queue length cap.

Actually to honor quick presses: if queue has pending, compare to queue's last element; else compare to current direction. Also disallow pressing same as current direction? Allow but useless; better skip duplicates to avoid wasting steps. Hmm, if user presses Up then Left quickly, queue = [up, left]. Good.

But careful: after queue processing, direction changes. Direction validity check against queued last.

Also one issue: if direction turns, snake body segments follow the old path; that's fine, classic snake uses grid movement.

Walls: game over on hitting wall. Optionally wrap. Requirement says game over when hitting wall, so solid walls.

Particles: on eat, burst of small circles with velocity, gravity, fade.

Food: never spawn on snake; use free cells list.

Best score session: variable bestScore in memory (no localStorage allowed).

Overlay: "Click or press a key to start" initially, game over overlay with score, pause overlay.

Keyboard events require focus/click: add click listener on document to start, and show message. 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 before start, an AI plays automatically. Let's implement AI autopilot: picks direction that avoids collision, preferring toward food. Runs in demo mode.

So: state = 'demo' | 'playing' | 'paused' | 'over'. On load, demo mode with AI controlling. Click or key press → starts playing (real user control), and shows instructions. If game over in demo, maybe restart demo automatically? Better: in demo, if game over, restart demo after short delay so it keeps playing. Then user click takes over.

Let me implement AI: for each candidate direction (not reverse), simulate moving head, check collision with body (body excluding tail? tail moves away, so tail cell is safe if not growing). Compute path safety via a simple flood/lookup; pick the direction that moves toward food with a safety check. Use BFS from head to food avoiding body to ensure reachable. Simpler heuristic: choose direction that minimizes distance to food, but verify the resulting cell is safe and that there's an escape. To be robust, do BFS from candidate next cell to food treating body as obstacles (tail as free). If found, prefer that direction; else pick any safe direction.

I'll implement BFS on grid with obstacles = snake cells except tail.

Let's also add speed increase slightly as score grows (nice polish), keep step duration base 130ms decreasing to 70ms.

Rendering: 
- background grid lines subtle
- food: pulsing glowing circle with gradient
- snake: rounded rects, gradient head brighter, eyes with pupils facing direction, tongue? Keep simple.
- Connect segments: draw thick line through interpolated points for continuity plus rounded rects. I'll draw a rounded polyline path with lineJoin round, lineCap round for the body, then head as circle/rounded square with eyes.

Interpolated points: for segment i, center = lerp(prev[i], cur[i], t). Draw stroke path through centers with lineWidth = cell*0.78, round joins. Then head = first center, draw circle radius cell*0.44 with eyes.

Eyes: two white circles offset perpendicular to direction, plus dark pupils offset toward direction.

Score display in HTML above canvas.

Responsive: canvas CSS width = min(560px, 90vw, calc(100vh - 220px)). Use JS to set size. Grid 24x24 => cell size = size/24.

Let's compute: container centered. Use CSS: .wrap { display:flex; flex-direction:column; align-items:center; } canvas { width: min(560px, 92vw, 62vh); aspect-ratio: 1; }

But internal canvas resolution needs to match for crispness. I'll set canvas.width = size*dpr each resize and scale context.

Let me write code.

Also mobile touch? optional swipe support — add for polish.

Let me write.

Colors: background #0b1020, grid lines rgba(255,255,255,0.03), snake body gradient teal-green, head #b8ff6a, food #ff4d6d pulsing.

HUD: score, best, level/speed.

Game over overlay: HTML div overlay on top of canvas with backdrop blur.

Let me code now.

Details for step:

```
function step(){
  const dir = queue.length ? queue.shift() : dir;
  ...
}
```
Wait: direction should be applied from queue at the time of the step. Current direction `dir`. If queue non-empty, take queue.shift() as new dir (already validated). But validation should have been done at press time against last queued/ current. However the queued direction was validated relative to dir at press time, which could differ by the time step happens. E.g., dir=right, queue=[up], then next step dir becomes up; then user presses left — validated against queue last (up) → left vs up is not a reverse, allowed. Then next step dir=left. Fine. But pressing left when dir=right and queue empty → rejected (reverse). Then user presses up: validated against current dir right → allowed, queue=[up]. ok.

Edge: dir=right, queue=[up] pending, user presses right again? validated vs queue last 'up' → 'right' vs 'up' ok, allowed → queue=[up,right]. After step dir=up, next step dir=right. Fine.

Problem: press 'up' then 'down' quickly when dir=right: 'down' vs queue last 'up' → reverse → rejected. Good.

So validation function: reference = queue.length ? queue[queue.length-1] : dir; if newDir is opposite of reference → reject; if newDir equals reference → could skip (redundant) — but if equal to current dir and queue empty, skip is fine. But careful: dir=right, queue empty, press right → skip fine. But dir=right, queue=[up], press right: keep it, since after up, right is needed. So only skip if equals reference AND queue empty. Actually if newDir equals reference, pushing it is harmless but consumes a step. Let's: if queue.length===0 && newDir===dir → ignore. Else push (after reverse check).

Hmm but pushing a dir equal to queue last with queue non-empty: dir=right, queue=[up], press up → queue=[up,up]. Fine, redundant but harmless.

Reverse check: opp(a,b) i.e. a.x === -b.x && a.y === -b.y.

Also limit queue length to 3.

Direction handling: snake head at cell; movement: newHead = head + dir. Note: my snake array — I'll store as array with head first (unshift new head). Fine.

Eating: if newHead equals food → don't pop tail (grow), score+10, particles.

Collision: newHead out of bounds → game over. newHead in body (excluding tail when not growing) → game over. With array unshift approach: after unshift, body = snake.slice(0, len- (growing?0:1)). Check against that.

Implementation:

```
const eating = food && newHead.x===food.x && newHead.y===food.y;
snake.unshift(newHead);
if(!eating) snake.pop();
else { score+=10; particles...; placeFood(); }
```
Collision check before unshift: check newHead against snake cells that will remain: snake.slice(0, eating?snake.length:snake.length-1).

Wait if eating, tail stays, so remaining body = snake (all old). If not eating, body = snake minus last.

Let's check newHead against snake.slice(0, eating ? snake.length : snake.length-1) — for eating case tail included. ok.

Render interpolation: keep prev = copy of snake before step.

Let me write the whole file.

AI function:

```
function aiDir(){
  const head = snake[0];
  const bodySet = new Set(snake.slice(0, snake.length-1).map(c=>c.y*COLS+c.x)); // tail excluded
  const cands = DIRS.filter(d=> !(d.x===-dir.x && d.y===-dir.y));
  // score each
  let best=null, bestScore=-Infinity;
  for(const d of cands){
    const nx=head.x+d.x, ny=head.y+d.y;
    if(nx<0||ny<0||nx>=COLS||ny>=ROWS) continue;
    if(bodySet.has(ny*COLS+nx)) continue;
    const dist = Math.abs(nx-food.x)+Math.abs(ny-food.y);
    // safety: can we still find path? use reachability check
    let s = -dist;
    // bonus for path existence
    if (pathExists(nx,ny)) s += 100;
    if(s>bestScore){bestScore=s;best=d;}
  }
  if(!best) return dir; // will die
  return best;
}
```
pathExists: BFS from (nx,ny) to food avoiding bodySet. If food adjacent-ish. Implement BFS.

Also AI should prefer to continue if no improvement.

Careful: the AI's chosen dir is validated as not reverse, but also must not be reverse of current dir (which it filters). Good.

But the AI direction must also be queued/valid: push into queue? In demo, set dir directly: use queue mechanism: queue = [aiDir()] each step? But the reverse-check inside aiDir uses current dir. Fine — I'll set queue.push(d) if d !== dir and not opposite... Actually simplest: in demo mode, before each step compute d = aiDir(); if d differs from dir, set queue=[d]? But queue validation happens at push. Let's just call enqueue(d) which validates against queue last or dir. Since queue empty each step, validates against dir. AI already excludes reverse. Good.

Hmm, but if AI dir equals dir, enqueue ignores (queue empty && equal) → dir stays. fine.

In demo mode, the food might be unreachable etc. Fine.

Also in demo mode, when snake length grows, AI needs to handle. BFS approach handles.

Game over in demo: after 1s, restart demo (reset score? keep best). Let's restart demo automatically so the demo keeps playing — but requirement says game over overlay shows score and Space/Enter restarts. In demo, auto-restart after ~1.2s, showing overlay briefly. When user takes control (click), game over → overlay with Space/Enter restart.

Let me structure:

states: 'ready' (showing start message, demo playing behind), 'playing', 'paused', 'over'.

On load: state='ready', demo=true, overlay message "Click or press a key to start". Demo plays behind the overlay (overlay semi-transparent so you can see). Actually "behind a 'Click or press a key to start' message" — yes, show overlay with translucent backdrop so demo visible.

On key/click: if state==='ready' → start playing (reset? keep current snake? Probably restart fresh with score 0). Let's reset the game fresh and set demo=false, state='playing'. If state==='over' → Space/Enter restarts. Any key? spec: Space or Enter restarts. I'll make Space/Enter restart; also allow click to restart.

Pause: P key toggles. In ready state, P shouldn't matter.

Let me write HUD: SCORE, BEST, and maybe LENGTH.

Now write the code.

Particle system: array of {x,y (pixel), vx,vy,life,size,color}.

Rendering snake with gradient along body: create linear gradient from head to tail? Use a simple per-segment color interpolate by index.

Let me draw:
- path through centers: stroke with lineWidth cell*0.72, lineJoin/lineCap round, strokeStyle gradient (green at head → teal at tail).
- Then draw a highlight: thinner lighter stroke offset? Keep simple: draw second stroke width cell*0.3 with rgba(255,255,255,0.12) for shine.
- Head: circle at head center radius cell*0.44 filled with brighter color + glow shadow.
- Eyes: white ellipses at offset perpendicular ± cell*0.16 from head center, forward offset cell*0.12; pupils dark circles radius cell*0.09 offset forward.

Direction for eyes = current dir (the direction of travel). Use dir variable.

Food: circle radius cell*0.3 with radial gradient red/orange, pulsing scale, glow, plus small shine.

Grid: subtle lines.

Also draw a faint border.

Let's produce code.

For canvas sizing: use a ResizeObserver or window resize; compute size = canvas.clientWidth; set canvas.width = size*dpr; canvas.height=size*dpr; ctx.setTransform(dpr,0,0,dpr,0,0). cell = size/COLS.

Wrap canvas in a div with position relative for overlay.

CSS for overlay: absolute inset 0, flex center, backdrop-filter blur(4px), background rgba(8,10,25,.72), border-radius.

Fonts: use system monospace / "Segoe UI". No external fonts.

Write final HTML.

Also touch: swipe on canvas.

Let me write the code fully.

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Neon Snake</title>
<style>...</style>
</head>
<body>
<div class="app">
  <header>
    <h1>SNAKE</h1>
    <div class="stats">...</div>
  </header>
  <div class="board" id="board">
    <canvas id="cv"></canvas>
    <div class="overlay" id="ov"> ... </div>
  </div>
  <p class="hint">Arrows / WASD to move · P pause · Space restart</p>
</div>
<script>...</script>
</body>
```

Now JS.

I'll write carefully.

Best score session variable best = 0.

Time handling: last timestamp; dt clamp.

Loop:
```
function frame(ts){
  requestAnimationFrame(frame);
  const dt = Math.min(50, ts-last); last=ts;
  if(state==='playing'||state==='ready'){
    if(state==='ready'){ // demo ai
      // choose dir each step
    }
    acc += dt;
    stepDur = current;
    while(acc>=stepDur){ acc-=stepDur; doStep(); }
  }
  t = acc/stepDur; render(t);
}
```
But doStep may trigger game over → state 'over'. Handle.

Interpolation t should use min(1, acc/stepDur).

For AI: compute the desired dir just before doStep (when acc >= stepDur). I'll compute AI dir at the moment of step.

doStep:
```
function doStep(){
  if(state==='over') return;
  if(demo){
    const d = aiDir();
    enqueue(d);
  }
  let nd = dir;
  if(queue.length) nd = queue.shift();
  dir = nd;
  const head = snake[0];
  const nx = head.x+dir.x, ny = head.y+dir.y;
  const eating = food && nx===food.x && ny===food.y;
  if(nx<0||ny<0||nx>=COLS||ny>=ROWS){ prev = snake.slice(); die(); return;}
  const body = eating ? snake : snake.slice(0,-1);
  for(const c of body){ if(c.x===nx&&c.y===ny){ prev=snake.slice(); die(); return; } }
  prev = snake.slice();
  snake.unshift({x:nx,y:ny});
  if(eating){ score+=10; best=Math.max(best,score); spawnParticles(...); placeFood(); updateHUD(); }
  else snake.pop();
}
```
Note prev must be copy of snake BEFORE unshift for interpolation: segment i's previous pos = prev[i], current = snake[i]. Yes prev = old array copy, snake after unshift/pop. Then lerp(prev[i], snake[i], t). For segment i, snake[i] = old[i-1] for i>=1 → so segment i moves from old[i] to old[i-1]. Correct direction of travel (toward head). Good.

At t=0 it renders prev positions = old positions, which is exactly previous frame's end. Continuous.

But careful when growing: new tail segment index = old length, prev doesn't have that index → prev[i] undefined → use snake[i] (no interpolation, appears at its cell). Handle: if(!prev[i]) use snake[i].

die(): state='over', show overlay.

placeFood(): collect free cells; random pick.

Particles: burst at food cell center in pixels. Need cell size: compute at spawn time using current canvas size.

Also add a floating "+10" text animation? Nice polish: floating score text. I'll add texts array.

Let me write render:

```
function render(t){
  const S=size, C=cell;
  ctx.clearRect(0,0,S,S);
  // bg
  ctx.fillStyle='#080b18'; fillRect
  // grid
  ...
  // food
  // particles behind? draw particles on top.
  // snake
}
```

For glow use ctx.shadowBlur.

Let me now finalize code text. Also handle window blur → pause? Optional; skip or auto-pause when state playing and hidden. I'll auto-pause on visibilitychange hidden.

Overlay content: title, subtitle, hint. Update via function showOverlay(title, sub, hint).

Ready overlay: "Click or press a key to start" + "Demo playing — take control". 

Game over: "Game Over" + "Score: X" + "Best: Y" + "Press Space or Enter to restart".

Paused: "Paused" + "Press P to resume".

Now, "The iframe only receives keyboard events after the user clicks it" — so we add document click listener to start playing; also keydown listener.

Write the enqueue with reverse check.

DIRS = [{x:0,y:-1},{x:1,y:0},{x:0,y:1},{x:-1,y:0}].

opposite check.

Key mapping: ArrowUp/w/W → {0,-1}, etc.

Now write AI BFS:

```
function pathExists(sx,sy){
  if(sx===food.x&&sy===food.y) return true;
  const blocked = new Set();
  for(let i=0;i<snake.length-1;i++) blocked.add(snake[i].y*COLS+snake[i].x);
  // start cell may be blocked? it's the candidate next cell which we already know is free
  const q=[[sx,sy]], seen=new Set([sy*COLS+sx]);
  while(q.length){
    const [x,y]=q.shift();
    for(const d of DIRS){
      const nx=x+d.x, ny=y+d.y;
      if(nx<0||ny<0||nx>=COLS||ny>=ROWS) continue;
      const k=ny*COLS+nx;
      if(seen.has(k)||blocked.has(k)) continue;
      if(nx===food.x&&ny===food.y) return true;
      seen.add(k); q.push([nx,ny]);
    }
  }
  return false;
}
```
BFS over 576 cells fine.

AI scoring: prefer pathExists, then min distance, then prefer current dir as tiebreak.

Also avoid tight spots: count free neighbors.

Let me write aiDir:
```
function aiDir(){
  const head=snake[0];
  const blocked=new Set();
  for(let i=0;i<snake.length-1;i++) blocked.add(snake[i].y*COLS+snake[i].x);
  let best=null,bestScore=-1e9;
  for(const d of DIRS){
    if(d.x===-dir.x&&d.y===-dir.y) continue;
    const nx=head.x+d.x, ny=head.y+d.y;
    if(nx<0||ny<0||nx>=COLS||ny>=ROWS) continue;
    if(blocked.has(ny*COLS+nx)) continue;
    let s = 0;
    const dist = Math.abs(nx-food.x)+Math.abs(ny-food.y);
    if(pathExists(nx,ny)) s += 1000; else s -= 500;
    s -= dist*3;
    // free space count
    let free=0;
    for(const dd of DIRS){const ax=nx+dd.x,ay=ny+dd.y; if(ax>=0&&ay>=0&&ax<COLS&&ay<ROWS&&!blocked.has(ay*COLS+ax))free++;}
    s += free*8;
    if(d.x===dir.x&&d.y===dir.y) s+=6;
    if(s>bestScore){bestScore=s;best=d;}
  }
  return best||dir;
}
```
Note blocked includes head? snake[0..len-2] includes head (index 0) — head cell is blocked, that's fine since we move away. But pathExists start cell (nx,ny) not blocked.

Careful: pathExists blocks snake[0..len-2], which includes head; that's ok.

Edge: The AI may die anyway; demo restarts.

Demo auto-restart: in die(), if demo → schedule restart after 1000ms. I'll handle in frame: if(state==='over' && demo) { overTimer += dt; if(overTimer>1000) resetGame(true) }.

resetGame(demo): snake reset, score 0, food placed, prev=snake copy, particles cleared, dir right, queue empty.

Also in 'over' state show overlay with score.

Now updateHUD on score change.

Also when user takes control from ready: resetGame(false) and state='playing'. But then the score resets — fine. Show small "You control the snake" flash? The overlay hides.

Let's code the sizes: 

```
const cv=document.getElementById('cv');
function resize(){
  const rect = cv.getBoundingClientRect();
  const dpr = Math.min(2, window.devicePixelRatio||1);
  size = rect.width;
  cv.width = Math.round(size*dpr); cv.height=Math.round(size*dpr);
  ctx.setTransform(dpr,0,0,dpr,0,0);
  cell = size/COLS;
}
```
Use ResizeObserver on canvas or window resize. Canvas CSS width set by CSS: width:100%; aspect-ratio 1. The .board has width min(560px, 94vw, 60vh?) Let's set .board{width:min(92vw, 560px)} and canvas width:100%; height:auto; aspect-ratio:1/1; display:block.

But height limit for 800px viewport: header ~ 90px + hint 30 + padding. 560 board + 90 + 40 = 690 fits in 800. Good. Maybe use min(92vw, 520px, 62vh) to be safe. Use `width: min(92vw, 520px, 58vh)`. At 800 height, 58vh=464 → board 464, plus header fits nicely. Hmm maybe a bit small. Let's use min(92vw,520px,66vh) → 528 at 800 → cap 520. Total ~ 520+120=640 fine. Use that.

Canvas must have attribute width/height initially to avoid layout shift — set width=520 height=520 in HTML.

Let me write everything now.

Eyes direction: use dir (current). Head may be mid-move; interpolate head center. Eye positions based on dir.

I'll draw head as rounded rect? A circle is simpler and distinct. Let's draw head circle radius cell*0.46 with gradient and glow, and the body stroke ends under it.

Body stroke color gradient: create linear gradient from head pos to tail pos with colors from '#c6ff6b' to '#12b8a6'? Let's do per-segment stroke: draw path as a single path but stroke with gradient — gradient computed head→tail direction. Good.

Shine: stroke again narrower with rgba(255,255,255,.15).

Eyes: for perpendicular p = (-dir.y, dir.x). eye offsets: center + forward*cell*0.13 ± perp*cell*0.19. White circle radius cell*0.13, pupil radius cell*0.07 at forward extra cell*0.06.

Let's finalize.

Particles: {x,y,vx,vy,life,maxLife,size,color}. Update: life-=dt/1000; x+=vx*dt/1000 etc; gravity 400. Draw alpha=life/maxLife.

Floating text: {x,y,text,life} rising, alpha fading, fill '#ffd166'.

HUD: score with padding animation? Add class pulse on eat: element.animate? Use simple CSS class toggle with setTimeout.

Write final code.

Also need to prevent scrolling on arrow keys: e.preventDefault().

Let's write it.

One more: "Quick successive key presses must both be honored" — handled by queue.

Now output.