/2048-game-using-reactjs

A modern and sleek implementation of the classic 2048 puzzle game built with React and Tailwind CSS. Enjoy a seamless gaming experience with smooth animations, dark mode interface, and responsive design

Primary LanguageJavaScript

2048 Game

Welcome to the 2048 Game project! This is a web-based implementation of the popular 2048 puzzle game, created using React and styled with Tailwind CSS. The game features a sleek dark mode interface, optimized for both desktop and mobile devices.

Table of Contents

Overview

2048 is a single-player sliding tile puzzle game. The objective of the game is to slide numbered tiles on a grid to combine them and create a tile with the number 2048.

Features

  • Dark mode interface for a sleek and modern look
  • Smooth animations for tile appearance and merging
  • Keyboard and touch controls for an optimized gaming experience on both desktop and mobile
  • Score tracking with best score saving in local storage
  • Responsive design for seamless play on various devices

Demo

Video Demo

2048g.mp4

Live Demo

You can play the game online here

Installation

To set up the project locally, follow these steps:

  1. Clone the repository:
  git clone https://github.com/pawantech12/2048-game-using-reactjs.git
  cd 2048-game-using-reactjs-master
  1. Install the dependencies:
npm i or npm install
  1. Start the development server:
npm run dev
  1. Open your browser and navigate to http://localhost:5173

Usage

  • Use the arrow keys on your keyboard to move the tiles.
  • On mobile devices, swipe in the direction you want to move the tiles.
  • Combine tiles with the same number to merge them and increase their value.
  • The game ends when there are no possible moves left or when you create a tile with the number 2048.

Game Rules

  • The game is played on a 4x4 grid.
  • Each turn, a new tile (2 or 4) randomly appears in an empty spot on the board.
  • Slide tiles using the arrow keys (or swipe on mobile) to move all tiles in the chosen direction.
  • When two tiles with the same number collide, they merge into one tile with the sum of their values.
  • The goal is to create a tile with the number 2048, but you can continue playing to achieve higher scores.

Contributing

Contributions are welcome! To contribute to the project:

  1. Fork the repository.
  2. Create a new branch with a descriptive name:
git checkout -b feature/new-feature
  1. Make your changes and commit them with clear messages:
git commit -m "Add new feature"
  1. Push your branch to your fork:
git push origin feature/new-feature
  1. Open a pull request detailing your changes.

Acknowledgements

The original 2048 game was created by Gabriele Cirulli. This project is a recreation using modern web technologies.

Contact

If you have any questions or feedback, feel free to reach out to the project maintainer:

Enjoy playing the 2048 Game! 🚀

License

(Note: This project is free to use and does not contain any license.)