We Built a 2048 Clone, Then Taught It to Play Itself

This article was originally published on Jo4 Blog.

We wanted a fun utility page for jo4.io/u/1024. Something people would open, mess around with for a minute, and then leave running in a tab. We ended up building a 2048-style tile-merging game with level-ups, confetti, and an AI that quietly takes over when you walk away.

Here's how we went from "let's make a simple game" to "wait, we need to implement a search tree."

The Game Itself

If you have played 2048, you know the drill. A 4x4 grid, tiles with numbers, slide them in four directions, matching tiles merge. Our twist: you start with base tiles [2, 4, 8] and the first milestone is 1024. Hit it, and you level up.

const LEVEL_CONFIG = [
  { base: [2, 4, 8],       milestone: 1024 },
  { base: [8, 16, 32],     milestone: 2048 },
  { base: [32, 64, 128],   milestone: 4096 },
  { base: [128, 256, 512], milestone: 8192 },
  { base: [512, 1024, 2048], milestone: 16384 },
  { base: [2048, 4096, 8192], milestone: 32768 },
];

Each level-up bumps your base tile values. Those tiny 2s and 4s that were cluttering the board? Gone. The cleanResidualTiles function sweeps anything below the new minimum base value. Suddenly the board opens up and you are playing a different game.

Six levels. The final milestone is 32,768. We have not reached it ourselves. The AI has.

Making It Feel Good

A tile game lives or dies on how it feels. We spent more time on animations than on the game logic itself.

Tiles slide via CSS top/left transitions with a smooth ease-out curve. When tiles merge, we run a 4-phase elastic bounce animation we call mergeBurst -- the tile shrinks to 60%, overshoots to 135%, settles back to 90%, then lands at 100%. It sounds over-the-top on paper. In practice it feels like tiles are made of marshmallow and it is deeply satisfying.

