A fully interactive, responsive, and pixel-perfect implementation of the famous 2048 puzzle game. Built from scratch using modern Vanilla JavaScript (ES6+ Class architecture), object-oriented programming (OOP) principles, and semantic component design.
The game is played on a smooth 4 × 4 grid using your keyboard arrow keys:
- Movement: When a direction is chosen, all numbered tiles slide as far as they can in that direction.
-
Merging: Two tiles of the same number collide and merge into a single tile with a doubled value (e.g.,
$2 + 2 \rightarrow 4$ ). - Mathematical Restriction: A tile cannot be merged more than once during a single turn.
-
Random Spawning: After every successful move, a new tile randomly spawns in an empty cell. It has a
$90%$ chance of being a 2 and a$10%$ chance of being a 4. - Scoring: Your score increases dynamically by the exact sum of all combined tiles during that turn.
- Win Condition: The game triggers a victory screen as soon as a 2048 tile is achieved.
- Game Over: Triggers automatically when the board is completely full and no valid adjacent merges remain.
The project is strictly separated into two distinct layers (following decoupled UI/Logic principles):
- Core Logic Engine (
Game.class.js): A stateful, framework-agnostic JavaScript class that completely handles data structures, board state array transformations, merge vectors, probability matrix calculation, and win/loss assertions. - UI & Event Management Layer (
main.js): Directs raw DOM manipulation, keydown event handlers, dynamic class rendering (field-cell--%value%), screen state management (start, restart, modulations), and modal injections.
constructor(initialState)— Instantiates core properties with optional predefined matrix states.getState()/getScore()/getStatus()— Public getter APIs ensuring decoupled data tracking.moveLeft()/moveRight()/moveUp()/moveDown()— Structural grid translation algorithms.start()/restart()— State reset configurations.
Follow these steps to run the project locally:
git clone https://github.com/wolfymmm/2048-game.gitcd 2048-gamenpm installnpm startAfter starting the development server, open your browser and navigate to:
http://localhost:8080
The page will automatically reload whenever you make changes to the source files.
This project is licensed under the MIT License - see the LICENSE file for details.