Ratheshan03 · Nikhildhasmana89 · Apr 2, 2026
diff --git a/Tic Tac Toe/index.html b/Tic Tac Toe/index.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Tic Tac Toe Pro</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="container">
+      <h1>🎮 Tic Tac Toe</h1>
+
+      <div id="setup">
+        <input type="text" id="playerX" placeholder="Player X Name" />
+        <input type="text" id="playerO" placeholder="Player O Name" />
+
+        <button class="start-btn" onclick="startGame('2')">2 Player</button>
+        <button class="ai-btn" onclick="startGame('1')">Play vs AI</button>
+      </div>
+
+      <div id="game" style="display: none">
+        <div class="scoreboard">
+          <span id="nameX">Player X</span>: <span id="scoreX">0</span> |
+          <span id="nameO">Player O</span>: <span id="scoreO">0</span> | Game:
+          <span id="gameCount">1</span>/5
+        </div>
+
+        <div class="series-result" id="seriesResult">
+          First to 3 wins the series 🎯
+        </div>
+
+        <div class="board" id="board"></div>
+
+        <h3 id="status"></h3>
+
+        <button onclick="resetGame()">Restart</button>
+      </div>
+    </div>
+
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/Tic Tac Toe/script.js b/Tic Tac Toe/script.js
@@ -0,0 +1,234 @@
+const board = document.getElementById("board");
+const statusText = document.getElementById("status");
+
+let cells = [];
+let currentPlayer = "X";
+let isGameRunning = true;
+let gameMode = "2";
+
+let scoreX = 0;
+let scoreO = 0;
+let totalGames = 1;
+
+let playerXName = "Player X";
+let playerOName = "Player O";
+
+// Start game
+function startGame(mode) {
+  gameMode = mode;
+
+  // Get player names
+  playerXName = document.getElementById("playerX").value || "Player X";
+
+  if (gameMode === "1") {
+    playerOName = "Computer 🤖";
+  } else {
+    playerOName = document.getElementById("playerO").value || "Player O";
+  }
+
+  // Show name on screen
+  document.getElementById("nameX").textContent = playerXName;
+  document.getElementById("nameO").textContent = playerOName;
+
+  // Hide setup and show game
+
+  document.getElementById("setup").style.display = "none";
+  document.getElementById("game").style.display = "block";
+
+  resetGame(true);
+}
+
+// Create board
+function createBoard() {
+  board.innerHTML = "";
+  cells = [];
+
+  for (let i = 0; i < 9; i++) {
+    let cell = document.createElement("div");
+    cell.classList.add("cell");
+
+    cell.addEventListener("click", function () {
+      handleMove(i);
+    });
+
+    board.appendChild(cell);
+    cells.push(cell);
+  }
+}
+
+// Handle player move
+
+function handleMove(index) {
+  if (!isGameRunning || cells[index].textContent !== "") return;
+
+  // Put X or O
+  cells[index].textContent = currentPlayer;
+  cells[index].classList.add(currentPlayer);
+
+  // Check win
+  if (checkWinner()) {
+    let winnerName = currentPlayer === "X" ? playerXName : playerOName;
+
+    statusText.textContent = winnerName + " Wins! 🎉";
+
+    updateScore(currentPlayer);
+    endRound();
+    return;
+  }
+
+  // Check draw
+  if (isBoardFull()) {
+    statusText.textContent = "Draw!";
+    endRound();
+    return;
+  }
+
+  // Switch player
+  if (currentPlayer === "X") {
+    currentPlayer = "O";
+  } else {
+    currentPlayer = "X";
+  }
+
+  // AI move
+  if (gameMode === "1" && currentPlayer === "O") {
+    setTimeout(makeAIMove, 500);
+  }
+}
+
+// AI Section
+
+function makeAIMove() {
+  let emptyCells = [];
+
+  // find empty cells
+  for (let i = 0; i < cells.length; i++) {
+    if (cells[i].textContent === "") {
+      emptyCells.push(i);
+    }
+  }
+
+  let randomIndex = emptyCells[Math.floor(Math.random() * emptyCells.length)];
+
+  handleMove(randomIndex);
+}
+
+// check winner section
+function checkWinner() {
+  const patterns = [
+    [0, 1, 2],
+    [3, 4, 5],
+    [6, 7, 8],
+    [0, 3, 6],
+    [1, 4, 7],
+    [2, 5, 8],
+    [0, 4, 8],
+    [2, 4, 6],
+  ];
+
+  for (let pattern of patterns) {
+    let a = pattern[0];
+    let b = pattern[1];
+    let c = pattern[2];
+
+    if (
+      cells[a].textContent !== "" &&
+      cells[a].textContent === cells[b].textContent &&
+      cells[a].textContent === cells[c].textContent
+    ) {
+      // Highlight winning cells
+      cells[a].classList.add("win");
+      cells[b].classList.add("win");
+      cells[c].classList.add("win");
+
+      return true;
+    }
+  }
+
+  return false;
+}
+
+// Draw section
+
+function isBoardFull() {
+  for (let cell of cells) {
+    if (cell.textContent === "") {
+      return false;
+    }
+  }
+  return true;
+}
+
+// Update score section
+
+function updateScore(player) {
+  if (player === "X") {
+    scoreX++;
+    document.getElementById("scoreX").textContent = scoreX;
+  } else {
+    scoreO++;
+    document.getElementById("scoreO").textContent = scoreO;
+  }
+}
+
+// End round
+
+function endRound() {
+  isGameRunning = false;
+
+  //If someone win 3 times or 5 games will end the game
+  if (scoreX === 3 || scoreO === 3 || totalGames === 5) {
+    setTimeout(showFinalResult, 500);
+    return;
+  }
+
+  setTimeout(() => {
+    totalGames++;
+    document.getElementById("gameCount").textContent = totalGames;
+    resetBoard();
+  }, 1000);
+}
+
+// Final result
+
+function showFinalResult() {
+  if (scoreX > scoreO) {
+    statusText.textContent = "🏆 " + playerXName + " Wins Series!";
+  } else if (scoreO > scoreX) {
+    statusText.textContent = "🏆 " + playerOName + " Wins Series!";
+  } else {
+    statusText.textContent = "Series Draw!";
+  }
+}
+
+// Reset Board
+
+function resetBoard() {
+  for (let cell of cells) {
+    cell.textContent = "";
+    cell.classList.remove("X", "O", "win");
+  }
+
+  currentPlayer = "X";
+  isGameRunning = true;
+  statusText.textContent = "";
+}
+
+// Reset Game
+
+function resetGame(fullReset = false) {
+  if (fullReset) {
+    scoreX = 0;
+    scoreO = 0;
+    totalGames = 1;
+
+    document.getElementById("scoreX").textContent = 0;
+    document.getElementById("scoreO").textContent = 0;
+    document.getElementById("gameCount").textContent = 1;
+  }
+
+  createBoard();
+  resetBoard();
+}
+
+createBoard();