Video Tutorial | 'Tic Tac Toe' Game With AI

Video

In the below 5-minute video, I showcase a ‘Tic Tac Tow‘ Game, followed by the steps taken to build it.

---

Premise

Create a single-player Tic Tac Toe game with a modern, responsive user interface using HTML, CSS (with Tailwind CSS), and JavaScript. The game should feature the following:

1. Game Mechanics:

   • The player uses 'X', and the AI opponent uses 'O'.

   • The game is played on a 3x3 grid where players take turns marking cells.

   • The player clicks a cell to place an 'X', and the AI responds with an 'O' after a 500ms delay.

   • The AI uses the minimax algorithm to make optimal moves, ensuring it either wins or forces a draw if possible.

   • The game ends when either player wins (three identical symbols in a row, column, or diagonal) or when the board is full (draw).

   • A reset button allows restarting the game, clearing the board and resetting the game state.

2. User Interface:

   • Use Tailwind CSS for styling to create a clean, modern look with a white game container, rounded corners, and a shadow effect.

   • The game board is a 3x3 grid with clickable cells that scale slightly on hover for interactivity.

   • Cells display 'X' in blue and 'O' in red, with a winning combination highlighted in green and animated with a pulsing effect.

   • Display a status message above the board indicating whose turn it is ("Your Turn (X)" or "AI's Turn (O)") or the game outcome ("X Wins!", "O Wins!", or "It's a Draw!").

   • Include a styled reset button below the board with a hover effect.

3. Audio Features:

   • Play background music on a loop when the game loads, pausing it when the game ends (win or draw).

   • Play a distinct sound effect when a player places an 'X' or 'O'.

   • Play unique sound effects for a player win, AI win, or draw.

   • Handle audio playback errors gracefully with console logging.

4. Technical Requirements:

   • Use a single HTML file with embedded CSS and JavaScript.

   • Store the game state in a 9-element array representing the 3x3 grid.

   • Implement the minimax algorithm to evaluate all possible moves for the AI, returning the best move based on a scoring system (+10 for AI win, -10 for player win, 0 for draw).

   • Ensure the game is responsive and centered on the screen, with a minimum height and padding for better layout.

   • Handle edge cases, such as preventing moves on occupied cells or after the game ends.

5. Optional Enhancements:

   • Add smooth transitions for cell interactions and winning animations.

   • Ensure accessibility with proper HTML structure and semantic elements.

   • Use audio files named background-ttt.mp3, draw.mp3, game-draw.mp3, enemy.mp3, and user.mp3 for sound effects.

The game should provide an engaging experience with a polished UI, sound effects, and a challenging AI opponent that never loses if played optimally.

---

Code

The game files can be downloaded here -

https://drive.google.com/drive/folders/17YPSpWxtmJmoJMuypjsJ22-UGQ0tgh-v?usp=sharing

---