@keyframes mergeBurst {
  0%   { transform: scale(0.6); }
  30%  { transform: scale(1.35); }
  50%  { transform: scale(0.9); }
  70%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

On top of that, merged tiles get an expanding ring shockwave (mergeRing) that scales out to 1.8x and fades. Big merges (64+) flash the value across the board. Hit a milestone and confetti explodes from the center, 60 particles with randomized angles, velocities, and spin.

The key design decision: animations use transform: scale() only. Positioning uses top/left with transitions. This prevents the classic bug where CSS animations fight with position transitions and tiles teleport around the board.

The Idle Problem

We noticed something during testing. We would open the game, play for a bit, then get distracted by actual work. The tab would just sit there. Wasted screen real estate.

So we added autoplay. Go idle for 10 seconds and a countdown slider appears: "AI takeover in 30s." If you do not touch anything, the AI starts playing at one move per second. Press any key, click, or swipe to take back control instantly.

The UX matters here. A big arrow overlay (on a dark circle) shows which direction the AI is moving each turn. You can watch the AI think. It is weirdly hypnotic.

Teaching the AI: Expectimax Search

The first AI was just "pick a random valid move." It was terrible. Watching it play was painful.

Then we read John Googler's writeup on Markov Decision Processes for 2048 and realized the right approach is expectimax search -- a decision tree that alternates between the player picking the best move and the universe randomly placing a new tile.

Here is the core idea. The player moves (maximizing), then the game places a random tile (chance node). We alternate these layers and look ahead a few moves to evaluate which direction leads to the best expected outcome.

function expectimax(grid, depth, isPlayer, baseVals) {
  if (depth === 0) return evaluateGrid(grid);

  if (isPlayer) {
    let best = -1;
    for (const dir of ['left', 'up', 'right', 'down']) {
      const res = moveGrid(grid, dir);
      if (!res.moved) continue;
      const v = res.score +
        expectimax(res.grid, depth - 1, false, baseVals);
      if (v > best) best = v;
    }
    return best < 0 ? evaluateGrid(grid) : best;
  }

  // Chance node: average over ALL possible random tile placements
  const cells = []; // all empty cells
  for (let r = 0; r < 4; r++)
    for (let c = 0; c < 4; c++)
      if (grid[r][c] === 0) cells.push([r, c]);

  if (cells.length === 0) return evaluateGrid(grid);

  const weight = 1 / (cells.length * baseVals.length);
  let total = 0;
  for (const [r, c] of cells) {
    for (const val of baseVals) {
      const g = grid.map(row => [...row]);
      g[r][c] = val;
      total += weight *
        expectimax(g, depth - 1, true, baseVals);
    }
  }
  return total;
}

We run this at depth 4, which means 2 full look-ahead moves: player, chance, player, chance, then evaluate. This is enough for the AI to avoid obvious traps without taking seconds to compute.

The chance node is what makes this different from minimax. Instead of assuming the worst-case random tile, we average over every possible placement. This reflects reality -- the game is not adversarial, it is stochastic.

The Board Evaluation: Snake Weights

The evaluation function is where the real strategy lives. We use a snake-pattern weight matrix that assigns exponentially decreasing values in a zig-zag:

const W = [
  [32768, 16384, 8192, 4096],
  [  256,   512, 1024, 2048],
  [  128,    64,   32,   16],
  [    1,     2,    4,    8],
];

This encourages the AI to keep the biggest tile in the top-left corner and arrange tiles in descending order along a snake path. We also add a quadratic empty-cell bonus (empty * empty * 200) because empty space is safety, and a merge-potential bonus when adjacent tiles share the same value.

Corner-Lock: The Secret Sauce

The expectimax alone is decent but it has a weakness. Sometimes the highest-scoring move pulls the max tile out of the corner, and recovery is expensive. So we added a corner-lock filter.

function getBestMove(tiles, baseTileValues) {
  const grid = tilesToGrid(tiles);

  // Find the max tile and its corner
  let maxVal = 0;
  for (let r = 0; r < 4; r++)
    for (let c = 0; c < 4; c++)
      if (grid[r][c] > maxVal) maxVal = grid[r][c];

  const corner = findMaxCorner(grid);
  const maxInCorner =
    grid[corner[0]][corner[1]] === maxVal;

  // Score all valid moves
  const scored = [];
  for (const dir of ['left', 'up', 'right', 'down']) {
    const res = moveGrid(grid, dir);
    if (!res.moved) continue;
    const score = res.score +
      expectimax(res.grid, 3, false, baseTileValues);
    const keepCorner = !maxInCorner ||
      res.grid[corner[0]][corner[1]] === maxVal;
    scored.push({ dir, score, keepCorner });
  }

  if (scored.length === 0) return null;

  // Prefer corner-safe moves; corner-breaking = last resort
  const safe = scored.filter(m => m.keepCorner);
  const pool = safe.length > 0 ? safe : scored;
  pool.sort((a, b) => b.score - a.score);
  return pool[0].dir;
}

Every move is classified as either "corner-safe" (the max tile stays put) or "corner-breaking." The AI only considers corner-breaking moves when there is literally no other option. This single rule dramatically improved how far the AI gets.

Performance: Why Two Move Functions

You might notice we have two move functions: moveTiles (operates on Tile objects with IDs and animation flags) and moveGrid (operates on a raw 2D number array). The game UI uses moveTiles because it needs tile identity for React keys and animation state. The AI uses moveGrid because creating thousands of Tile objects per decision would be wasteful.

At depth 4, the AI evaluates hundreds of board states per move. Keeping the AI path as pure number-crunching -- no object allocation, no ID generation -- keeps each move well under 100ms on a modern browser.

The Result

The AI reliably reaches 1024, often gets to 2048, and occasionally pushes into the 4096+ levels. It is not perfect -- a deeper search or more sophisticated evaluation (monotonicity checks, smoothness penalties) could push it further. But for a browser game meant to be a fun background distraction, it hits the sweet spot.

You can watch it right now at jo4.io/u/1024. Open the page, play a few rounds, then put your hands down and watch the AI take over. It is oddly relaxing.

What is the highest tile you have reached -- manually or with an AI? Drop your score in the comments.

Building jo4.io -- a modern URL shortener with analytics, bio pages, and apparently, tile games.

推荐订阅源

DEV Community