2048 Game - React

A modern implementation of the classic 2048 puzzle game built with React. Combine tiles with the same number to reach the 2048 tile and achieve the highest score possible!

Features

• 🎮 Classic 2048 Gameplay - Slide tiles in four directions to merge and create the 2048 tile
• 📊 Real-time Score Tracking - Keep track of your current and best scores
• ⌨️ Keyboard Controls - Use arrow keys to move tiles
• 📱 Responsive Design - Works seamlessly on desktop and mobile devices
• ♻️ Restart Game - Reset the board and start a new game at any time
• 💾 Local State Management - Game state is managed efficiently with React hooks

Project Structure

src/
├── components/
│   ├── Board.js      # Main game board component
│   ├── Game.js       # Game container and logic
│   ├── Score.js      # Score display component
│   └── Tile.js       # Individual tile component
├── hooks/
│   └── useKeyboard.js # Custom hook for keyboard input handling
├── utils/
│   └── gameLogic.js   # Core 2048 game logic (movement, merging, scoring)
├── App.js            # Main app component
├── App.css           # Application styles
├── index.js          # Entry point
└── index.css         # Global styles

Installation

1. Clone the repository

   git clone https://github.com/yourusername/react-2048-game.git
   cd react-2048-game

2. Install dependencies

   npm install

3. Start the development server

   npm start

   The app will open at http://localhost:3000

How to Play

1. Objective: Combine tiles with the same number to create larger numbers and reach the 2048 tile
2. Controls:
   • Use Arrow Keys (↑ ↓ ← →) to move tiles in any direction
   • Tiles with the same number will merge when they slide into each other
   • Each merge awards points equal to the new tile value
3. Win Condition: Create a tile with the value 2048
4. Game Over: The game ends when no more moves are possible

Available Scripts

In the project directory, you can run:

npm start

Runs the app in development mode. Open http://localhost:3000 to view it in your browser. The page will reload when you make changes.

npm test

Launches the test runner in interactive watch mode.

npm run build

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for best performance.

Technologies Used

• React (^19.2.3) - UI library
• React DOM (^19.2.3) - React rendering engine
• React Scripts (5.0.1) - Build and test scripts
• CSS3 - Styling

Future Enhancements

• Undo/Redo functionality
• Difficulty levels
• Dark/Light theme toggle
• Sound effects
• Animations for tile movements
• Leaderboard/High scores storage
• Mobile app version

Contributing

Contributions are welcome! Feel free to fork the project and submit pull requests for any improvements.

License

This project is open source and available under the MIT License.

Learn More

• React Documentation
• Create React App Documentation
• 2048 Game Rules

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

npm run build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify