paint-brush
Building a Simple Tic-Tac-Toe Game with JavaScriptby@foolishdeveloper
378 reads
378 reads

Building a Simple Tic-Tac-Toe Game with JavaScript

by Shantanu JanaJanuary 31st, 2023
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

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 the game using HTML, CSS, and JavaScript. 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.
featured image - Building a Simple Tic-Tac-Toe Game with JavaScript
Shantanu Jana HackerNoon profile picture


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.