Tile Merge 2048 Puzzle with 20 Levels, Stones & Daily Game

2048 is a sliding puzzle: every move slides all tiles as far as they can go, equal neighbours merge into one tile of double the value, and a new tile appears. This version keeps that simple rule and adds a game around it: tiles that actually slide, 20 levels with different goals and board sizes, stones that get in the way, undo and a smash tool, a Daily Game with the same tiles for everyone, and the classic endless mode. It is plain HTML, CSS and JavaScript with no libraries, images or audio files.

Move logic that handles any board

The board is an n by n grid whose cells are empty, a stone, or a tile with an id and a value. slide() handles all four directions with one function: lineOf() lists the cells of a row or column starting at the side the tiles move towards, and each line is processed from that side. Tiles are placed one after another, and a tile merges into the previous one only if their values are equal and the previous one has not merged yet in this move, which is the rule that stops 2, 2, 4 becoming 8. A stone splits a line into separate segments, so tiles stop against it and never merge across it. The same code runs a 3x3, 4x4 and 5x5 board.

Tiles that really slide

The old way to draw a 2048 board is to redraw every tile after each move, which makes tiles jump. Here every tile is a persistent element with an id, positioned with a CSS transform. A move only changes the transform of each element, so the browser slides it. The tile that is merged into another slides to the same cell and fades, then the survivor pops with the new value, a spark burst shows for big merges and a floating "+score" text appears (with a combo label when three or more pairs merge at once). A new tile pops in after the slide finishes.

Levels with real goals

The LEVELS array lists 20 levels in four tiers. Warm-up levels use the 4x4 board with targets from 64 to 512, including a score target with a move limit. Big boards use 5x5 with goals up to 2048. Stones adds one to three fixed blocks on seeded positions (never in a corner). Master has tiny 3x3 boards and a 4096 goal. A level is cleared the moment the goal is reached. The par number of moves is calculated from the target, because a tile of value T needs at least about T divided by 2.2 moves, as the average spawn is 2.2.

Undo, smash and stars

Each level gives three undos (a snapshot stack of the grid, the score and the move count) and one smash that removes any tile. Both are optional helpers that cost the unassisted star. Stars are one for clearing the level, one for finishing within the par number of moves and one for using neither undo nor smash. Clearing a level unlocks the next.

Daily game, classic mode and saving

The Daily Game draws its new tiles from a seeded random generator (mulberry32), so everyone who plays the same moves gets the same game, and it has no undo or smash. Reach 512, 1024 or 2048 for one, two or three stars, and a streak builds when you play it on consecutive days. Classic mode is the endless game with your best score. All progress is saved to localStorage inside try/catch, so the game also runs in a sandboxed iframe where storage is blocked.

Controls and feel

Arrow keys or WASD slide the tiles, U undoes, H starts the smash tool and R restarts. On a touch screen you swipe on the board, and a tap removes a tile when the smash tool is active. Sounds come from a Web Audio synth (merge pitch rises with the tile value), big tiles glow, and the whole game scales to short preview areas.