2048 · claude-opus-5

Output generated Cost / run $0.2207 Runtime 75.1s

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.

⛨ 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

modelclaude-opus-5

vendorAnthropic · Claude

harnesspi-agent

generated2026-08-03

METRICS

runtime75.1s

tokens in19k

tokens out6.9k

cached13k

cost / run$0.2207

Transcript · 6 messages

user

Build a playable 2048 game with arrow-key tile sliding and merging, smooth animations, a score, and win and lose states.

assistant

thinking

I'm building a 2048 game in a single file with smooth animations, using a 4x4 grid of tile objects that track their id, value, row, and column. Each tile will render as a DOM element positioned with CSS transforms, and I'll add animations for new tiles popping in and merged tiles pulsing.

→ write /tmp/ws/index.html (13153 bytes)

toolResult

Successfully wrote 13153 bytes to /tmp/ws/index.html

assistant

thinking

The traversal order processes tiles from the far edge inward, so merged tiles are handled correctly before source tiles get processed. The ghost tile approach works well since the merged tile is removed from the grid and animated separately. The win condition is being tracked with a truthy flag.

The issue is that checking `won` as truthy causes the overlay to re-show on every move after the first win. I need a separate flag to track whether the win overlay has already been displayed, so it only shows once.

→ edit

{"path":"/tmp/ws/index.html","edits":[{"oldText":"    if(won){\n      won = 'shown';","newText":"    if(won && !winShown){\n      winShown =

toolResult

Successfully replaced 3 block(s) in /tmp/ws/index.html.

assistant

thinking

The restore function correctly preserves the won state from the snapshot while keeping winShown unchanged, and the dead check still runs properly after winning. The merge logic traverses from the far edge with reversed row/column iteration to move tiles correctly, and since we process tiles from the edge outward, when we double a tile's value it won't be revisited later in the loop.

`index.html` created — a full 2048 game with sliding/merging animations, score + best (localStorage), win/lose overlays, undo (U), keyboard (arrows/WASD/hjkl) and swipe support.