<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>tic-tac-toe</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>tic-tac-toe!</h1>
  <div id="game">
    <div class="cell" data-index="0"></div>
    <div class="cell" data-index="1"></div>
    <div class="cell" data-index="2"></div>
    <div class="cell" data-index="3"></div>
    <div class="cell" data-index="4"></div>
    <div class="cell" data-index="5"></div>
    <div class="cell" data-index="6"></div>
    <div class="cell" data-index="7"></div>
    <div class="cell" data-index="8"></div>
  </div>
  <div id="result"></div>
  <button id="restart">Restart</button>
  <script src="script.js"></script>
</body>
</html>
/* styles.css */
body {
  font-family: Arial, sans-serif;
  text-align: center;
  margin: 0;
  padding: 20px;
  background: linear-gradient(135deg, #b3e5fc, #e1f5fe);
  background-size: 400% 400%;
  animation: gradientBG 10s ease infinite;
}

@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

h1 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: #333;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

#game {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-gap: 10px;
  justify-content: center;
}

.cell {
  width: 100px;
  height: 100px;
  background-color: #ffffff;
  border: 2px solid #333;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}

.cell:hover {
  background-color: #bbdefb;
  transform: scale(1.1);
}

#result {
  margin-top: 20px;
  font-size: 1.5rem;
  font-weight: bold;
  color: #444;
}

#restart {
  margin-top: 10px;
  padding: 10px 20px;
  font-size: 1rem;
  border: none;
  background-color: #0288d1;
  color: #FFFFFFF;
  cursor: paint;
  border-radius: 5px;
  transition: background-color 0.3s;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
}

#restart:hover {
  background-color: #0277bd;
}
// script.js

const cells = document.querySelectorAll(".cell");
const resultDisplay = document.getElementById("result");
const restartButton = document.getElementById("restart");

let currentPlayer = "X";
let board = ["", "", "", "", "", "", "", "", ""]; // Empty board
let gameActive = true;

// Winning combinations
const winPatterns = [
  [0, 1, 2], // Row 1
  [3, 4, 5], // Row 2
  [6, 7, 8], // Row 3
  [0, 3, 6], // Column 1
  [1, 4, 7], // Column 2
  [2, 5, 8], // Column 3
  [0, 4, 8], // Diagonal 1
  [2, 4, 6], // Diagonal 2
];

// Handle cell click
function handleCellClick(e) {
  const cell = e.target;
  const index = cell.getAttribute("data-index");

  if (board[index] !== "" || !gameActive) {
    return; // Ignore if cell is already taken or game is over
  }

  board[index] = currentPlayer; // Update board
  cell.textContent = currentPlayer; // Display current player's symbol
  checkWin(); // Check for a win or draw
  currentPlayer = currentPlayer === "X" ? "O" : "X"; // Switch player
}

// Check for a win or a draw
function checkWin() {
  let winner = null;

  for (const pattern of winPatterns) {
    const [a, b, c] = pattern;
    if (board[a] && board[a] === board[b] && board[a] === board[c]) {
      winner = board[a];
      break;
    }
  }

  if (winner) {
    resultDisplay.textContent = `${winner} wins!`;
    gameActive = false;
    return;
  }

  if (!board.includes("")) {
    resultDisplay.textContent = "It's a draw!";
    gameActive = false;
    return;
  }
}

// Restart the game
function restartGame() {
  board = ["", "", "", "", "", "", "", "", ""];
  gameActive = true;
  currentPlayer = "X";
  resultDisplay.textContent = "";
  cells.forEach((cell) => (cell.textContent = ""));
}

// Add event listeners
cells.forEach((cell) => cell.addEventListener("click", handleCellClick));
restartButton.addEventListener("click", restartGame);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.