Tic-Tac-Toe with computer opponent

This project is a web-based Tic-Tac-Toe game built with React. It features three computer difficulty levels and interactive controls. The game is designed for a single player to play against the computer.

Features

Difficulty Selection

• Easy: The computer plays random moves.
• Medium: The computer prefers moves with higher chances of winning (blocks, center, corners, sides).
• Hard: The computer plays optimally using the minimax algorithm.

Game Board

• 3x3 grid for Tic-Tac-Toe.
• Clickable squares to make moves.
• X and O are displayed with custom icons and colored backgrounds (red for X, blue for O).
• Responsive and visually appealing layout.

Game Logic

• The player always plays as X and goes first.
• The computer plays as O.
• The game detects wins, losses, and ties.
• Displays the current player's turn and the winner or tie status.

Easy Difficulty

The Easy difficulty selects its moves completely at random. On each turn, the computer chooses one of the available empty squares on the board without considering the current game state or any potential winning or blocking moves. This makes the Easy mode simple to beat and ideal for beginners or those looking for a casual game experience.

Medium Difficulty

The Medium difficulty uses a set of prioritized strategies to make its moves, making it more challenging than the Easy mode but not unbeatable. On each turn, the computer follows this order of logic:

1. Win: If there is a move that lets the computer win immediately, it takes that move.
2. Block: If the player is about to win on their next move, the computer blocks that move.
3. Center: If the center square is available, the computer takes it.
4. Corner: If any corner squares are available, the computer picks one at random.
5. Side: If no better options are available, the computer picks a random side square.

This approach allows the Medium level to block obvious wins and take advantage of simple opportunities, but it does not look ahead multiple moves like the Hard level (minimax).

Minimax Algorithm Explanation (Hard Difficulty)

• The Hard difficulty uses the minimax algorithm to play optimally. This algorithm explores all possible future moves to find the best one for the computer (playing as 🅾️).

How minimax is implemented with a graph structure

• The game board is represented as an array of 9 cells (board), where each cell can be ❎, 🅾️, or null.
• A graphNode class is used to represent each node in the game tree:
• board: the current state of the board at that node.
• states: an array holding all possible next moves (child nodes).
• statesList: the minimax score assigned to that node.

The minimax function:

Base case: Checks if the current board state is a win, loss, or tie using getWinner. It assigns a score:

• +10 if 🅾️ (computer) wins,
• -10 if ❎ (player) wins,
• 0 for a tie.

Recursion: For each available move, it:

• Creates a new graphNode with the updated board.
• Recursively calls minimax with the new node and switches the player.
• Scoring: For the current player: 🅾️ tries to maximize the score. ❎ tries to minimize the score.
• Returns the graphNode with the best possible score and moves stored in states.
• In the game component, after the player's move, the computer: Builds the game tree from the current board state using minimax. Selects the child node with the highest score (best move). Updates the board with the chosen move.
• I recommend this article https://www.neverstopbuilding.com/blog/minimax because it explains the minimax algorithm in Tic-Tac-Toe better than any other resource I've seen.

Getting Started

Installation

1. Clone the repository:

   git clone git@github.com:Y4SS3R3/xoGame.git
   cd xoGame

2. Install dependencies:

   npm install

Running the App

1. Start the development server:

   npm start

2. Open http://localhost:3000 in your browser.