A browser-based implementation of the popular 2048 sliding block puzzle game built with Vanilla JavaScript, SCSS, and HTML5.
This project is an interactive, fully functional web implementation of the classic 2048 puzzle. Players combine numbered tiles on a 4x4 grid using arrow keys to reach the tile 2048.
The project uses an Object-Oriented Architecture (OOP) to separate game logic from DOM manipulations, maintaining clean state management and immediate UI updates on every user input.
- 🕹️ Arrow Key Navigation: Smooth directional grid movements using native keyboard listeners.
- 📊 Live Score System: Real-time score recalculation on tile merges.
- 🎨 Dynamic Dynamic Styling: Color-coded tiles using SASS BEM modifiers (
field-cell--2,field-cell--4, etc.). - 🔄 State Management: Clear transition handling between
idle,playing,win, andlosegame states. - 📱 Compact Centered Layout: Clean CSS Flexbox UI optimized for browser viewports.
- JavaScript (ES6+): OOP logic, DOM events handling, dynamic CSS class manipulations.
- HTML5: Semantic table-based board structure.
- SCSS: Nesting, variables, BEM methodology, and state-driven cell modifiers.
- Modules: CommonJS / ES Module pattern for game engine isolation.
- Clone the repository:
git clone https://github.com/Skoulskiy/javascript_2048_game
- Install dependencies:
npm install
- Start the development server:
npm start- Build for production:
npm run build- GitHub: @Skoulskiy
- LinkedIn: @Ilya-Yaskevych