HTML Tic Tac Toe Game

To create a Tic Tac Toe game using HTML, we can use a combination of HTML, CSS, and JavaScript. Here's a basic outline of how we can create the game:

HTML Structure

We will start by creating the basic HTML structure for the game board. We will use a table with 3 rows and 3 columns to create the game board. Each cell of the table will have a unique id that we can use later to assign X's and O's to the correct cells. Here's the code:

<table id='game-board'>
  <tr>
    <td id='cell-1'></td>
    <td id='cell-2'></td>
    <td id='cell-3'></td>
  </tr>
  <tr>
    <td id='cell-4'></td>
    <td id='cell-5'></td>
    <td id='cell-6'></td>
  </tr>
  <tr>
    <td id='cell-7'></td>
    <td id='cell-8'></td>
    <td id='cell-9'></td>
  </tr>
</table>

CSS Styling

Next, we'll add some CSS styling to make the game board look nice. We'll also add some CSS classes that we can use later to change the color of the cells when a player clicks on them. Here's the code:

#game-board {
  border-collapse: collapse;
  margin: auto;
}

td {
  border: 2px solid black;
  width: 100px;
  height: 100px;
  text-align: center;
  vertical-align: middle;
  font-size: 50px;
  font-weight: bold;
  cursor: pointer;
}

td.clicked {
  background-color: #ddd;
  cursor: not-allowed;
}

JavaScript Functionality

Finally, we'll add some JavaScript functionality to allow players to click on a cell and assign either an X or an O to that cell. We'll also add some code to check for a winner after each turn. Here's the code:

let currentPlayer = 'X';

function cellClicked(cell) {
  if (cell.innerHTML !== '') {
    return;
  }

  cell.innerHTML = currentPlayer;
  cell.classList.add('clicked');

  if (checkForWinner()) {
    alert(currentPlayer + ' wins!');
    resetBoard();
    return;
  }

  if (checkForTie()) {
    alert('It's a tie!');
    resetBoard();
    return;
  }

  currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
}

function checkForWinner() {
  if (
    checkRow(1, 2, 3) ||
    checkRow(4, 5, 6) ||
    checkRow(7, 8, 9) ||
    checkRow(1, 4, 7) ||
    checkRow(2, 5, 8) ||
    checkRow(3, 6, 9) ||
    checkRow(1, 5, 9) ||
    checkRow(3, 5, 7)
  ) {
    return true;
  }
}

function checkRow(a, b, c) {
  if (
    document.getElementById('cell-' + a).innerHTML === currentPlayer &&
    document.getElementById('cell-' + b).innerHTML === currentPlayer &&
    document.getElementById('cell-' + c).innerHTML === currentPlayer
  ) {
    return true;
  }
}

function checkForTie() {
  let cells = document.getElementsByTagName('td');
  for (let i = 0; i < cells.length; i++) {
    if (cells[i].innerHTML === '') {
      return false;
    }
  }
  return true;
}

function resetBoard() {
  let cells = document.getElementsByTagName('td');
  for (let i = 0; i < cells.length; i++) {
    cells[i].innerHTML = '';
    cells[i].classList.remove('clicked');
  }
  currentPlayer = 'X';
}

Conclusion

And that's it! With these HTML, CSS, and JavaScript components, we've created a working Tic Tac Toe game. Feel free to add your own customizations to make the game your own!