2048 · qwen3.8-max
Build a playable 2048 game with arrow-key tile sliding and merging, smooth animations, a score, and win and lose states.
transcript · 6 messages
Build a playable 2048 game with arrow-key tile sliding and merging, smooth animations, a score, and win and lose states.
thinking
Build a 2048 game in a single index.html file. Standard implementation: 4x4 grid, arrow keys, merging, score, win overlay at 2048, game over detection, smooth animations using absolutely positioned tiles with transitions.
I'll write it carefully. Animation approach: maintain a board as a grid of tiles with unique ids, render tiles as absolutely positioned divs, use CSS transitions on transform/position. On move, compute the new positions and merges, animate, then finalize.
A simpler, more robust approach: track tiles as an array of {id, value, row, col}. On move, process each line, compute the post-move positions and merges. Update the DOM: move existing tile elements, and when merging, slide both tiles to the target position, then remove one and bump the value with a "pop" animation.
Let's write the code.
Key logic:
- state: 4x4 grid of tile objects or null.
- move(dir): traverse rows/columns in order; for each tile, find the farthest empty cell and the next cell; if the next cell has the same value and hasn't yet merged this turn, merge.
- Track moved flag; after the move, spawn a random tile (2 or 4) and check win/loss.
Rendering: absolutely position tiles inside the board container; use CSS transitions on transform. After a merge, render a merged tile with a pop animation.
Let's write the file./tmp/ws/index.html (13498 bytes)Successfully wrote 13498 bytes to /tmp/ws/index.html
thinking
Verify quickly with node that there are no syntax errors? Extract the script and check it.
{"command":"cd /tmp/ws && node -e \"\nconst html = require('fs').readFileSync('index.html','utf8');\nconst js = html.match(/<script>([\\s\\SJS syntax OK, file size: 13498
thinking
Maybe I should also run a simple logic simulation of the merge algorithm, but it's probably fine. One thing to double-check: the merge animation — on merge, the moving tile slides to the target position (transform transition 130ms), then after a 130ms timeout, we delete the moving tile and update the target tile's value with a pop animation. The pop animation includes scale(0) at 0%, so the tile momentarily disappears — this is the standard 2048-style behavior; actually, the original starts the pop from scale(0)→1.2→1. No problem. Also verifying: does `won && !keepPlaying` trigger the overlay on every move afterward? After the win overlay is shown, `move` is blocked by the `won && !keepPlaying` guard. If you continue, keepPlaying becomes true. No problem. Game over check: after each move, if there are no empty cells and no merges, over=true. No problem. Done.
Done. `/tmp/ws/index.html` is a complete, self-contained 2048 game — no external resources, no network requests. **Features:** - **Arrow-key sliding** (plus WASD and touch/swipe for mobile), with proper traversal order so tiles closest to the edge move first - **Merging logic** with the classic rule: each tile can only merge once per move - **Smooth animations**: CSS transitions slide tiles (`transform`, 130ms), new tiles pop in with a scale animation, and merged tiles "pop" at 1.2× size; score gains float up from the score box - **Score + Best score** (best persists via `localStorage`) - **Win state**: overlay when you reach 2048, with a "Keep Going" option to continue endlessly - **Lose state**: "Game Over" overlay when the board fills with no possible merges, with "Try Again" - Authentic 2048 color palette per tile value, responsive layout for small screens Open it in any browser to play (the JS syntax was verified with a parse check).
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
EVALUATION
A working 2048 clone that responds correctly to arrow keys and WASD, merging tiles and updating score.
Vision grade · anthropic/claude-sonnet-5
MEASUREMENTS
Raw readings from the capture, not a verdict — the grade above is the only judgement. Percentages are how much of the screen changed; the measure under-reports sparse motion on a dark background.