Tic Tac Toe Game HTML Structure

Open In Editor Publish Your Code

Tic Tac Toe Game HTML Structure

Recommended

5 October 2025

CSS Animation Container HTML Structure

1 April 2025

Color Matching Game

4 August 2024

Premium HTML Portfolio Template

HTML

CSS

JS

const cells = document.querySelectorAll('.cell');
const restartButton = document.getElementById('restartButton');
const winningCombinations = [
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8],
  [0, 3, 6],
  [1, 4, 7],
  [2, 5, 8],
  [0, 4, 8],
  [2, 4, 6]
];

let isXTurn = true;
let gameActive = true;

const checkWin = (player) => {
  return winningCombinations.some(combination =>
    combination.every(index => cells[index].textContent === player)
  );
};

const checkDraw = () => {
  return [...cells].every(cell => cell.textContent !== '');
};

const handleClick = (e) => {
  const cell = e.target;
  if (cell.textContent !== '' || !gameActive) return;
  
  cell.textContent = isXTurn ? 'X' : 'O';
  
  if (checkWin(cell.textContent)) {
    alert(`${cell.textContent} wins!`);
    gameActive = false;
    return;
  }
  
  if (checkDraw()) {
    alert("It's a draw!");
    gameActive = false;
    return;
  }
  
  isXTurn = !isXTurn;
};

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

restartButton.addEventListener('click', () => {
  cells.forEach(cell => {
    cell.textContent = '';
  });
  isXTurn = true;
  gameActive = true;
});