Snake · mimo-v2.6-flash

Let me build the snake game. Write index.html.

Let me build the snake game. Write index.html, then run in browser and verify.

Let me write the file.

Let me build the Snake game in a single index.html file.

Key requirements:
- 20x20 grid canvas
- Arrow keys turn, one cell at a time, ignore reversal into neck including rapid inputs before next step (buffer direction queue, validate against current direction)
- Food in unoccupied cell; eating grows by one, +score, respawn
- Solid walls; body collision ends game; moving into tail cell that vacates on non-growing step allowed
- Start, Pause/Resume, Restart buttons
- Win state when board filled
- Display controls and score
- Prevent arrow key scrolling
- Verify in browser

Let me write the file.

Design details:
- Game loop with setInterval or requestAnimationFrame with accumulator. Use fixed tick interval, e.g., 150ms, adjustable maybe (speed increase optional — keep simple, maybe slight speedup optional; not required).
- Direction queue: keep pendingDir validated against lastQueuedDir (or current dir + queued). Standard approach: maintain `dir` (current movement direction) and `dirQueue` (max 2). On arrow key: take last direction in queue (or dir), if new direction is not opposite and not same, push to queue. This handles rapid inputs before next step: e.g., pressing Up then Left quickly while moving Right — Up is valid (queue [Up]), then Left vs Up is valid turn, so queue [Up, Left]. Hmm, but Left relative to actual current dir (Right) would be reverse... Actually the check should be against the last queued direction, since the snake will follow the queue. Pressing Right→Up→Left rapidly: dir=Right, queue empty. Up pushed (not opposite Right). Left vs Up: not opposite, pushed. Queue: [Up, Left]. Next tick: head turns Up, next tick Left. That's fine and legal — never reverses into neck.

But careful: Left relative to queue-last=Up is fine. Never does snake go opposite of current dir consecutively? After moving Up, dir=Up, next queued Left is fine. Good.

Edge: rapid input before first step: snake starts moving Right (initial dir). Press Left immediately: Left is opposite of Right → ignored. Good.

Movement step:
- pop next dir from queue if valid (validate again vs current dir).
- compute new head = head + dir.
- wall check → game over.
- body check: allow if cell is tail and not growing this step. Standard: check collision against body segments excluding tail if not eating. Determine food position: if newHead equals food → growing. occupiedCells = snake body; if growing, whole body is solid; else, exclude last segment (tail vacates).

Implementation: 
```
const willGrow = (newHead.x === food.x && newHead.y === food.y);
const bodyToCheck = willGrow ? snake : snake.slice(0, -1);
if (bodyToCheck.some(seg => seg.x===newHead.x && seg.y===newHead.y)) → game over
```
But careful: snake array — decide ordering: snake[0] = head or tail? Let's use snake[0] = head, push new head at front, pop tail unless growing. Then bodyToCheck excluding tail = snake.slice(0, -1)... wait snake[0]=head, tail = last element. snake.slice(0, -1) excludes tail. Yes.

Wait, but collision check should exclude the head itself? newHead is a new cell, current head stays as body. So checking against snake (which includes current head) is correct: moving into current head cell would mean reversing, which is prevented anyway. Checking against slice(0,-1) (all except tail) includes head — fine.

Food spawn: collect free cells, random pick. If none → win state.

Win state: snake length = 400 → win.

States: 'idle' (ready, not started), 'running', 'paused', 'gameover', 'won'.

