The Challenge

2048 is a sliding puzzle game where you combine numbered tiles:

• 4x4 grid of tiles
• Tiles slide when you press arrow keys
• Matching tiles merge (2+2=4, 4+4=8, etc.)
• Goal: create a tile with the number 2048
• Game over when no moves are possible

We'll generate this entire game with one prompt. No coding by hand.

What you'll learn:

• How much a single prompt can produce
• When to intervene vs. when to let the AI work
• How to iterate on AI-generated code

Setting Up the Project

Create a fresh project for this exercise:

npm create vite@latest game-2048 -- --template vanilla
cd game-2048
npm install
npm run dev

Now open your AI coding agent in the same directory:

opencode  # or: claude

Verify your dev server is running at http://localhost:5173 before proceeding.

The Single Prompt

Here's the prompt. Copy it exactly — the detail level is intentional:

Build a complete 2048 game in this Vite project.

Requirements:
- 4x4 grid with sliding number tiles
- Arrow keys to move tiles (up/down/left/right)
- Tiles with the same number merge when pushed together
- New tile (2 or 4) appears after each move in a random empty cell
- Score counter that tracks points (earned by merging tiles)
- "New Game" button to restart
- Game over detection (no valid moves remaining)
- Win detection (2048 tile created)
- Smooth CSS animations for sliding and merging

Visual design:
- Centered on page, clean modern look
- Each tile number has a distinct background color
- Dark rounded tiles on a lighter board
- Score displayed prominently above the board
- Responsive — works on mobile (swipe support is a bonus)

Implement everything in index.html, main.js, and style.css.
Use no external libraries.

Paste this into your AI agent and let it work.

What to Expect

The AI will typically:

1. Rewrite index.html — game board container, score display, buttons
2. Create game logic in main.js — grid state, movement, merging, scoring
3. Style everything in style.css — grid layout, tile colors, animations

Common patterns in AI-generated 2048:

• The grid is usually a 2D array: [[0,0,2,0],[0,4,0,0],...]
• Movement functions for each direction (left, right, up, down)
• Color mapping: {2: '#eee4da', 4: '#ede0c8', 8: '#f2b179', ...}
• CSS Grid or Flexbox for the board layout

What usually works on the first try:

• Basic grid rendering
• Tile movement and merging
• Score tracking
• Visual design

What sometimes needs iteration:

• Animation smoothness
• Edge cases in merging logic (e.g., 2-2-2-2 should become 4-4, not 8)
• Mobile touch/swipe support
• Game over detection (must check ALL possible moves)

Iterating on the Result

After the first generation, open http://localhost:5173 and play the game.

Common issues and how to fix them:

If tiles don't merge correctly:

The merging logic has a bug: when I have [2, 2, 2, 2] and
slide left, it produces [8] but it should produce [4, 4].
Each tile should only merge once per move. Fix the merge
function in main.js.

If animations are janky:

The tile animations are choppy. Use CSS transitions
(transform and opacity, 150ms ease-in-out) instead of
JavaScript animation. Tiles should slide to their new
position smoothly.

If game over doesn't trigger:

The game over detection is broken — it only checks if the
board is full, but doesn't check if adjacent tiles can merge.
Fix it to check all four directions for possible merges.

Each iteration should focus on ONE specific issue. Don't ask the AI to fix everything at once.

Adding Polish

Once the core game works, add finishing touches:

Add these polish features to the 2048 game:

1. Best score — save to localStorage, show next to current score
2. Tile pop animation — new tiles should scale from 0 to 100%
   over 100ms when they appear
3. Merge animation — merged tiles briefly scale to 120% then back
4. Keyboard shortcut — press 'R' to restart
5. Mobile swipe support — detect touch gestures for movement

This second prompt typically produces 90%+ of what you ask for. The AI has the full context of the existing code and can add features incrementally.

What We Learned

This exercise demonstrates several key principles:

1. The 80/20 rule: A single good prompt gets you 80% of the way. The remaining 20% takes targeted iteration.

2. Specificity matters: "Build a 2048 game" produces much worse results than our detailed prompt with visual design specs and edge case requirements.

3. Iterate narrowly: Fix one thing at a time. "Fix the merge bug" is better than "fix all the bugs."

4. AI excels at well-defined problems: 2048 has clear rules — the AI knows exactly what correct behavior looks like.

5. Review is essential: Even working code may have subtle bugs (like the merge-twice problem) that only appear during play.

Challenge: Try building the same game from scratch by hand. Then compare: how long did AI take vs. manual coding? How does the code quality compare?

---quiz question: In a 2048 game, what should happen when [2, 2, 2, 2] slides left? options:

• { text: "[8, 0, 0, 0] — all merge into one", correct: false }
• { text: "[4, 4, 0, 0] — each tile merges once per move", correct: true }
• { text: "[2, 4, 2, 0] — only adjacent pairs merge", correct: false } feedback: Each tile can only merge once per move. So [2,2,2,2] becomes [4,4,0,0] — the first pair merges to 4 and the second pair merges to 4. This is a common AI bug to watch for.

---quiz question: What is the main lesson from building 2048 with a single prompt? options:

• { text: "AI can't build complete applications", correct: false }
• { text: "A detailed prompt gets you 80% of the way, then targeted iteration handles the rest", correct: true }
• { text: "You should never review AI-generated code", correct: false } feedback: The 80/20 rule of AI coding — a well-crafted prompt produces most of the working code, but you need targeted iteration to fix edge cases and polish the result.