Snake · qwen3.5-35b-a3b

Output generated Cost / run $0.0035 Runtime 29.9s

Prompt for this run

Build a playable Snake game on a canvas with a 20 by 20 cell board. Use HTML, CSS, and JavaScript as needed. Write it to `index.html` in the current working directory using your file tools. Inline your own CSS and JavaScript. Do not use external assets, CDNs, or network requests. No third-party libraries are provided. Required behavior: - Use arrow keys to turn a snake that advances one cell at a time. Ignore a direction that would immediately reverse into its own neck, including rapid inputs before the next movement step. - Place one food item in an unoccupied cell. Eating it grows the snake by one segment, increases the score, and spawns new food in another unoccupied cell. - Use solid board boundaries: hitting a wall or the snake's body ends the game. Moving into a tail cell that vacates on that same non-growing step is allowed. - Provide Start, Pause/Resume, and Restart. Restart resets snake length, direction, score, food, and game state. Filling the board shows a win state instead of trying to place impossible food. - Display the controls and score. Prevent arrow keys from scrolling the page. Verify: Start the game and make a few turns to check grid-aligned movement and direction response. Pause and resume, then use Restart and check that snake length and score return to their initial values and food occupies a free cell.

⛨ sandboxed Open in new tab ↗

TAKE IT TO CODE

A single self-contained HTML file — copy it and open in any browser, or reuse the prompt with your own pi-agent run.

RUN

modelqwen3.5-35b-a3b

vendorQwen

harnesspi 0.87.1 · browser iteration

generated2026-10-16

METRICS

runtime29.9s

tokens in10k

tokens out3.8k

cached0

cost / run$0.0035

Transcript · 7 messages

system

user

assistant

thinking

I need to build a complete Snake game in a single index.html file. Let me create this with all the required features:

1. Canvas with 20x20 grid
2. Arrow key controls - snake moves one cell at a time
3. Direction reversal prevention (can't go into own neck)
4. Food placement in unoccupied cells
5. Eating food grows snake, increases score, spawns new food
6. Wall/body collision = game over
7. Moving into tail that vacates is allowed (on non-growing step)
8. Start, Pause/Resume, Restart buttons
9. Win state when board is full
10. Display controls and score
11. Prevent page scrolling with arrow keys

Let me write this out:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snake Game</title>
    <style>
        /* CSS styling */
    </style>
</head>
<body>
    <div id="game-container">
        <canvas id="game-canvas" width="400" height="400"></canvas>
        <div id="score">Score: 0</div>
        <div id="controls">
            <h3>Controls:</h3>
            <ul>
                <li>Arrow Keys: Move</li>
                <li>Space: Pause/Resume</li>
                <li>Start: Begin Game</li>
                <li>Pause/Resume: Toggle Pause</li>
                <li>Restart: Reset Game</li>
            </ul>
        </div>
        <div id="game-buttons">
            <button id="start-btn">Start</button>
            <button id="pause-btn">Pause</button>
            <button id="restart-btn">Restart</button>
        </div>
    </div>
    <script>
        // JavaScript game logic
    </script>
</body>
</html>
```

I'll structure the game with a 20x20 grid, 20 pixels per cell for a 400x400 pixel canvas. The game needs arrays for the snake, food, and game state tracking. I'll implement movement logic that checks for collisions and handles food consumption.

The snake starts as a 3-segment array moving right, with food randomly placed in an unoccupied cell. Each frame, I'll update the snake's position, check for collisions, and handle food eating.

Key mechanics include:
- Directional movement with 180-degree turn prevention
- Collision detection with walls and self
- Random food generation that avoids snake body
- Score tracking and visual feedback

I'll implement pause/resume functionality and game state management.

→ write /tmp/job-J8yoIS/index.html (11261 bytes)

toolResult

Successfully wrote to /tmp/job-J8yoIS/index.html

assistant

thinking

Now let me verify the game works by opening it in the browser and checking the functionality.

→ browser {"action":"reload"}

toolResult

Frame 1, +0ms

[Browser image supplied to model]

{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."],"dom":"Score: 0\nControls:\nArrow Keys: Move\nSpace: Pause/Resume\nStart: Begin Game\nPause/Resume: Toggle Pause\nRestart: Reset Game\nStart\nPause\nRestart","images":"attached"}

assistant

thinking

The game appears to be working. I can see the snake in the center of the grid with food at the top-left. Let me verify the key features:

1. The snake is visible (3 segments, light green color)
2. Food is shown (red/pink square at top-left)
3. Score is 0
4. Controls are displayed

I need to verify:
1. Grid-aligned movement with arrow keys
2. Direction reversal prevention
3. Pause/Resume functionality
4. Restart resets snake length, score, and food
5. Wall/collision detection
6. Eating food grows snake and spawns new food

Let me examine the code to ensure all requirements are properly implemented.

I can see the game is running. The snake is visible in the center (3 segments), food is at the top-left, and score is 0. Let me examine the code to verify all requirements are implemented correctly. <read> <file> /tmp/job-J8yoIS/index.html </file> </read>