A visually breathtaking, modular, and sensory-rich browser-based implementation of the classic 2048 puzzle game.
This edition replaces monolithic, slow-loading frameworks and run-time compilers with a modern, zero-dependency, modular ESM Vanilla JS + CSS Custom Properties architecture. It is built to load instantly, perform flawlessly at 60fps on mobile, and provide an incredibly polished, premium arcade experience.
Sensory audio feedback generated entirely at runtime using the native browser Web Audio API (AudioContext). It synthesizes retro arcade sounds without loading a single audio file, keeping the repository ultra-lightweight and fast:
- Move: A subtle, clean triangle wave frequency sweep.
- Merge: A highly satisfying arpeggiated chiptune major chime.
- Victory Fanfare: An uplifting major chord sequence to celebrate reaching 2048.
- Game Over Chime: A decaying minor scale low-pass sweep.
- Includes a persistent mute/unmute switch.
When two tiles merge, the board generates a dynamic physics-based particle burst matching the exact color theme of the merged tile. Built on a transparent HTML5 canvas overlay and powered by requestAnimationFrame, the engine safely sleeps when no particles are on screen to consume 0% CPU during idle states.
Cycle seamlessly between three premium, highly responsive color systems utilizing modern HSL gradients and rich depth layering:
- ☀️ Classic Warm: A polished, modern take on the original beige and tan cozy arcade appearance.
- 🌌 Cyberpunk Neon: A striking dark mode with glowing border frames and high-contrast, neon-shaded tiles.
- ❄️ Slate Minimalist: A sleek, industrial steel-blue palette suited for a modern design aesthetic.
Made a mistake? Revert your last 3 moves with a dedicated Undo button. The engine preserves an historical deep-cloned state stack of board matrices, active scores, and game states (win/loss statuses).
A persistent statistics dashboard tracking:
- Total games played.
- Successful wins.
- Real-time win rate percentages.
- Peak all-time high score.
The repository has been refactored into clean, self-contained ES6 modules:
2048/
├── index.html # Accessible semantic markup with responsive grid
├── LICENSE # MIT License
├── README.md # Public documentation (You are here)
├── DEVELOPMENT.md # Project conventions & development rules
├── css/
│ └── style.css # Core design tokens, theme overrides, keyframes, transitions
└── js/
├── engine.js # Core game logic, matrix slide-merge, and undo stack
├── audio.js # Real-time Web Audio API chiptune synthesizer
├── particles.js # Retina-ready canvas physics particles engine
└── ui.js # Main coordinator, keyboard/swipe bindings, and stats persistence
Because the codebase uses pure modern ES6 Modules (type="module"), modern browsers require them to be served via an HTTP protocol for security reasons.
Open your terminal inside the project directory and run:
# Python 3
python -m http.server 8000Then navigate to http://localhost:8000 in any web browser.
If you have Node installed, simply run:
npx serve .If you use VS Code, right-click index.html and select "Open with Live Server".
- Slide: Use the Arrow Keys, WASD, or Swipe on touchscreens to slide tiles.
- Merge: When two tiles with matching numbers collide, they fuse into a single tile with double the value.
- Win: Reach the 2048 tile to unlock the victory overlay. Choose to "Keep Going" to set a new historical record!
- Undo: Press the Undo icon to step backward up to 3 turns.
- Zero Runtime Dependencies: No React overhead, no Babel compile pauses at startup. Loads in under 50ms.
- Compositor Accelerated: All tile translations use modern CSS individual transform properties driven by GPU compositor threads for smooth 60fps animations.
- A11y Friendly: Employs appropriate semantic HTML5 components, clean headings, responsive touch targets, and high-contrast color matching.
This project is open-source and licensed under the MIT License.