Building a Simple Tic-Tac-Toe Game with JavaScript

Tic Tac Toe is a classic game that can be built with many programming languages. In this article, we will be building an advanced version of Tic Tac Toe using HTML, CSS, and JavaScript.

First, let's create the HTML structure for the game. We will be using a table to create the grid for the game. Each cell in the grid will be represented by a table data (td) element.

<table id="grid">
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Next, let's add some CSS to style the game. We will give the grid a border and set the width and height of each cell.

#grid {
  border: 2px solid black;
}

#grid td {
  width: 100px;
  height: 100px;
  text-align: center;
  vertical-align: middle;
}

Now, we can move on to the JavaScript code. We will start by creating a function that will handle the logic for the game. This function will be called every time a cell is clicked.

function play(cell) {
  // Logic for the game goes here
}

Inside the play function, we will need to keep track of the current player (X or O), check if there is a winner, and switch the current player after each move. We can also add a reset button to allow the player to start a new game.

The code defines a global variable currentPlayer initialized to "X". It defines a play() function that takes a cell element as an argument and sets its innerHTML to the value of currentPlayer, calls checkForWinner(), and then calls switchPlayer().

It also defines checkForWinner() and switchPlayer() functions, which respectively check for a winner and switch the value of currentPlayer between "X" and "O". Finally, it sets an event listener for the "click" event on an element with an id of "reset-button" and calls the reset() function when the button is clicked. However, the checkForWinner() and reset() function are not implemented.

let currentPlayer = "X";

function play(cell) {
  if (cell.innerHTML === "") {
    cell.innerHTML = currentPlayer;
    checkForWinner();
    switchPlayer();
  }
}

function checkForWinner() {
  // Check for a winner
}

function switchPlayer() {
  if (currentPlayer === "X") {
    currentPlayer = "O";
  } else {
    currentPlayer = "X";
  }
}

const resetButton = document.getElementById("reset-button");
resetButton.addEventListener("click", reset);

function reset() {
  // Reset the game
}

Finally, we will add event listeners to each cell in the grid to call the play function when clicked.

This code selects all elements with a tag of "td" within an element with an id of "grid" and assigns them to a variable cells. It then loops through the cells list and sets an event listener for the "click" event on each cell.

When a cell is clicked, the anonymous function passed as the second argument to addEventListener is called, which in turn calls the play() function and passes the clicked cell as an argument. So, when the user click on any cell it will call the play function and play the game.

const cells = document.querySelectorAll("#grid td");
cells.forEach(cell => cell.addEventListener("click", () => play(cell)));

This is just a basic example of how to create a simple Tic Tac Toe game using HTML, CSS, and JavaScript.