Tic-Tac-Toe Game

Overview

Welcome to the Tic-Tac-Toe game! This is a fun and interactive implementation using React. You can play against an AI opponent where one player takes the role of 'X' while the AI takes on 'O'. This game features score tracking, a toggle between dark and light themes, and an intelligent AI that uses the Minimax algorithm to play optimally.

Whether you're a seasoned player or new to the game, this Tic-Tac-Toe experience is designed to be both entertaining and challenging!

Features

Here are some exciting features you'll find in this game:

• Two Player Mode: Play against the AI and see if you can outsmart it!
• Score Tracking: Keep track of wins for both players, making each game even more competitive.
• AI Opponent: The AI is not just any opponent; it uses the Minimax algorithm to make the best possible moves, providing a challenging experience.
• Theme Toggle: Enjoy your game in either a dark or light theme—perfect for your mood!
• Reset Game: Feel free to reset the game anytime to start fresh and try different strategies.
• Responsive Design: Play seamlessly on various devices, whether you're on your computer or a mobile device.

Installation

Getting started with the Tic-Tac-Toe game is easy! Just follow these simple steps:

1. Clone the repository:

   git clone https://github.com/kknani24/tic-tac-toe-minimax-ai.git
   cd tic-tac-toe

2. Install the required dependencies:

   npm install

3. Start the development server:

   npm start

4. Open your browser and head over to http://localhost:3000 to start playing!

How to Play

Once you're in the game, it's easy to jump right in:

• Simply click on a square to place your 'X'.
• The AI will then make its move automatically, so be ready!
• If someone wins or if the game results in a draw, the game will announce the outcome.
• Use the Reset Game button anytime you want to start a new game.
• Feel free to toggle the theme using the Switch to Light Theme or Switch to Dark Theme buttons to match your preferences.

AI and Minimax Algorithm

The AI in this game uses the Minimax algorithm, a powerful technique from game theory that helps the AI make the best decisions. Here’s a simple breakdown of how it works:

1. Game Tree: Think of all possible game states as a tree. Each move leads to a new state, and the algorithm explores all these possibilities.
2. Recursion: The algorithm checks all potential moves, deciding the best one based on whether it’s the AI's turn (trying to maximize its score) or the player’s turn (trying to minimize the AI’s score).
3. Scoring: The AI assigns scores to different outcomes:
   • If the AI wins, it scores +10.
   • If the player wins, it scores -10.
   • If it’s a draw, the score is 0.
4. Optimal Move Selection: The AI will always choose the move that leads to the most favorable outcome for itself.

Key Functions

Here are some important functions that drive the AI's decision-making:

• minimax(newSquares, player): This function implements the Minimax algorithm, evaluating potential moves recursively.
• findWinningMove(squares, player): This function checks if there’s an immediate winning move for either the AI or the player.

Code Overview

Let’s dive into the main components that make up the game:

Main Components

• Board: This component is the heart of the game, managing the game state and implementing the core logic.
• Square: Each square on the board is represented by a button, making it easy for players to click and place their moves.

Key Functions

Here are some key functions you’ll interact with:

• handleClick(i): This function handles the click event for each square on the board.
• aiMove(currentSquares): This function determines the AI's next move using the Minimax algorithm.
• checkWinner(squares): After each move, this function checks if there’s a winner.
• resetGame(): If you want to restart the game, this function resets the game state.

Contributing

I welcome contributions! If you'd like to enhance the game or add features, please feel free to fork the repository and submit a pull request. Your help is much appreciated!

License

This project is licensed under the MIT License. Feel free to use and modify it as you wish!

Technologies Used

This project was built using:

• React: For creating the interactive UI.
• JavaScript: The programming language that powers the game logic.
• CSS: For styling and layout.
• Node.js: To manage the backend and server-side logic.

SVG Images

Here are the logos of the technologies used in this project:

HTML

CSS

JavaScript

Node.js