2048 · claude-sonnet-5.5
Output generated Cost / run $0.0804 Runtime 37.2s
Prompt for this run
Build a playable 2048 game with arrow-key tile sliding and merging, smooth animations, a score, and win and lose states.
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 · 13 messages
Build a playable 2048 game with arrow-key tile sliding and merging, smooth animations, a score, and win and lose states.
/tmp/job-QDHZPK/index.html (440 bytes)Successfully wrote to /tmp/job-QDHZPK/index.html
thinking
Let me actually design this properly - a 4x4 board with 100px cells and 12px gaps, giving 448px total. I'll position tiles absolutely with transform-based transitions and track each tile by a unique id for smooth animations.
/tmp/job-QDHZPK/index.html (7156 bytes){"action":"reload"}Successfully wrote to /tmp/job-QDHZPK/index.html
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":"2048\nSCORE\n0\nBEST\n0\nJoin tiles with arrow keys (or swipe) to reach 2048!\nNew Game\n2\n2","images":"attached"}
thinking
I'm realizing my board width math is off — 4 tiles at 100px plus gaps should total 460, not 448, so I need to fix the container sizing. Also the tiles might be missing from the screenshot because it was captured during the fade-in animation while opacity was still at zero.
{"command":"cd /tmp/job-QDHZPK && sed -i 's/.wrap{width:448px}/.wrap{width:460px}/;s/#board{position:relative;width:448px;height:448px/#boar{"action":"reload"}{"action":"key","text":"ArrowLeft"}{"action":"key","text":"ArrowDown"}(no output)
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":"2048\nSCORE\n0\nBEST\n0\nJoin tiles with arrow keys (or swipe) to reach 2048!\nNew Game\n2\n2","images":"attached"}
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":"2048\nSCORE\n0\nBEST\n0\nJoin tiles with arrow keys (or swipe) to reach 2048!\nNew Game\n2\n2","images":"attached"}
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":"2048\nSCORE\n4\nBEST\n4\nJoin tiles with arrow keys (or swipe) to reach 2048!\nNew Game\n4\n2\n2","images":"attached"}
I built the game in `/tmp/job-QDHZPK/index.html`. I only tested a couple of moves in the browser, so the win and game-over overlays have never appeared on screen. - **Fix:** the board was clipped on the right at first, so I widened it to 460px. - **What I saw:** after reloading, I pressed Left and then Down. The score went to 4 and two 2s merged into a 4. The last screenshot was taken mid-slide, so the tiles looked offset. - **Not tested:** I didn't play a full game or test swipe input. **Controls and state** - Arrow keys slide and merge tiles. Swiping on the board also works. - The score and best score are shown, and the best score is saved in the browser. **Animation** - Tiles slide smoothly. - New tiles pop in. - Merged tiles bump briefly. **Win and lose** - Reaching 2048 shows a win overlay with "Keep going" and "Try again" buttons. - When no moves are left, a "Game over!" overlay appears. - "New Game" restarts at any time.