Compare all models on this prompt →
2048 · grok-4.20
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 ↗
transcript · 4 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
The task is to build a playable 2048 game as a single-page web app in one self-contained index.html file. It must include CSS in a <style> tag and JS in a <script> tag, with no external resources.
The task is to build a playable 2048 game in a single index.html file with HTML, CSS in <style>, JS in <script>. It needs arrow-key controls, sliding and merging with animations, score, win/lose states.
I need to create this as a self-contained file.
First, the HTML structure:
- <!DOCTYPE html>
- <html lang="en">
- <head> with <meta>, <title>2048</title>, <style> for CSS, </head>
- <body> with <div id="game-container"> or similar, including score display, grid, restart button, overlays for win/lose, <script> for JS </script>
For the grid: use CSS grid for 4x4 board.
Have a div#board with display: grid; grid-template: repeat(4, 1fr) / repeat(4, 1fr); width/height set.
Then, 16 divs for cells? But for tiles, better to have tile divs overlaid.
Standard implementation: board is grid, tiles are absolute positioned divs inside board container.
Let's plan:
- body with container
- h1 title, p score
- div#board-container { position: relative; width: 400px; height: 400px; }
- div#board { display: grid; ... position: absolute; top:0 left:0; width:400 height:400; grid: 4x4 cells of 100x100 with gap 10px }
- Then in JS, create tile divs appended to board-container, with position absolute, left/top calculated as col*110 +5, row*110+5
- Each tile has class 'tile' value, and style set.
For animation: on move, calculate new positions, set style.left = new, style.top=new with transition: left 0.2s, top 0.2s
For merge: when merge, the target tile gets value*2, position same, the other tile moves to target position, then both merge by scale or something.
To handle:
- Keep a list of active tiles: each {value, row, col, element}
- On move, simulate the slide/merge on a copy of board, get new board state, new list of tiles with updated row/col, value (doubled for merged)
- Then for each old tile, find corresponding new tile with same value (but for merged, new value), move the element to new position, if value changed, update text and class.
- For new tiles, create new element with value, initial position off grid or scale 0, then animate in.
- For merge, the two tiles move to one position, then the merged one is at that position with double value, the other disappears.
This requires matching tiles.
It's a bit involved but possible.
Since time limited, I'll go with a simple version where tiles are recreated each time, with animation class for new and merged, and slide is not smooth but tiles appear in new positions with transition.
But the task says "smooth animations for sliding and merging", so need tile movement animation.
Let's look for a simple code snippet in my knowledge.
From memory, a popular one is:
Use board 2D array.
Have tile elements created for each cell if non zero.
But to animate, use requestAnimationFrame to move them gradually.
But that's more code.
For this, I'll write a version with tile IDs and persistent elements.
Let's start writing the code.
First, the full HTML.
I'll compose it.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2048</title>
<style>
body {
margin: 0;
padding: 0 20px;
background: #faf8ef;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#game-container {
text-align: center;
}
#title {
font-size: 50px;
font-weight: bold;
color: #776e65;
margin: 0;
}
#score-container {
font-size: 20px;
color: #776e65;
margin: 10px 0;
}
#score {
font-size: 30px;
font-weight: bold;
}
#board-container {
position: relative;
width: 440px;
height: 440px;
background: #bbada0;
border-radius: 10px;
box-shadow: 0 0 20px 0 rgba(0,0,0,0.2);
}
.cell {
position: absolute;
width: 100px;
height: 100px;
background: #cdc1b4;
border-radius: 6px;
}
.tile {
position: absolute;
width: 100px;
height: 100px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
font-weight: bold;
color: #776e65;
transition: transform 0 0.1s, left 0.2s ease, top 0.2s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.→ write
index.html (27103 bytes)toolResult
Successfully wrote 27103 bytes to index.html
assistant
thinking
The game has been built as a single self-contained index.html file. It includes:
The file **index.html** has been created with a complete, playable 2048 game (smooth animations, keyboard + touch controls, scoring, win/lose overlays, best score persistence). Open it in a browser to play.
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
modelgrok-4.20
vendorxAI · Grok
harnesspi-agent
generated2026-08-01
EVALUATION
★★★★★ 4/5 working
2048 clone responds correctly to arrow keys and WASD, merging tiles and updating score; click/drag/wheel/enter+space do nothing as expected.
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.
idle motion16.2%
on click0.0%
on drag0.0%
on wheel0.0%
on enter + space0.0%
on arrow keys7.4%
on w/a/s/d5.4%
frame spread30.9 / 255
console errors1
js errors none
METRICS
runtime80.4s
tokens in5.9k
tokens out12k
cached3.1k
cost / run$0.0368