Snake · gemma-4-26b-a4b-it

The user wants a playable Snake game in a single `index.html` file.

    *   Canvas with 20x20 grid.
    *   Snake movement using arrow keys (one cell at a time).
    *   Prevent reversing into self.
    *   Food spawns in unoccupied cells.
    *   Eating food: snake grows, score increases, new food spawns.
    *   Collision: Wall or self (except tail cell that is vacating during non-growing move).
    *   Controls: Start, Pause/Resume, Restart.
    *   UI: Score, Controls, Game State (Win/Loss).
    *   Prevent arrow key scrolling.
    *   No external assets/CDNs/network requests.
    *   Self-contained in `index.html` (CSS in `<style>`, JS in `<script>`).

    *   HTML structure: Container, Canvas, Score Display, Controls (Start, Pause, Restart), Message overlay (Game Over/Win).
    *   CSS: Styling for layout, canvas, and buttons.
    *   JS:
        *   Game constants: Grid size (20), cell size, game loop interval.
        *   State variables: Snake (array of coordinates), food (coordinate), direction, score, game status (playing, paused, game-over, won), grid size.
        *   Functions:
            *   `initGame()`: Reset state.
            *   `gameLoop()`: Periodic update and draw.
            *   `update()`: Move snake, check collisions, check food.
            *   `draw()`: Clear canvas, draw snake, draw food, draw grid.
            *   `handleKeyDown(event)`: Process arrow keys and prevent scrolling.
            *   `spawnFood()`: Find random empty cell.
            *   `reset()`: Reset everything.

    *   *Grid:* 20x20.
    *   *Snake:* Array of `{x, y}` objects.
    *   *Direction:* `{dx, dy}`.
    *   *Input Buffer:* To handle rapid key presses and prevent reversing.
    *   *Collision:*
        *   Wall collision: `x < 0 || x >= 20 || y < 0 || y >= 20`.
        *   Self collision: `snake.some(segment => segment.x === head.x && segment.y === head.y)`.
        *   Special rule: "Moving into a tail cell that vacates on that same non-growing step is allowed."
            *   If the snake is NOT growing, the tail position will be empty in the next frame.
            *   So, if we check collisions *after* calculating the next position but *before* actually updating the snake array (or we check the tail *after* it moves), we can handle this.
            *   Wait, if the snake is NOT growing, the new head is added and the tail is removed. The old tail position becomes empty. So if the head moves into the *current* tail position, it's fine as long as the snake isn't growing.
            *   If the snake *is* growing, the tail doesn't move, so moving into it would be a collision.

    *   *Preventing Reversal:*
        *   When a key is pressed, queue the direction change.
        *   In the `update` step, take the next direction from the queue (if any) and update the current direction.
        *   Verify the new direction isn't opposite to current direction.

    *   *Win Condition:* If the snake occupies all 400 cells.

    *   *Canvas dimensions:* Let's say 400x400 (20x20 cells, each 20px).

    *   `index.html` containing:
        *   `<style>`
        *   `<body>`
            *   `<div id="game-container">`
                *   `<canvas id="gameCanvas"></canvas>`
                *   `<div id="ui">...</div>`
            *   `<script>`

    *   I'll write the code to `index.html`.
    *   Then I'll use the `browser` tool to test it.

    *   *Input management:*
        `keyQueue = []`
        `onKeyDown`: push to `keyQueue`, if `keyQueue.length > 1`, `shift()`. (Wait, standard snake input buffer often works by only allowing one direction change per tick).
        Actually, a simpler way: `nextDirection = null`. `onKeyDown` sets `nextDirection` if it doesn't violate the "no reverse" rule. In `update()`, `currentDirection = nextDirection`.

    *   *Collision check details:*
        ```javascript
        // newHead is the calculated next head position
        // if snake is NOT growing:
        //    is there a collision with any segment EXCEPT the last one?
        // if snake IS growing:
        //    is there a collision with any segment (including all)?
        ```

    *   Wait, if we use the "tail vacates" rule:
        If `isGrowing` is false, the new snake array will have the same length. The tail moves forward.
        So the collision check should be:
        ```javascript
        let nextHead = { x: snake[0].x + dir.x, y: snake[0].y + dir.y };
        // Check wall collision
        if (nextHead.x < 0 || nextHead.x >= GRID_SIZE || nextHead.y < 0 || nextHead.y >= GRID_SIZE) {
             gameOver();
        }
        // Check body collision
        // If NOT growing, the tail will move out of its current spot.
        // So we check collision with snake segments excluding the last one.
        // If growing, we check collision with all current segments.
        let collisionBody = false;
        let checkLength = isGrowing? snake.length : snake.length - 1;
        for (let i = 0; i < checkLength; i++) {
            if (snake[i].x === nextHead.x && snake[i].y === nextHead.y) {
                collisionBody = true;
                break;
            }
        }
        if (collisionBody) gameOver();
        ```

    *   Wait, the rule says: "Moving into a tail cell that vacates on that same non-growing step is allowed."
        This means:
        1. Calculate `nextHead`.
        2. If `nextHead` is same as `snake[snake.length-1]` AND `!isGrowing`, it's okay.
        3. Otherwise, check if `nextHead` is in `snake`.

    *   *Spawn food:*
        ```javascript
        function spawnFood() {
            let newFood;
            let attempts = 0;
            while (attempts < 100) {
                newFood = {
                    x: Math.floor(Math.random() * GRID_SIZE),
                    y: Math.floor(Math.random() * GRID_SIZE)
                };
                if (!snake.some(s => s.x === newFood.x && s.y === newFood.y)) {
                    break;
                }
                attempts++;
            }
            // If no empty cell found after 100 tries (unlikely on 20x20 unless full)
            // Check if board is full
            if (snake.length === GRID_SIZE * GRID_SIZE) {
                // Win state
            }
        }
        ```

    *   *Edge case: Filling the board.*
        If `snake.length === GRID_SIZE * GRID_SIZE`, it's a win.

    *   *Input processing for "preventing rapid input reverse":*
        ```javascript
        const inputBuffer = [];
        window.addEventListener('keydown', e => {
            if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
                e.preventDefault();
                // Add to buffer if not reversing
                const lastDir = inputBuffer.length > 0? inputBuffer[inputBuffer.length - 1] : currentDirection;
                let newDir = null;
                if (e.key === 'ArrowUp' && lastDir.dy!== 1) newDir = {x:0, y:-1};
                if (e.key === 'ArrowDown' && lastDir.dy!== -1) newDir = {x:0, y:1};
                if (e.key === 'ArrowLeft' && lastDir.dx!== 1) newDir = {x:-1, y:0};
                if (e.key === 'ArrowRight' && lastDir.dx!== -1) newDir = {x:1, y:0};
                if (newDir) inputBuffer.push(newDir);
            }
        });
        ```
        Wait, `currentDirection` should be updated in `update()` from the buffer.

    *   *Full game loop:*
        ```javascript
        function update() {
            if (gameState!== 'playing') return;

            if (inputBuffer.length > 0) {
                currentDirection = inputBuffer.shift();
            }

            const nextHead = {
                x: snake[0].x + currentDirection.x,
                y: snake[0].y + currentDirection.y
            };

            // Check wall collision
            if (nextHead.x < 0 || nextHead.x >= GRID_SIZE || nextHead.y < 0 || nextHead.y >= GRID_SIZE) {
                return endGame(false); // Loss
            }

            // Check body collision
            // If not growing, the tail position will be empty next step.
            let isEating = (nextHead.x === food.x && nextHead.y === food.y);
            
            // The rule: "Moving into a tail cell that vacates on that same non-growing step is allowed."
            // We'll check collision with segments that won't move.
            // If eating, snake grows, so tail stays. We check all segments.
            // If not eating, snake doesn't grow, so tail moves. We check all segments except the last.
            let checkSegments = isEating? snake : snake.slice(0, -1);
            
            if (snake.some(s => s.x === nextHead.x && s.y === nextHead.y) &&!isEating) {
                // This is tricky. If I'm not eating, and I hit the tail, it's okay if the tail moves.
                // If I am eating, the tail doesn't move.
                // So:
                // if (isEating) { check collision with all segments }
                // else { check collision with all segments EXCEPT the last one }
            }
            // Let's refine.
        }
        ```

        Correct logic for "Moving into a tail cell that vacates on that same non-growing step is allowed":
        ```javascript
        const nextHead = {
            x: snake[0].x + currentDirection.x,
            y: snake[0].y + currentDirection.y
        };

        // 1. Wall collision
        if (nextHead.x < 0 || nextHead.x >= GRID_SIZE || nextHead.y < 0 || nextHead.y >= GRID_SIZE) {
            return endGame(false);
        }

        // 2. Eating food?
        const isEating = (nextHead.x === food.x && nextHead.y === food.y);

        // 3. Body collision?
        // If eating, the tail stays. We check if head hits any segment.
        // If not eating, the tail moves. We check if head hits any segment EXCEPT the tail.
        let collision = false;
        if (isEating) {
            // Check collision with all current segments (the new head will be added, 
            // so we check if it hits the existing ones)
            for (let i = 0; i < snake.length; i++) {
                if (nextHead.x === snake[i].x && nextHead.y === snake[i].y) {
                    collision = true;
                    break;
                }
            }
        } else {
            // Check collision with all segments EXCEPT the last one
            for (let i = 0; i < snake.length - 1; i++) {
                if (nextHead.x === snake[i].x && nextHead.y === snake[i].y) {
                    collision = true;
                    break;
                }
            }
            // Special check: What if the next head hits the current tail?
            // "Moving into a tail cell that vacates on that same non-growing step is allowed."
            // The loop above already handles this because it only checks up to snake.length - 2.
            // Wait, if snake.length is 1, snake.slice(0, -1) is empty. That's correct.
        }

        if (collision) {
            return endGame(false);
        }

        // 4. Move snake
        snake.unshift(nextHead);
        if (isEating) {
            score += 1;
            if (score === GRID_SIZE * GRID_SIZE - 1) {
                endGame(true); // Win
            } else {
                spawnFood();
            }
        } else {
            snake.pop();
        }
        ```

    *   Wait, `score === GRID_SIZE * GRID_SIZE - 1` is the win condition if we start with length 1. If length is `GRID_SIZE * GRID_SIZE`, it's a win.

    *   *Wait, I need to make sure I handle the score correctly.*
        Initial score: 0.
        Initial snake: `[{x: 10, y: 10}]`.
        First food: `(5, 5)`.
        If eat food: length becomes 2. Score 1.

    *   *Input buffer logic again:*
        If I press `ArrowDown` then `ArrowLeft` very quickly.
        - `currentDirection` = `{x:0, y:1}`.
        - `inputBuffer` = `[{x:-1, y:0}]`.
        - `update()`: `currentDirection` becomes `{x:-1, y:0}`.
        This works.

    *   Let's write the code.

