A browser implementation of the classic 2048 puzzle game.
Vanilla JavaScript (OOP), HTML and SCSS, bundled with Parcel.
Demo · Technologies · Setup · Features
A classic 2048 puzzle game built with plain JavaScript using an OOP approach — the game logic is encapsulated in a Game class (Game.class.js), separated from the DOM-rendering layer.
Slide numbered tiles on a grid to combine them and reach the 2048 tile.
| Technology | Purpose |
|---|---|
| HTML5 | Page markup |
| SCSS | Styling of the game board and UI |
| JavaScript (OOP) | Game logic, encapsulated in a Game class |
| Parcel | Bundling and dev server |
| Jest | Unit testing of game logic |
| Cypress | End-to-end testing |
| ESLint | JS code quality |
| Stylelint | SCSS code quality |
| Prettier | Code formatting |
2048-web-game/
├── src/
│ ├── images/ # Game assets
│ ├── modules/
│ │ └── Game.class.js # Core game logic
│ ├── scripts/
│ │ └── main.js # DOM rendering and event handling
│ ├── styles/
│ │ └── main.scss # Game board and UI styles
│ └── index.html
├── package.json
└── README.md
1. Clone the repository
git clone https://github.com/DebHtm/2048-web-game.git
cd 2048-web-game2. Install dependencies
npm install3. Run in dev mode
npm start4. Run linters
npm run lint5. Run tests
npm test- Classic 2048 gameplay: merge tiles by moving them with arrow keys
- Score tracking during the game
- Start / restart game button
- Win and game-over messages
- Game logic covered by unit tests
- Responsive layout
Denys - pet/learning project built for frontend practice.
If you found this project useful, consider giving it a star.