2048 Game in Next.js 15

A modern implementation of the classic 2048 game, built with Next.js 15 and enhanced with contemporary web technologies.

🎮 Features

• Modern UI/UX

  • Smooth animations with Framer Motion
  • Responsive design for all devices
  • Dark/Light theme support
  • Custom animated tile designs

• Progressive Web App

  • Offline support
  • Installable on mobile devices & desktop
  • Optimized asset caching

• Game Features

  • Touch/Swipe support
  • Keyboard controls (Arrow keys & WASD)
  • Score tracking
  • Best score persistence
  • Animated transitions

🚀 Tech Stack

• Next.js 15
• TypeScript
• Tailwind CSS
• Framer Motion
• Zustand
• Radix UI
• Cloudinary

🛠️ Installation

1. Clone the repository:

git clone https://github.com/bekione/nextjs-2048-tiles.git

2. Install dependencies:

cd nextjs-2048-tiles
npm install

3. Create a .env file:

NEXT_PUBLIC_CLOUDINARY_BASE_URL=your_cloudinary_url

4. Run the development server:

npm run dev

🎯 How to Play

• Use arrow keys or WASD to move tiles
• Swipe on mobile devices
• Combine matching numbers to reach 2048
• Game over when no more moves are possible

🌐 PWA Features

• Offline gameplay
• Add to home screen
• Fast loading times
• Automatic updates

📱 Controls

• Desktop: Arrow keys or WASD
• Mobile: Swipe gestures
• New Game: Click "New Game" button
• Theme: Toggle between light/dark modes

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Original 2048 game by Gabriele Cirulli
• Next.js team for the amazing framework
• Open source community for the tools and libraries

🔗 Links

• Live Demo
• GitHub Repository