Snake · gpt-6.1-sol
Output generated Cost / run $0.1062 Runtime 145.3s
Prompt for this run
Build a playable Snake game on a canvas with arrow-key controls, a growing tail, food, score, and a game-over and restart state.
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
METRICS
Transcript · 23 messages
Build a playable Snake game on a canvas with arrow-key controls, a growing tail, food, score, and a game-over and restart state.
index.html (14449 bytes)Successfully wrote to index.html
{"action":"reload","x":0,"y":0,"toX":0,"toY":0,"text":"","delta":0}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":"snake\n.\nTHE CLASSICS COLLECTION / 001\nSMALL GAME. BIG APPETITE.\nOne more bite.\n\nA familiar little challenge. How long can you go?\n\nREADY WHEN YOU ARE\nTHE PLAYFIELD\nREADY\nLet’s get growing.\n\nEat, grow, repeat. Just don’t run into\nthe walls — or yourself.\n\nStart game\n→\nor press Space to begin\nONE BITE = 10 POINTS\n30 × 20 GRID\nYOUR SCORE\n00\nPOINTS\n↗ Personal best\n00\nStay in control.\n↑\n←\n↓\n→\nMove\nArrow keys\nPause / resume\nSpace\nRestart\nR\nA little advice\nGive yourself room to grow.\nThe walls aren’t your friends.\nⅡ Pause game\nNO LEVELS. NO RUSH. JUST SNAKE.\nMade for a little downtime.","images":"attached"}
thinking
{"action":"click","x":441,"y":620,"toX":0,"toY":0,"text":"","delta":0}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":"snake\n.\nTHE CLASSICS COLLECTION / 001\nSMALL GAME. BIG APPETITE.\nOne more bite.\n\nA familiar little challenge. How long can you go?\n\nA LITTLE MORE. A LITTLE LONGER.\nTHE PLAYFIELD\nIN PLAY\nONE BITE = 10 POINTS\n30 × 20 GRID\nYOUR SCORE\n00\nPOINTS\n↗ Personal best\n00\nStay in control.\n↑\n←\n↓\n→\nMove\nArrow keys\nPause / resume\nSpace\nRestart\nR\nA little advice\nGive yourself room to grow.\nThe walls aren’t your friends.\nⅡ Pause game\nNO LEVELS. NO RUSH. JUST SNAKE.\nMade for a little downtime.","images":"attached"}
{"action":"inspect","x":0,"y":0,"toX":0,"toY":0,"text":"","delta":0}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":"snake\n.\nTHE CLASSICS COLLECTION / 001\nSMALL GAME. BIG APPETITE.\nOne more bite.\n\nA familiar little challenge. How long can you go?\n\nTHERE’S ALWAYS ANOTHER ROUND\nTHE PLAYFIELD\nGAME OVER\nThat’s a wrap.\n\nA good run. Another bite? You scored 10 points.\n\nPlay again\n↗\npress Space or R to restart\nONE BITE = 10 POINTS\n30 × 20 GRID\nYOUR SCORE\n10\nPOINTS\n↗ Personal best\n10\nStay in control.\n↑\n←\n↓\n→\nMove\nArrow keys\nPause / resume\nSpace\nRestart\nR\nA little advice\nGive yourself room to grow.\nThe walls aren’t your friends.\nⅡ Pause game\nNO LEVELS. NO RUSH. JUST SNAKE.\nMade for a little downtime.","images":"attached"}
{"action":"key","x":0,"y":0,"toX":0,"toY":0,"text":"r","delta":0}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":"snake\n.\nTHE CLASSICS COLLECTION / 001\nSMALL GAME. BIG APPETITE.\nOne more bite.\n\nA familiar little challenge. How long can you go?\n\nA LITTLE MORE. A LITTLE LONGER.\nTHE PLAYFIELD\nIN PLAY\nONE BITE = 10 POINTS\n30 × 20 GRID\nYOUR SCORE\n00\nPOINTS\n↗ Personal best\n10\nStay in control.\n↑\n←\n↓\n→\nMove\nArrow keys\nPause / resume\nSpace\nRestart\nR\nA little advice\nGive yourself room to grow.\nThe walls aren’t your friends.\nⅡ Pause game\nNO LEVELS. NO RUSH. JUST SNAKE.\nMade for a little downtime.","images":"attached"}
{"action":"key","x":0,"y":0,"toX":0,"toY":0,"text":"ArrowUp","delta":0}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":"snake\n.\nTHE CLASSICS COLLECTION / 001\nSMALL GAME. BIG APPETITE.\nOne more bite.\n\nA familiar little challenge. How long can you go?\n\nTHERE’S ALWAYS ANOTHER ROUND\nTHE PLAYFIELD\nGAME OVER\nThat’s a wrap.\n\nA good run. Another bite? You scored 10 points.\n\nPlay again\n↗\npress Space or R to restart\nONE BITE = 10 POINTS\n30 × 20 GRID\nYOUR SCORE\n10\nPOINTS\n↗ Personal best\n10\nStay in control.\n↑\n←\n↓\n→\nMove\nArrow keys\nPause / resume\nSpace\nRestart\nR\nA little advice\nGive yourself room to grow.\nThe walls aren’t your friends.\nⅡ Pause game\nNO LEVELS. NO RUSH. JUST SNAKE.\nMade for a little downtime.","images":"attached"}
thinking
**Adjusting design parameters** It seems I can't use a compound key for the tool, so I’ll work with what I have. It looks like I could improve the screen fit using media queries to set minimum widths and maximum heights. For example, I could set the main width at 920 and header at 80, reducing elements accordingly. There’s also an opportunity for a compact desktop layout between 721 and 850. I should remember to use edit insert style to finalize these adjustments.
{"path":"index.html","edits":[{"oldText":"</style>","newText":"@media(min-width:1051px) and (max-height:850px){header{height:80px}main{max-wSuccessfully replaced 1 block(s) in index.html.
{"action":"reload","x":0,"y":0,"toX":0,"toY":0,"text":"","delta":0}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":"snake\n.\nTHE CLASSICS COLLECTION / 001\nSMALL GAME. BIG APPETITE.\nOne more bite.\n\nA familiar little challenge. How long can you go?\n\nREADY WHEN YOU ARE\nTHE PLAYFIELD\nREADY\nLet’s get growing.\n\nEat, grow, repeat. Just don’t run into\nthe walls — or yourself.\n\nStart game\n→\nor press Space to begin\nONE BITE = 10 POINTS\n30 × 20 GRID\nYOUR SCORE\n00\nPOINTS\n↗ Personal best\n00\nStay in control.\n↑\n←\n↓\n→\nMove\nArrow keys\nPause / resume\nSpace\nRestart\nR\nA little advice\nGive yourself room to grow.\nThe walls aren’t your friends.\nⅡ Pause game\nNO LEVELS. NO RUSH. JUST SNAKE.\nMade for a little downtime.","images":"attached"}
thinking
**Adjusting layout dimensions** I’m working on aligning the arena and sidebar to get everything fitting correctly. The sidebar height is around 583, while the board is at 525, so that’s a bit off. I’ll adjust the control sizes and padding to reduce the sidebar height by about 40. I also think about how to use align-items to ensure everything looks tidy. Plus, I need to make room under the footer while ensuring all the controls fit comfortably.
{"path":"index.html","edits":[{"oldText":"footer{max-width:940px;margin-top:20px}}","newText":"footer{max-width:940px;margin-top:20px}.layouSuccessfully replaced 1 block(s) in index.html.
{"action":"reload","x":0,"y":0,"toX":0,"toY":0,"text":"","delta":0}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":"snake\n.\nTHE CLASSICS COLLECTION / 001\nSMALL GAME. BIG APPETITE.\nOne more bite.\n\nA familiar little challenge. How long can you go?\n\nREADY WHEN YOU ARE\nTHE PLAYFIELD\nREADY\nLet’s get growing.\n\nEat, grow, repeat. Just don’t run into\nthe walls — or yourself.\n\nStart game\n→\nor press Space to begin\nONE BITE = 10 POINTS\n30 × 20 GRID\nYOUR SCORE\n00\nPOINTS\n↗ Personal best\n00\nStay in control.\n↑\n←\n↓\n→\nMove\nArrow keys\nPause / resume\nSpace\nRestart\nR\nA little advice\nGive yourself room to grow.\nThe walls aren’t your friends.\nⅡ Pause game\nNO LEVELS. NO RUSH. JUST SNAKE.\nMade for a little downtime.","images":"attached"}
Created `index.html` — a self-contained, playable Snake game. - Arrow keys to steer - Food, growing tail, and score - Wall/self-collision game over - **Space** to start or pause - **R** to restart - Saved personal best and mobile controls Tested gameplay, scoring, game over, and restart in the browser.