How to make Tic Tac Toe in HTML CSS and JavaScript?

Tic Tac Toe is a classic game that can be easily created using HTML, CSS, and JavaScript. In this article, we will go through the process of building a Tic Tac Toe game from scratch.

This is a simple design for beginners and a half. But before that I have shared another advanced JavaScript Tic Tac Toe game design you can see if you want.

Step 1: Set up the HTML

First, let's create the HTML structure of the game. We will need a table with 3 rows and 3 columns to represent the Tic Tac Toe board.

Each cell in the table will be a button that the player can click on to make their move. Here is the HTML code for the table:

<table>
  <tr>
    <td><button id="0"></button></td>
    <td><button id="1"></button></td>
    <td><button id="2"></button></td>
  </tr>
  <tr>
    <td><button id="3"></button></td>
    <td><button id="4"></button></td>
    <td><button id="5"></button></td>
  </tr>
  <tr>
    <td><button id="6"></button></td>
    <td><button id="7"></button></td>
    <td><button id="8"></button></td>
  </tr>
</table>

Step 2: Style the game with CSS

Next, let's add some CSS to style the table and buttons. We can use CSS to change the background color of the table, set the size and color of the buttons, and add some padding and margins to make the game look nice.

table {
  background-color: #f2f2f2;
  width: 300px;
  height: 300px;
  margin: 0 auto;
}

button {
  width: 100px;
  height: 100px;
  font-size: 48px;
  background-color: #fff;
  border: none;
  padding: 0;
}

Step 3: Add functionality with JavaScript

Now that we have the HTML and CSS set up, let's add the JavaScript to make the game functional. First, we need to add an event listener to each button that will be triggered when the player clicks on a button.

The event listener will call a function that will update the button's text to either an "X" or an "O", depending on whose turn it is.

for (let i = 0; i < 9; i++) {
  let button = document.getElementById(i);
  button.addEventListener("click", function() {
    button.innerText = "X";
  });
}

We also need to keep track of whose turn it is, so we can alternate between "X" and "O" when the player clicks on a button.

We can do this by creating a variable turn that is initially set to "X" and then toggled to "O" every time a button is clicked.

let turn = "X";
for (let i = 0; i < 9; i++) {
  let button = document.getElementById(i);
  button.addEventListener("click", function() {
    button.innerText = turn;
    turn = (turn === "X") ? "O" : "X";
  });
}

Finally, we need to check for a winner or a draw every time a button is clicked. Once all the steps are complete, we will have a functional Javascript Tic Tac Toe game that can be played directly in the browser.

This is a basic example of creating a Tic Tac Toe game using HTML, CSS, and JavaScript. There are many ways to improve and expand upon this basic game, such as adding a reset button, a score tracker, or even a multiplayer mode. With a little bit of creativity and some additional coding, the possibilities are endless.

Comments

[Tracy Gilmore]

Hi,
I am not sure why you used a table to position you buttons.
Using table for layout has long been regarded as bad practice and in this context wrapping the buttons in a div with a fixed width and height would achieve the same results with less markup.
Another point: you could have attached the event listener to the table or div rather than every button and used the event.target to access the clicked button.
Finally, do you need the buttons to have an id attribute. Possibly to detect when one player has won?
Apologies if my comments appear negative, they are given with the best of intentions and I look forward to reading your response.
Regards, Tracy