Play 2048: Powers of Two

A colorful powers-of-two puzzle built with plain JavaScript and the DOM. Merge tiles to reach 2048, then read how it works.

This is a real, playable game, not a screenshot. Slide the board, merge matching numbers, and chase the 2048 tile. It is built without any library, any canvas, or any build step, which makes it a clean example of a grid game driven by data and animated with CSS. After you play, the sections below show exactly how it is put together.

How to play

Use the arrow keys or W, A, S, and D to slide every tile in one direction, or swipe on a touch screen. When two tiles with the same number touch, they merge into one tile worth double. Each move also drops a new tile onto the board. Keep merging, two into four, four into eight, and so on, until you build a tile worth 2048. The game ends only when the board is full and no neighbours match, so plan your slides to keep space open.

How this game is built

This one is not a canvas game. It is built from regular HTML elements styled with CSS, which is the natural fit for a grid puzzle. Each part maps to a topic in the cluster.

The grid as a data model

The board is a small list of tile objects, each with a value and a row and column. The visible squares are just styled elements positioned from that data, the same single source of truth idea behind game state management.

The move and merge rule

A move walks each row or column from the leading edge, slides tiles together, and merges a pair of equal tiles once per move. Getting that one rule right is the whole game, a compact piece of logic much like the checks in collision detection.

Spawning a new tile

After any move that changes the board, a new tile appears in a random empty cell, usually a two and occasionally a four. That steady pressure is what makes the puzzle tighten over time.

Animation with CSS, not a loop

Each tile is an element that moves to its new cell with a CSS transition on its transform, so sliding and merging animate smoothly without a per frame game loop. It shows that not every game needs canvas or a loop, the same elements and styling covered across rendering.

Tracking score and the end state

The score adds up every merge, and the game checks for a win at 2048 and for game over when no move is possible. Those phases are plain state the rest of the code reads, exactly the pattern in game state management.

Why powers of two run computing

The numbers here are not random. Computers store everything in bits, each a single zero or one, and bits are grouped in powers of two: eight bits make a byte, and memory sizes climb the same ladder, with 1024 bytes in a kilobyte, which is two to the tenth. Reaching the 2048 tile means reaching two to the eleventh. Building this game is a small, hands on way to feel why powers of two are everywhere in computing, from memory addresses to color depth. The deeper version of that idea lives in browser memory management.

Frequently asked questions

How do I win at 2048?

Combine tiles with the same number to double them, and keep doing so until one tile reaches 2048. The key habit is keeping your largest tile in a corner and sliding in mostly one or two directions so the board stays orderly.

Is this game built with canvas?

No. It uses plain HTML elements and CSS, which suits a grid puzzle better than canvas. It is a deliberate contrast to the canvas arcade demos in this cluster, so you can see both techniques.

Why are the tiles powers of two?

Because doubling a number is the core action, and doubling from two gives the powers of two, the same sequence that underpins bits, bytes, and memory in every computer. The theme and the gameplay are the same idea.

How does the sliding animation work?

Each tile is an element with a CSS transition on its transform. When a move changes a tile's cell, the code updates its position and the browser animates the slide, with a quick scale pop on merges and new tiles.