Tic Tac Toe Game

This is a simple Tic Tac Toe game built using HTML, CSS and JavaScript.

Game Rules

Tic Tac Toe is a two-player game. The first player is known as 'X' and the second player is known as 'O'. Players take turns marking a square with their symbol ('X' or 'O'). The player who successfully places three consecutive marks in a vertical, horizontal, or diagonal row wins the game. If all squares are filled and no player has three consecutive marks, the game is a tie.

Game Interface

To play the game, simply click on the square you want to mark. The current player's symbol will be displayed in the square. Once a player wins or the game ends in a tie, a message will be displayed indicating the result.

Here is the HTML code for the game board:

<div class="board">
  <div class="square" id="0"></div>
  <div class="square" id="1"></div>
  <div class="square" id="2"></div>
  <div class="square" id="3"></div>
  <div class="square" id="4"></div>
  <div class="square" id="5"></div>
  <div class="square" id="6"></div>
  <div class="square" id="7"></div>
  <div class="square" id="8"></div>
</div>

And here is the JavaScript code for the game logic:

let currentPlayer = "X";
let gameBoard = ["", "", "", "", "", "", "", "", ""];

function handleMove(square, index) {
  gameBoard[index] = currentPlayer;
  square.classList.add(currentPlayer);
  square.removeEventListener("click", handleClick);
  if (checkWin()) {
    displayResult(`${currentPlayer} wins!`);
  } else if (checkTie()) {
    displayResult("It's a tie!");
  } else {
    currentPlayer = currentPlayer === "X" ? "O" : "X";
    updatePlayer();
  }
}

function handleClick(event) {
  const square = event.target;
  const index = square.id;
  if (gameBoard[index] === "") {
    handleMove(square, index);
  }
}

function checkWin() {
  const winningCombos = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  return winningCombos.some((combo) => {
    return combo.every((index) => {
      return gameBoard[index] === currentPlayer;
    });
  });
}

function checkTie() {
  return gameBoard.every((square) => {
    return square !== "";
  });
}

function updatePlayer() {
  const player = document.getElementById("player");
  player.innerText = `Current Player: ${currentPlayer}`;
}

function displayResult(result) {
  const resultElement = document.getElementById("result");
  resultElement.innerText = result;
  const squares = document.querySelectorAll(".square");
  squares.forEach((square) => {
    square.removeEventListener("click", handleClick);
  });
}

function startGame() {
  const squares = document.querySelectorAll(".square");
  squares.forEach((square) => {
    square.addEventListener("click", handleClick);
  });
  updatePlayer();
}

startGame();

And here is the CSS code for the game board:

.board {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  height: 300px;
  border: 2px solid black;
}

.square {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  font-size: 5em;
  text-align: center;
  line-height: 100px;
}

.square.X {
  color: blue;
}

.square.O {
  color: red;
}

You can copy and paste these codes into your own HTML file to play the game. Have fun playing Tic Tac Toe!