A fully interactive web-based Tic-Tac-Toe game built with HTML, CSS, and JavaScript.
The game supports multiple modes, AI opponents with different difficulty levels, and fun animations for wins and draws.
- Single Player – Play against the computer.
- Two Player – Play with a friend on the same device.
- Self Play – Watch "X" and "O" AI battle it out automatically.
- Easy – Random moves, simple to beat.
- Medium – Uses the minimax algorithm with some randomness.
- Hard – Plays optimally using the minimax algorithm (very challenging).
- Winning Conditions: The game checks predefined winning combinations.
- Celebration: Winning cells animate + confetti effect.
- Draw Condition: If the board is full without a winner, the game ends in a draw.
- 3x3 grid-based game board.
- Status messages showing whose turn it is or the outcome.
- Control buttons for:
- Selecting game mode
- Choosing difficulty level
- Restarting the game
- HTML (
index.html): Page structure (title, buttons, board, status, restart). - CSS (
styles.css): Styling, layout, animations (winning highlight + confetti). - JavaScript (
script.js): Core game logic.- Handles game state (
currentPlayer,gameActive,gameState). - Click handlers (
handleCellClick) & result checking (handleResultValidation). - AI logic:
getRandomMove– Easy difficulty.getBestMove– Medium/Hard difficulty using minimax.minimaxalgorithm with scoring for AI.
- Event listeners for UI interactions.
- Handles game state (
- Clone or download this repository.
- Open
index.htmlin your browser. - Choose your game mode and difficulty (if playing vs computer).
- Click on cells to play.
- Restart anytime using the Restart button.
tic-tac-toe/ │── index.html # Main page │── styles.css # Styling and animations │── script.js # Game logic and AI │── README.md # Project documentation
- Add online multiplayer support.
- Improve AI with learning
This project is open-source and free to use.