Breaking News: Grepper is joining You.com. Read the official announcement!

code for tic tac toi website app complete working with html css and Javascript logic

Abhishek Patange answered on August 27, 2023 Popularity 1/10 Helpfulness 1/10

answer code for tic tac toi website app complete working with html css and Javascript logic

code for tic tac toi website app complete working with html css and Javascript logic

Comment

<!DOCTYPE html>
<html>
<head>
  <title>Tic Tac Toe</title>
  <style>
  .board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  margin-bottom: 10px;
  }
  .cell {
  width: 100px;
  height: 100px;
  background-color: lightgray;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  cursor: pointer;
  }
  .cell:hover {
  background-color: gray;
  }
  .message {
  font-size: 24px;
  margin-bottom: 10px;
  }
  </style>
</head>
<body>
  <h1>Tic Tac Toe</h1>
  <div class="board"></div>
  <div class="message"></div>

  <script>
  const board = document.querySelector('.board');
  const cells = [];
  let currentPlayer = 'X';
  let gameActive = true;

  // Create the game board
  for (let i = 0; i < 9; i++) {
  const cell = document.createElement('div');
  cell.classList.add('cell');
  cell.addEventListener('click', () => handleCellClick(i));
  board.appendChild(cell);
  cells.push(cell);
  }

  // Handle cell click event
  function handleCellClick(cellIndex) {
  if (!gameActive || cells[cellIndex].textContent !== '') {
  return;
  }

  cells[cellIndex].textContent = currentPlayer;
  cells[cellIndex].style.backgroundColor = 'lightblue';

  if (checkWin()) {
  gameActive = false;
  document.querySelector('.message').textContent = `${currentPlayer} wins!`;
  return;
  }

  if (checkDraw()) {
  gameActive = false;
  document.querySelector('.message').textContent = 'It\'s a draw!';
  return;
  }

  currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
  }

  // Check for a win
  function checkWin() {
  const winningCombinations = [
  [0, 1, 2], [3, 4, 5], [6, 7, 8], // Rows
  [0, 3, 6], [1, 4, 7], [2, 5, 8], // Columns
  [0, 4, 8], [2, 4, 6] // Diagonals
  ];

  for (let combination of winningCombinations) {
  const [a, b, c] = combination;
  if (
  cells[a].textContent === currentPlayer &&
  cells[b].textContent === currentPlayer &&
  cells[c].textContent === currentPlayer
  ) {
  cells[a].style.backgroundColor = 'lightgreen';
  cells[b].style.backgroundColor = 'lightgreen';
  cells[c].style.backgroundColor = 'lightgreen';
  return true;
  }
  }

  return false;
  }

  // Check for a draw
  function checkDraw() {
  return [...cells].every(cell => cell.textContent !== '');
  }
  </script>
</body>
</html>

Popularity 1/10 Helpfulness 1/10 Language html

Source: www.studocu.com

Tags: css html javascript logic tac

Link to this answer
Share Copy Link

Contributed on Aug 27 2023

Abhishek Patange

0 Answers Avg Quality 2/10

code for tic tac toi website app complete working with html css and Javascript logic

Contents

More Related Answers

code for tic tac toi website app complete working with html css and Javascript logic

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.