How to Create a Tic Tac Toe Game in HTML, CSS, and JavaScript

To create a Tic Tac Toe game in HTML, you'll need to follow these steps:

Create the HTML structure of the game board: Use a table element to represent the 3x3 grid.
Add CSS styling: Style the table and its cells to look like a Tic Tac Toe board.
Implement JavaScript game logic: Handle player turns, check for wins, and update the game state.

1. HTML Structure

<table>
  <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>

2. CSS Styling

table {
  border-collapse: collapse;
  margin: auto;
}

td {
  width: 100px;
  height: 100px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid black;
  font-size: 60px;
  cursor: pointer;
}

td:hover {
  background-color: lightgray;
}

3. JavaScript Game Logic

var currentPlayer = 'X';

function makeMove(cell) {
  if (cell.innerHTML === '') {
    cell.innerHTML = currentPlayer;
    checkForWinner();
    togglePlayer();
  }
}

function checkForWinner() {
  // check rows, columns, and diagonals for three in a row
}

function togglePlayer() {
  if (currentPlayer === 'X') {
    currentPlayer = 'O';
  } else {
    currentPlayer = 'X';
  }
}

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

for (var i = 0; i < cells.length; i++) {
  cells[i].onclick = function() {
    makeMove(this);
  }
}

By combining these three components, you can create a functional Tic Tac Toe game. You'll need to implement the checkForWinner() function to determine if a player has won, and add additional features like a game reset button or a display of the current player.

How to Create a Tic Tac Toe Game in HTML, CSS, and JavaScript