Tic Tac Toe Game In JavaScript

Create a Tic Tac Toe game in JavaScript for beginners

by

Tic Tac Toe is a simple two-player game that you can create in JavaScript. Games can be developed with many programming languages but C++, C#, Python and JavaScript are the most popular programming languages for developing games.

Creating a Tic Tac Toe game in JavaScript is a great example of what can be achieved through JavaScript game development. It is also an excellent way to get started with Javascript learning while creating a fun and engaging project.

In this article, You can study the code given below to practice how you can create a simple Tic-Tac-Toe game step by step using HTML, CSS and JavaScript. We’ll begin with writing HTML code first and CSS and finally JavaScript.

HTML code for Tic Tac Toe JavaScript game

Let’s create  index.html  and add the following code to it:

<!DOCTYPE html>
<html>
<head>
     <title>Tic Tac Toe</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
      <h1>Tic Tac Toe Game In JavaScript</h1>
      <div class="board">
         <div class="cell" id="0"></div>
         <div class="cell" id="1"></div>
         <div class="cell" id="2"></div>
         <div class="cell" id="3"></div>
         <div class="cell" id="4"></div>
         <div class="cell" id="5"></div>
         <div class="cell" id="6"></div>
         <div class="cell" id="7"></div>
         <div class="cell" id="8"></div>
      </div>
       <button id="reset">Reset</button>
    </div>
       <script src="script.js"></script>
</body>
</html>

CSS code for Tic Tac Toe JavaScript game

Let’s create  style.css  and add the following code to it:

.container {
  text-align: center;
}

h1 {
  font-size: 36px;
}

.board {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  margin: 0 auto;
}

.cell {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  font-size: 60px;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.cell:hover {
  background-color: #eee;
}

#reset {
  font-size: 20px;
  margin-top: 20px;
  padding: 10px 20px;
  cursor: pointer;
}

JavaScript code for Tic Tac Toe JavaScript game

Now, Let’s create a JavaScript file called  script.js  and add the following code to it:

const cells = document.querySelectorAll('.cell');
const resetButton = document.getElementById('reset');
let currentPlayer = 'X';

cells.forEach(cell => {
   cell.addEventListener('click', handleClick, { once: true });
});

function handleClick(e) {
   const cell = e.target;
   cell.textContent = currentPlayer;
   cell.classList.add(currentPlayer);
   checkWin();
   switchPlayer();
}

function switchPlayer() {
   currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
}

function checkWin() {
   const winningConditions = [    
     [0, 1, 2],
     [3, 4, 5],
     [6, 7, 8],
     [0, 3, 6],
     [1, 4, 7],
     [2, 5, 8],
     [0, 4, 8],
     [2, 4, 6],
  ];
  for (let i = 0; i < winningConditions.length; i++) {
    const [a, b, c] = winningConditions[i];
    if (
      cells[a].classList.contains(currentPlayer) &&
      cells[b].classList.contains(currentPlayer) &&
      cells[c].classList.contains(currentPlayer)
    ) {
      endGame('win');
      break;
    } else if (Array.from(cells).every(cell => cell.classList.contains('X') || cell.classList.contains('O'))) {
      endGame('draw');
    }
  }
}

function endGame(result) {
  if (result === 'win') {
    alert(`${currentPlayer} wins!`);
  } else if (result === 'draw') {
    alert('Draw!');
  }
  cells.forEach(cell => {
     cell.removeEventListener('click', handleClick);
     resetButton.addEventListener('click', resetGame);
  });
                
}

function resetGame() {
cells.forEach(cell => {
cell.textContent = '';
cell.classList.remove('X');
cell.classList.remove('O');
cell.addEventListener('click', handleClick, { once: true });
});
currentPlayer = 'X';
}

resetGame();

Now, it’s time to check the output and play the game.

Let’s open the  index.html  file in the browser and start playing the Tic Tac Toe JavaScript game.

Create a Tic Tac Toe game in JavaScript

Also Read: 10 Best JavaScript Games To Learn JavaScript

Leave a Comment