A modern, logic-driven implementation of the classic 2048 puzzle game. This project demonstrates advanced JavaScript techniques, including Object-Oriented Programming (OOP) and complex matrix manipulation.
The goal of the game is to slide numbered tiles on a 4x4 grid. When two tiles with the same number touch, they merge into one with a value equal to their sum. The ultimate challenge is to reach the 2048 tile!
- Dynamic Scoring: Real-time score calculation as you merge tiles.
- Win/Loss States: The game detects when you've reached 2048 or when the board is full with no possible moves left.
- Smooth Animations: Clean UI transitions for a better user experience.
The game is built using a custom ES6 Class that manages the entire game state:
- Matrix Manipulation: Efficiently handles tile shifts (Up, Down, Left, Right) by transforming the grid array.
- Slide & Merge Algorithm: A custom-developed logic that filters empty cells, merges identical neighbors, and spawns new tiles (2 or 4) randomly.
- State Tracking: Monitors whether the game is in
idle,playing,win, orlosemode.
- DOM Manipulation: The UI is synchronized with the internal JavaScript state using a
changeBoardfunction. - BEM Methodology: Styles are organized using the BEM naming convention for better maintainability.
- Gulp Workflow: Automated SCSS compilation and local server management.
- Clone the repository:
git clone
- Install dependencies:
npm install
- Run the project locally:
npm run start