Tic Tac Toe Game

To create a Tic Tac Toe game, you can use HTML, CSS, and JavaScript. Here are the steps you can follow to build the game:

1. First, create the HTML structure for the game board using a table. Each cell of the table will represent a square on the game board.

<table>
  <tr>
    <td id='00'></td>
    <td id='01'></td>
    <td id='02'></td>
  </tr>
  <tr>
    <td id='10'></td>
    <td id='11'></td>
    <td id='12'></td>
  </tr>
  <tr>
    <td id='20'></td>
    <td id='21'></td>
    <td id='22'></td>
  </tr>
</table>

2. Add CSS styles to make the game board look visually appealing. For example, you can add borders to the cells to create a grid-like appearance.

table {
  border-collapse: collapse;
}

td {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  text-align: center;
  font-size: 50px;
}

3. Use JavaScript to add interactivity to the game. First, create a variable to keep track of whose turn it is. You can use the values 'X' and 'O' to represent the two players.

var player = 'X';

4. Add an event listener to each cell of the game board that listens for a click. When a cell is clicked, the JavaScript code should update the content of the cell to the current player's symbol, toggle the player variable to switch to the other player's turn, and check if the game has been won or tied.

var cells = document.querySelectorAll('td');

for (var i = 0; i < cells.length; i++) {
  cells[i].addEventListener('click', function() {
    if (this.textContent === '') {
      this.textContent = player;
      checkWin();
      player = player === 'X' ? 'O' : 'X';
    }
  });
}

function checkWin() {
  // Add code to check if the game has been won or tied
}

5. Finally, add code to check if the game has been won or tied. You can do this by checking if any row, column, or diagonal has three of the same symbols. If no winner is found and all cells are filled, the game is tied.

function checkWin() {
  var rows = document.querySelectorAll('tr');
  var cols = document.querySelectorAll('td');
  var diagonals = [
    [document.querySelector('#00'), document.querySelector('#11'), document.querySelector('#22')],
    [document.querySelector('#02'), document.querySelector('#11'), document.querySelector('#20')]
  ];
  
  // Check rows
  for (var i = 0; i < rows.length; i++) {
    if (rows[i].textContent === 'XXX' || rows[i].textContent === 'OOO') {
      alert('Game over! ' + player + ' wins!');
      resetGame();
      return;
    }
  }
  
  // Check columns
  for (var i = 0; i < 3; i++) {
    if (cols[i].textContent + cols[i+3].textContent + cols[i+6].textContent === 'XXX' || cols[i].textContent + cols[i+3].textContent + cols[i+6].textContent === 'OOO') {
      alert('Game over! ' + player + ' wins!');
      resetGame();
      return;
    }
  }
  
  // Check diagonals
  for (var i = 0; i < diagonals.length; i++) {
    if (diagonals[i][0].textContent + diagonals[i][1].textContent + diagonals[i][2].textContent === 'XXX' || diagonals[i][0].textContent + diagonals[i][1].textContent + diagonals[i][2].textContent === 'OOO') {
      alert('Game over! ' + player + ' wins!');
      resetGame();
      return;
    }
  }
  
  // Check for tie
  var count = 0;
  for (var i = 0; i < cols.length; i++) {
    if (cols[i].textContent !== '') {
      count++;
    }
  }
  if (count === cols.length) {
    alert('Game over! Tie game!');
    resetGame();
    return;
  }
}

function resetGame() {
  // Add code to reset the game board
}

And that's it! With these steps, you should be able to create a fully functioning Tic Tac Toe game using HTML, CSS, and JavaScript. Have fun!