Buttons: Start (starts from idle → running; maybe also from paused? Keep Start disabled unless idle/gameover? Let's define: Start button: starts game if state idle; if paused, resume? Better separate Pause/Resume button and Restart button.

- Start: enabled when state === 'idle'. On game over/win, Start disabled; use Restart to reset to idle then Start? Or Restart resets and starts immediately? Requirement: "Restart resets snake length, direction, score, food, and game state." Reset to initial state (idle) seems right — snake length initial (3 or 4), score 0, direction right, food respawned, state idle. The verification: "use Restart and check that snake length and score return to their initial values and food occupies a free cell." So after restart, score=0, length initial, food free cell. Whether it auto-starts — could either. I'll make Restart reset to idle (paused-stopped) state so it's a clean reset; the user then presses Start. Actually maybe more user-friendly: Restart resets and starts playing? Hmm, "resets ... game state" — ambiguous. Verification says check length and score return to initial values — easier if it resets to idle. But if it auto-starts, length/score still initial immediately. I'll make Restart reset to idle state (stopped), showing "Press Start" prompt. That's clean and checkable. Hmm, but some might expect restart to start playing. Let me make Restart reset to ready state; the tester can then Start. The verification step says "then use Restart and check that snake length and score return to their initial values and food occupies a free cell" — doesn't require game running after restart. I'll keep idle. Actually, to be safe on both: Restart → resets to idle. Start then begins. I'll clearly label button "Restart".

Pause/Resume: button toggles between pause and resume when running/paused. Disabled when idle/gameover/won.

Keyboard: Arrow keys preventDefault always (to avoid scroll). Space could toggle pause — optional, but "Display the controls" — display arrow keys + buttons info.

Movement speed: base 140ms, maybe speed up slightly as score increases (min 70ms). Optional; keep it but it's fine. Actually let's keep it simple and predictable: fixed 130ms? Slight speedup is nice. I'll do interval = max(70, 140 - score*3). Hmm verification of grid alignment doesn't care. Keep mild speedup.

Grid rendering: canvas sized responsive. Canvas element with width/height = 20*cell. Use CSS to scale (e.g., width: min(90vw, 520px)). But scaling via CSS may blur; use fixed internal resolution e.g. cellSize 26 → 520x520, CSS width 100% max 520. Fine.

Draw: board background checker subtle, grid lines, snake segments (rounded rects, head distinct color/eyes), food (red circle/apple), overlay messages for states (Ready / Paused / Game Over / You Win).

Also display: score, best score (localStorage may not be available? It's fine, sandboxed; wrap in try/catch), length, state, speed maybe.

Also display direction queue? Not needed.

Score display: score value; each food +1 (or +10?). "increases the score" — I'll do +10? Verification: score returns to initial value (0). Either fine. I'll use +1 per food to match "score" as food count? Common is +10. I'll show both "Score" (points, +10 per food) and maybe "Apples". Keep simple: Score +1 per food? Let's do +10 per food and also show length. Either is fine. I'll do score = 10 per food... hmm verification only checks reset to 0. I'll do +1 per food for simplicity — display "Score: 0". Actually let's do +10; no, simplicity: score increments by 1 per food. Fine.

Also handle: ignore direction input when not running (state !== running) — but queue initial direction? If idle, arrow keys shouldn't matter; ignore. Also when game over, ignore.

Rapid inputs before movement step: handled with queue validated against last queued direction.

One subtlety: after eating, snake grows — the queue direction validation uses last queued dir, fine.

Another subtlety: if queue has directions queued but game pauses, keep queue.

Touch controls? Not required. Could add on-screen D-pad buttons for mobile — nice-to-have, but keep focus. Maybe add small on-screen arrow buttons? Not required; skip to save time. Actually it might help testing via browser click. But verification says use arrow keys. I'll add keyboard only, plus maybe clickable buttons aren't needed.

Timing: use requestAnimationFrame with timestamp accumulator, or setInterval restarted. rAF with accumulator handles pause cleanly. On pause, clear accumulator.

Let me write the code.

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Snake</title>
<style>...</style>
</head>
<body>
<main class="app">
  <header>...title, score panel...</header>
  <div class="board-wrap">
    <canvas id="board" width="520" height="520"></canvas>
    <div id="overlay" class="overlay">...</div>
  </div>
  <div class="controls">
    <button id="startBtn">Start</button>
    <button id="pauseBtn">Pause</button>
    <button id="restartBtn">Restart</button>
  </div>
  <section class="hud">... score, length, best, state ...</section>
  <section class="help">Controls: ← ↑ → ↓ ...</section>
</main>
<script>...</script>
</body>
</html>
```

Overlay: show messages for idle/paused/gameover/win. Could draw overlay in canvas instead of DOM — DOM overlay is easier for text. But overlay must not block clicks? It sits over canvas; buttons are below. pointer-events: none on overlay to be safe.

Let me write the JS carefully.

```js
const COLS = 20, ROWS = 20;
const canvas = document.getElementById('board');
const ctx = canvas.getContext('2d');
const CELL = canvas.width / COLS; // 26

const DIRS = { up:{x:0,y:-1}, down:{x:0,y:1}, left:{x:-1,y:0}, right:{x:1,y:0} };
const KEYMAP = { ArrowUp:'up', ArrowDown:'down', ArrowLeft:'left', ArrowRight:'right' };

const INITIAL_LENGTH = 4;
let snake, dir, dirQueue, food, score, best=0, state='idle', acc=lastTime=0, speed;

function reset() {
  snake = [];
  const startRow = Math.floor(ROWS/2);
  const startCol = 6; // head? 
  // snake[0] = head, body extends to the left (moving right)
  for (let i=0;i<INITIAL_LENGTH;i++) snake.push({x: startCol - i, y: startRow});
  dir = 'right';
  dirQueue = [];
  score = 0;
  speed = 140;
  spawnFood();
  state = 'idle';
  ...
}
```

startCol=6, length 4 → segments x: 6,5,4,3 all ≥0. Good. Head at (6,10).

spawnFood: free cells list; if empty → state='won'.

step():
```
function step(){
  if (dirQueue.length) {
    const next = dirQueue[0];
    if (!isOpposite(next, dir)) { dir = next; dirQueue.shift(); }
    else dirQueue.shift(); // shouldn't happen since validated at input
  }
  ...
}
```
Simpler: validate at input time against lastQueued (queue.length? queue[last] : dir). Also re-validate at step vs dir (in case... shouldn't differ, since queue validated in order). Actually at input time I compare against queue last which is the direction that will be current when that queued step executes. That's correct. At step time, pop queue head and set dir — guaranteed non-opposite relative to previous queued dir = current dir. So no re-validation needed, but harmless to include.

Movement:
```
const head = snake[0];
const d = DIRS[dir];
const nh = {x: head.x + d.x, y: head.y + d.y};
if (nh.x<0||nh.y<0||nh.x>=COLS||nh.y>=ROWS) { gameOver(); return; }
const willGrow = food && nh.x===food.x && nh.y===food.y;
const limit = willGrow ? snake.length : snake.length-1;
for (let i=0;i<limit;i++) if (snake[i].x===nh.x && snake[i].y===nh.y) { gameOver(); return; }
snake.unshift(nh);
if (willGrow) { score++; speed = Math.max(70, 140 - score*2); spawnFood(); /* may set won */ }
else snake.pop();
```

Wait: willGrow check happens before unshift — but what about eating food that's on the tail cell? Food never spawns on occupied cells, including tail, so fine.

Also note: collision with tail cell when not growing — allowed because limit = length-1 excludes tail (index length-1). Good.

Order: unshift then pop; spawnFood after unshift+score — need snake updated: unshift first, then if willGrow: score++, spawnFood() checks occupancy including new head. Good.

Game over: state='gameover', update best, show overlay.

Win: when spawnFood finds no free cells → state='won'. Check: after growing to length 400. Also handle initial reset: board isn't full at reset, fine.

Loop:
```
function loop(t){
  if (state==='running'){
    if (!lastTime) lastTime = t;
    acc += t - lastTime;
    lastTime = t;
    while (acc >= speed && state==='running'){ acc -= speed; step(); }
  } else { lastTime = t; acc = 0; }
  draw();
  requestAnimationFrame(loop);
}
```
Hmm, when paused, acc=0 — good. When resuming, lastTime keeps updating so acc doesn't accumulate. Good.

Actually `lastTime` initial: set to 0; first frame sets it.

Edge: speed changes mid-loop — while uses current speed, fine.

Draw:
- background: fill dark, draw subtle checkerboard cells.
- grid lines.
- food: red circle with slight highlight.
- snake: body rounded rects with color gradient (head lighter/different), maybe eyes on head based on dir.
- If idle, draw snake static (already drawn).

Overlay text via DOM: message + subtext. States:
- idle: "Ready" / "Press Start or Enter"
- running: hidden
- paused: "Paused"
- gameover: "Game Over" / "Score: N — press Restart"
- won: "You Win!" / "Board filled!"

Buttons behavior:
- startBtn: if state==='idle' → running; disabled otherwise? Enable only idle. On gameover/won, Start disabled, Restart required. Or allow Start from gameover to restart? Keep strict: Start enabled only when idle.
- pauseBtn: if running → pause ("Resume" label after pause... The button says "Pause" then "Resume"). If state==='paused' → resume. Disabled when idle/gameover/won.
- restartBtn: always enabled → reset() (state idle) and draw.

Keyboard:
- Arrow keys: e.preventDefault() always. If state==='running', queue direction.
- Enter/Space: if idle → start; if running → pause; if paused → resume; Space preventDefault too? Space scrolling — preventDefault when not focused on button... Buttons: if a button has focus, Space triggers click. That could double-handle. To avoid weirdness: on keydown for Space/Enter, if document.activeElement is a button, let default happen (button click). Otherwise handle. Keep simple: only handle arrows + Space with preventDefault; for Space, if activeElement is a button, don't preventDefault and don't handle (button click does it). Hmm, then if button focused and space pressed → button click triggers. Fine.

Actually simpler: handle Enter and Space globally: if target is a button, skip (let the button's click fire). Else if idle→start, paused→resume, running→pause.

Let me also add keydown handler that ignores repeat for direction? Arrow key auto-repeat: repeated same direction → same direction queued check: same direction as lastQueued → ignore (I check `next === lastDir` → ignore). Opposite → ignore. So repeats harmless.

isOpposite: up/down, left/right pairs.

Queue cap: if queue.length >= 2, ignore new input (preords nonsense input). Actually cap 2 is standard; with rapid inputs, allowing more could cause queued turns that seem odd. Cap at 2.

Hmm — but consider verification "rapid inputs before the next movement step": e.g., moving right, press Up then Left quickly before a step. queue: Up (validated vs 'right' → ok), Left (validated vs 'up' → ok). Both queued. On next steps: turn up, then left. Good.

But what if the tester presses Up then Down rapidly (both before step)? Down validated vs 'up' → opposite → ignored. Good — never reverses into neck: when head moves up, dir=up, down would be reverse — correctly ignored.

What if press Down while moving right? Opposite of... down vs right is a valid perpendicular turn! Down is not opposite of right. So snake turns down. Right? Opposite of right is left. So Down is fine. Yes.

Anti-reverse: only check against the direction the snake will be facing at that queued step, i.e., last of queue (or current dir). Correct.

Testing via browser: I need to start the game and simulate arrow keys. The browser tool has `key` action. Let me check how it works — action "key" with text? Probably `{"action":"key","text":"ArrowUp"}`. I'll try.

Verification plan:
1. Load page, inspect console for errors, screenshot.
2. Click Start (via click coordinates or evaluate? browser tool has click with x,y). Buttons' positions — take screenshot first to find them.
3. Press arrow keys, take screenshots/motion to check movement.
4. Pause, resume.
5. Restart, check score/length reset — how do I "check"? I can display length and score in HUD and read via screenshot, or `inspect` DOM which dumps state. The `inspect` action probably shows DOM/JS state. Maybe I can expose window.__game = {get state...} for testability, and inspect. Let's expose a debug hook: `window.snakeGame = { getState: () => ({...}) }`. Then use inspect action to see it? The inspect action likely returns DOM snapshot and console. Hmm, uncertain. I can also render status in DOM elements (score, length, state, food cell) and read them via inspect/screenshot.

Let me just build it, then run browser actions and see what output looks like.

Also: expose `window.__snake` debug object for verification of food cell occupancy etc. And maybe display food coordinates subtly? Not needed; I'll include in debug state: food, snake cells, so I can verify food not on snake.

Let's write the file now.

CSS: dark theme, centered layout, nice.

Let me write it.

```css
:root{ --bg:#0f1218; --panel:#171c26; --accent:#5ee08a; ... }
body { margin:0; font-family: system-ui, sans-serif; background: radial-gradient(...); color:#e8edf5; display:flex; justify-content:center; }
.app { width:min(94vw, 640px); padding:18px 12px 32px; }
header h1 { ... }
.stats { display:flex; gap:10px; flex-wrap:wrap; }
.stat { background:var(--panel); border:1px solid #26304199; border-radius:10px; padding:8px 14px; }
.stat b { display:block; font-size:1.3rem; }
.board-wrap { position:relative; margin:14px auto; width:min(92vw, 560px); aspect-ratio:1; }
canvas { width:100%; height:100%; display:block; border-radius:12px; box-shadow:...; image-rendering: auto; background:#10151d; }
.overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; pointer-events:none; background:rgba(6,9,14,.55); border-radius:12px; }
.overlay.hidden{display:none}
.overlay h2 { font-size:2rem; margin:0 0 6px; }
.controls{display:flex; gap:10px; justify-content:center; margin-top:6px;}
button { ... }
button:disabled{opacity:.45; cursor:not-allowed}
.help{...}
```

Buttons layout: Start, Pause, Restart.

HUD: Score, Length, Best, State, Speed maybe. Also "Food" maybe. Show State so verification easy.

Now the drawing code:

```js
function draw(){
  const W = canvas.width;
  ctx.fillStyle = '#0d1118';
  ctx.fillRect(0,0,W,W);
  // checker
  for r,c: if((r+c)%2===0) fill rgba(255,255,255,0.02)
  // grid lines
  ctx.strokeStyle='rgba(255,255,255,0.05)'; lineWidth 1;
  for i 0..20 lines at i*CELL
  // food
  // snake
}
```

CELL = 26, canvas 520.

Food drawing: circle radius CELL*0.34 at center, color #ff5c6c, plus small green leaf? Keep simple: circle + highlight.

Snake: for each segment, rounded rect inset 1.5px; head different color (#7CF5A6), body gradient from #3ED586 to #1F9E5F based on index. Eyes: two small dark dots positioned by dir.

rounded rect: ctx.roundRect may not exist in older browsers but modern is fine; provide fallback using manual path function to be safe. I'll write a helper `rrect(x,y,w,h,r)` using arcTo — safe everywhere.

Game over flash? Not necessary.

Overlay message update: function updateUI() called on state changes and after steps (for score/length).

Let me now write the whole file.

Also `prevent default` for arrows: `if (['ArrowUp','ArrowDown','ArrowLeft','ArrowRight',' '].includes(e.key)) e.preventDefault();`

Also `touchstart`? Skip.

Also should I prevent scrolling on the page for arrows — yes handled.

Status text in HUD element `stateLabel`.

Debug hook:
```js
window.__snake = {
  get state(){return state},
  get score(){return score},
  get length(){return snake.length},
  get food(){return food && {x:food.x,y:food.y}},
  get snake(){return snake.map(s=>({x:s.x,y:s.y}))},
  get dir(){return dir},
  get queue(){return dirQueue.slice()},
  step: () => { if(state==='running') step(); } // hmm
};
```
Read-only getters plus maybe a `snapshot()` method. For inspect tool, it probably returns DOM; I might use `browser action: inspect` to see console/DOM. Let's see what it gives.

Actually I could verify things by rendering food/length in DOM text and reading screenshot, but screenshots are images — I can read them (images sent as attachments). Good, I can see them.

Alternatively inspect might dump DOM including text content — better for precise reading. Let's try.

Write the file now.

One more consideration: "Ignore a direction that would immediately reverse into its own neck, including rapid inputs before the next movement step." — handled via queue validation.

Also initial state before Start: draw static snake. Also on 'idle' arrow keys ignored (state!=='running'). Should arrow keys before start be buffered? Not required; ignore.

Edge: gameover mid-step, while loop checks state==='running'.

Also, after win/gameover, pressing Start disabled; user must Restart. Maybe allow Start to act as restart when gameover? Could be friendly: if state==='gameover'||'won' → reset then start. Hmm, but requirement says Start, Pause/Resume, Restart provided. I'll keep Start enabled only for idle; but also allow Start from gameover to do reset+start? That might confuse verification ("Restart resets..."). Keep strict: Start enabled when idle only.

Actually, being lenient: Start button when state is gameover/won → performs reset() then starts. That's convenient and doesn't break anything. But disabled styling communicates state. I'll keep it strict and simple — Start disabled unless idle.

Speed: show "Speed" maybe not. Show Score, Length, Best, State.

Let me write.

For best score: try/catch localStorage.

Now write file.

Let me build the snake game quickly.