Tic Tac Toe Game HTML Structure

678 iroger7

Open In Editor Publish Your Code

Tic Tac Toe Game HTML Structure

Recommended

21 July 2025

HTML Login Form with Geometric Background

26 February 2026

Liquid Glass Effect HTML CSS Code

11 March 2026

Super Clicker game

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;
});