https://github.com/josedasilva11/2048-game
The classic 2048 sliding puzzle game with smooth animations, undo, and mobile support. Built with vanilla JavaScript.
https://github.com/josedasilva11/2048-game
2048 css-animations game github-pages html5 javascript puzzle responsive touch-support vanilla-js
Last synced: 5 days ago
JSON representation
The classic 2048 sliding puzzle game with smooth animations, undo, and mobile support. Built with vanilla JavaScript.
- Host: GitHub
- URL: https://github.com/josedasilva11/2048-game
- Owner: josedasilva11
- Created: 2026-04-11T19:31:38.000Z (about 2 months ago)
- Default Branch: master
- Last Pushed: 2026-04-11T19:36:04.000Z (about 2 months ago)
- Last Synced: 2026-04-11T21:20:42.178Z (about 2 months ago)
- Topics: 2048, css-animations, game, github-pages, html5, javascript, puzzle, responsive, touch-support, vanilla-js
- Language: JavaScript
- Size: 52.7 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🧩 2048
The classic 2048 sliding puzzle game with smooth CSS animations, undo support, and full mobile compatibility — built entirely with **vanilla JavaScript**. No frameworks, no dependencies.
| Start | Gameplay |
|:-----:|:--------:|
|  |  |
## 🎮 Play Now
**[▶ Play 2048](https://josedasilva11.github.io/2048-game/)**
## ✨ Features
- **Smooth Tile Animations** — CSS transitions for sliding + pop effect on merge
- **Undo Support** — Go back up to 20 moves with the undo button
- **Responsive Design** — Works perfectly on desktop and mobile
- **Touch / Swipe Controls** — Swipe to move tiles on mobile devices
- **Keyboard Controls** — Arrow Keys or WASD
- **Score Tracking** — Current score and best score (persisted in localStorage)
- **Win & Game Over Detection** — Visual overlay messages with play-again option
- **Keep Playing Mode** — Continue after reaching 2048 to chase higher tiles
- **Zero Dependencies** — Pure HTML, CSS, and JavaScript
## 🕹️ How to Play
1. Use **arrow keys** or **swipe** to slide all tiles in one direction
2. When two tiles with the **same number** collide, they **merge** into one
3. Each merge adds to your score
4. Try to create a **2048** tile!
## 🏗️ Tech Stack
- **HTML5** — Semantic game layout
- **CSS3** — Grid layout, transitions, animations, CSS custom properties
- **Vanilla JavaScript** — Game logic with grid rotation algorithm
- **localStorage** — Best score persistence
## 📁 Project Structure
```
2048-game/
├── index.html # Game page with grid layout
├── style.css # Tile colors, animations, responsive design
├── game.js # Complete game engine (~350 lines)
└── README.md
```
## 🧠 How the Engine Works
The game uses a **rotation-based algorithm**: instead of implementing slide logic for all 4 directions, the grid is rotated so that every move becomes a "slide left" operation. This keeps the code clean and DRY.
```
Move Right = Rotate 2x → Slide Left → Rotate 2x back
Move Down = Rotate 3x → Slide Left → Rotate 1x back
```
## 🚀 Run Locally
```bash
git clone https://github.com/josedasilva11/2048-game.git
cd 2048-game
open index.html
# or: npx serve .
```
## 📄 License
MIT License — feel free to fork and modify.
---
Built by [José Pedro Silva](https://github.com/josedasilva11)