The code is written. Now I need to verify it.
I will use the `browser` tool to:
1. Start the game.
2. Check movement.
3. Check Pause/Resume.
4. Check Restart.
5. Check collision.

I'll start by running the game.

The user wants a Snake game built in a single `index.html` file.

Requirements:
- 20x20 cell board on a canvas.
- Use arrow keys to turn.
- Snake advances one cell at a time.
- Ignore reverse direction (including rapid inputs).
- Food: one item, grows snake, increases score, spawns in unoccupied cell.
- Collision: wall or snake body ends game.
- Tail cell that vacates in same step is allowed.
- UI: Start, Pause/Resume, Restart.
- Restart resets everything.
- Filling the board shows win state (instead of impossible food spawn).
- Display controls and score.
- Prevent arrow keys from scrolling the page.
- No external assets/CDNs/network requests.

I will implement this using:
- HTML5 Canvas for rendering.
- Vanilla JS for game logic.
- CSS for styling.
- Single file `index.html`.

Plan:
1. Create `index.html` with the required structure.
2. Add CSS for styling the canvas and UI.
3. Implement the JS logic:
    - Game state: score, snake (array of coords), direction, nextDirection, food, gameStatus (running, paused, gameover, won).
    - Grid: 20x20.
    - Input handling: `keydown` for arrow keys, preventing default behavior.
    - Update loop: `requestAnimationFrame` or `setInterval`. Given it's a snake game, a controlled interval is often better for speed control.
    - Collision detection: wall and body.
    - Food spawning: check all cells for empty spaces.
4. Add the required controls.
5. Verify by running and checking.

Let's start writing the code.