2048 Tile Merge Game — Free HTML CSS JS Snippet

2048 looks simple to clone but has a surprisingly sharp edge case that trips up most quick implementations: a tile must only merge once per move. If three equal tiles slide together — say three 2s in a row — the naive approach of repeatedly combining adjacent equal pairs left-to-right can accidentally merge the resulting 4 with the third 2 in the same pass, producing an 8 out of thin air. This snippet's slideLine() function avoids that bug entirely by processing each line with a single forward pass and an index that jumps by two positions the instant a merge happens, guaranteeing no merged tile is ever reconsidered for a second merge within the same move.

How a single move is processed

Each arrow key or swipe gesture triggers move(direction), which reduces the 2D board to four independent 1D lines — either the four rows (for left/right) or the four columns (for up/down) — and runs slideLine() on each one after optionally reversing it so every direction can reuse the same left-aligned slide-and-merge logic. slideLine() first filters out empty cells, then walks the remaining values left to right: if the current tile's value equals the next tile's value, it emits one merged tile worth double and advances the index by two; otherwise it emits the tile unchanged and advances by one. The result is padded back out to four slots with nulls representing empty space, then written into a fresh board array.

Detecting whether a move actually changed anything

Because arrow keys fire even when a move is illegal (for example pressing left when everything is already pressed against the left wall), the snippet snapshots the board's values before and after via cloneBoardValues() and boardsEqual(). A new tile only spawns, and the score/localStorage update only happens, when the comparison shows the board actually changed — this matches the real 2048 rule that a no-op keypress does not consume a turn.

Animated, absolutely positioned tiles

Rather than re-laying out a DOM grid every move, each tile is an absolutely positioned div inside .g2048-tiles, and its left/top pixel offsets are computed from its row/column index and the live cell size (recalculated on resize via cellSizePx()). A CSS transition on top/left/transform means simply changing those style properties on each render produces a smooth glide animation for free, while freshly spawned tiles get a .spawn class that plays a scale-in keyframe animation and merged tiles get a .merged class that plays a brief pop/bounce.

Ace-free but not gimmick-free: soft rules that matter

Score accumulates by the value of every merge, not just a flat point per move, matching the original 2048 scoring rule. Reaching a 2048 tile triggers a one-time win overlay but does not lock the board — play continues seamlessly afterward, exactly like the original game, tracked with a hasWon flag that prevents the win banner from firing again on subsequent moves. Game over is detected only when the board is completely full and no two horizontally or vertically adjacent cells share a value, meaning every remaining move would be a no-op. The best score persists across sessions using localStorage.setItem('g2048-best-score', ...), read back on load so returning players see their all-time high immediately.