Tic-Tac-Toe Game with ReactJS

Welcome to the Tic-Tac-Toe game built with ReactJS! This project showcases a classic game of Tic-Tac-Toe with some exciting features. Whether you want to enjoy a friendly match or learn from your past moves, this application has got you covered.

Features

• Turn Indicator: When you hover over the game board, you can see which player's turn it is. "X" or "O" will be displayed on the empty cells to keep you informed.

• Time-Travel System: Want to revisit a particular move? No problem! You can turn back the game to any specified move number, like move #2 or move #1, to explore different game paths.

• Sound Effects: Enjoy the game even more with sound effects! Each player's turn is accompanied by a distinct sound, and after the winner is decided, a celebratory sound and fireworks display add to the excitement.

• Victory Celebration: When a player wins the game, fireworks set off to celebrate the victory, creating an immersive and fun experience.

Components

This project is built using several components that you can reuse and extend in your own React applications:

• Tic-Tac-Toe Component: The main component for the game logic.

• Board Component: Manages the game board and renders the cells.

• Tiles Component: Handles individual cell rendering and state.

• Strike Component: Detects and displays the winning strike pattern.

• Fireworks Component: Adds a fireworks animation when a player wins.

• Reset Component: Allows you to reset the game.

• Result Component: Displays the game result (win, lose, draw).

Getting Started

To run this project locally and explore the code, follow these steps:

1. Clone this repository:

   git clone https://github.com/adarsh-K-R/tic-tac-toe-react.git
   cd tic-tac-toe-react

2. Install the dependencies using npm or yarn:

   npm install
   # or
   yarn install

3. Start the development server:

   npm start
   # or
   yarn start

4. Open your browser and visit http://localhost:3000 to play the game and explore the code.

How to Play

1. Click on an empty cell to make your move.

2. The turn indicator will let you know whose turn it is (X or O).

3. Use the time-travel system to review previous moves.

4. Enjoy the sound effects and fireworks when you win!

5. Use the reset button to start a new game.

Feel free to contribute, report issues, or suggest improvements. We hope you have a great time playing Tic-Tac-Toe with ReactJS!

---

This project is created with ❤️ by Adarsh. Enjoy the game!