2048
Tile merging needs deterministic board transforms; I built an HTML/CSS/JavaScript 2048 implementation with move compression, single-merge resolution, random tile spawning, undo snapshots, saved best score, swipe input, and accessible board summaries.
- Status
- Archived experiment / live demo
- Last updated
- May 2026
- Controls
- Slide tiles to merge matching numbers and build toward the highest tile you can reach.
- Keyboard
- Focus the board, then use Arrow keys or WASD to move tiles. Enter or Space starts from the menu, and Ctrl/Cmd+Z undoes the last move.
- Touch
- Swipe horizontally or vertically on the board, or use the labeled direction buttons below it.
- Accessibility
- The board has a screen-reader summary, and score, move count, win, and game-over updates are announced.
Ready
2048 ready.
Keyboard and touch controls
Keyboard shortcuts
- Arrow keysMove tiles up, right, down, or left.
- W A S DAlternate movement keys for the same four directions.
- Enter / SpaceStart the game when the start menu is visible.
- Ctrl/Cmd+ZUndo the previous move when a move is available.
Touch controls
- SwipeSwipe on the board to move tiles in that direction.
- Direction buttonsUse the four large buttons below the board.
- Undo buttonUse the page action button to revert one move.
2048 board
Focus the board, then use Arrow keys or W, A, S, and D to move tiles. Press Control Z or Command Z to undo the last move.
On touch screens, swipe on the board or use the labeled direction buttons below the board.
Board not started.
Board transforms, merge history, and tile input.
Main state is the 4-by-4 board array, score, best score, move count, previous board snapshot, new tile marker, merged tile keys, and win/over status. Each move is a deterministic board transform: compress values toward a direction, merge equal neighbors once, spawn a random tile, and re-render the tile layer. Scoring is calculated from merge values, with undo restoring the previous board and score. Keyboard input maps Arrow keys and WASD to directions, Enter or Space starts from the menu, and Ctrl/Cmd+Z undoes. Touch behavior supports swipe gestures plus on-screen direction buttons. The lesson was separating the logical board transform from DOM rendering so merge rules stay testable by inspection.
Tile-state engine, board input, and win/loss feedback.
- Implemented directional board transforms, merge rules, random tile spawning, win/loss checks, score updates, and move counting.
- Built undo snapshots, local save/best-score persistence, keyboard shortcuts, swipe handling, and on-screen direction controls.
- Added an accessible focusable board with dynamic row summaries, live status announcements, and decorative tile rendering separated from screen-reader output.
The 2048 game rules are external and well established; this no-dependency browser implementation and UI shell are custom code.
Archived experiment with strong board-state fundamentals.
Already solid includes merge transforms, undo, local persistence, swipe input, keyboard controls, and accessible board summaries. Demo-only areas include limited automated rule coverage and simple localStorage state. Hardening would add unit tests for every merge path, save migration/reset behavior, and screen-reader regression checks.
Static board game with browser-only persistence.
Hosted/run location: GitHub Pages serves 2048.html, 2048.css, and 2048.js. Environment/config: no environment variables are required; board size, tile rules, keyboard/swipe controls, and scoring live in JavaScript. External APIs/services: none beyond DOM events, touch input, and LocalStorage for save/best score state. Local development: run python -m http.server 8000 and open /2048.html. Security: stored board state remains local to the browser.