Create an interactive Tic Tac Toe game using HTML, CSS, and JavaScript with the following features and structure: Requirements User Interface The game should occupy 50% of the screen area, with a responsive design that works well on both desktop and mobile devices. The game grid should have a modern and visually appealing design: Distinct background colors for each player's filled cells (X and O). Smooth hover effects and animations for cell interactions. Center the board vertically and horizontally in the viewport. Include: A header with the game title ("Tic Tac Toe"). A subtitle showing the current turn or instructions. A modal overlay to display the game results (e.g., "Player X wins!", "It's a tie!") with a Restart Game button. The overlay should fade in/out smoothly. Gameplay Players can take turns playing as X or O on a 3x3 grid. A simple AI algorithm for the computer player: Tries to win or block the player's winning move. Makes a random move if no immediate win/block opportunity exists. Highlights the winning combination when the game ends. Displays messages for: Whose turn it is. The winner, if any. A tie, if applicable. The board should become inactive once the game ends. Accessibility and Usability Ensure keyboard and mouse accessibility. Provide visual and textual cues for player turns and game results. Ensure the layout is responsive and user-friendly across all devices. Code Structure HTML: Define the structure, including: A
for the title and instructions. A
section for the game grid. A modal overlay for displaying results and the "Restart Game" button. CSS: Style the game with: Modern colors, hover effects, and animations. A modal overlay with a backdrop effect. Responsiveness and proper scaling for various screen sizes. JavaScript: Include logic for: Handling player moves and turns. Simple AI for the computer's move. Detecting win conditions or ties. Displaying the overlay with game results. Resetting the game for a new round. Deliverables A complete tic-tac-toe.html file defining the game's structure. A styles.css file with styles for responsiveness, visual appeal, and animations. A ai.js file for all interactivity, game logic, and AI.