This is a web-based Tic-Tac-Toe game implemented using HTML, CSS, and JavaScript. It allows players to take turns placing their symbols (X or O) on a 3x3 grid. The game detects when a player has won or if the game ends in a draw.
HTML: Provides the structure of the web page.
CSS: Styles the elements and adds visual effects.
JavaScript: Implements the game logic and interactivity.
The HTML provides the basic structure of the Tic-Tac-Toe game.
It includes a container (div of class game) with nine buttons representing the game board.
There's also a message container (<div of class msg-container hide) initially hidden, which will display the winner message and a "New Game" button when necessary.
Two additional buttons outside the game container are provided for resetting the game and starting a new game.
CSS styles are applied to elements to define their appearance and layout.
Styles define the background color, font, size, and other visual aspects of the game elements.
Selectors like .box, .msg-container, .hide, .game, and button IDs (#reset-btn, #new-btn) are used to target specific elements and apply styling rules.
Event listeners are assigned to each box/button to handle click events.
Variables are initialized to keep track of the game state, such as turnO to determine whose turn it is.
An array winPatterns is defined to represent the winning combinations on the game board.
When a box/button is clicked, an event listener triggers a function.
Depending on whose turn it is (turnO), the clicked box displays either an "X" or "O".
The turnO variable is toggled to switch between players after each move.
The clicked box is disabled to prevent further interaction.
After each move, a function (checkWinner()) is called to determine if there's a winner.
The function iterates through the winPatterns array to check if any of the winning combinations have been achieved.
If a winning combination is found and all the boxes in that combination have the same value (either "X" or "O"), the game declares a winner and displays a message.
The winning player's symbol is also displayed in the message.
Two buttons (#reset-btn and #new-btn) allow players to reset the game or start a new game.
When clicked, these buttons trigger a function (resetGame()) that resets the game state.
The game board is cleared, all boxes/buttons are enabled, and the message container is hidden.
The code provides the functionality for a basic Tic-Tac-Toe game where players can take turns placing their symbols ("X" or "O") on a 3x3 grid.
It detects when a player has won or if the game ends in a draw.
Players can reset the game or start a new game at any time using the provided buttons.
Contributions are welcome! If you have any suggestions for improvements then feel free to submit a pull request.
