apna-college · rushi-38 · Jan 31, 2026
diff --git a/apnacollege-deltaprojects/README.md b/apnacollege-deltaprojects/README.md
@@ -0,0 +1 @@
+# tic-tac-toe-game
diff --git a/apnacollege-deltaprojects/board.html b/apnacollege-deltaprojects/board.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Lets Play friends.....</title>
+    <link rel="icon" href="tictactoeicon.png">
+    <link rel="stylesheet" href="style.css">
+
+</head>
+
+<body>
+
+
+    <div class="board">
+        <div class="container">
+            <button class="btn"></button>
+            <button class="btn"></button>
+            <button class="btn"></button>
+            <button class="btn"></button>
+            <button class="btn"></button>
+            <button class="btn"></button>
+            <button class="btn"></button>
+            <button class="btn"></button>
+            <button class="btn"></button>
+        </div>
+    </div>
+    <script src="script.js"></script>
+
+
+
+
+
+
+</body>
+
+</html>
diff --git a/apnacollege-deltaprojects/board2.html b/apnacollege-deltaprojects/board2.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Lets Play with computer.....</title>
+    <link rel="icon" href="tictactoeicon.png">
+    <link rel="stylesheet" href="style.css">
+
+</head>
+
+<body>
+
+
+    <div class="board">
+        <div class="container">
+            <button class="btn"></button>
+            <button class="btn"></button>
+            <button class="btn"></button>
+            <button class="btn"></button>
+            <button class="btn"></button>
+            <button class="btn"></button>
+            <button class="btn"></button>
+            <button class="btn"></button>
+            <button class="btn"></button>
+        </div>
+    </div>
+    <script src="pvc.js"></script>
+
+
+
+
+
+
+</body>
+
+</html>
diff --git a/apnacollege-deltaprojects/index.html b/apnacollege-deltaprojects/index.html
@@ -0,0 +1,35 @@
+<!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 -rushi38
+    </title>
+    <link rel="icon" href="tictactoeicon.png">
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="home">
+        <img src="tictactoetext.jpg" alt="Tic Tac Toe">
+        <div class="buttons">
+          <button class="option 1"> <a href="board.html">play with friend</a></button>
+           <button class ="option 2"><a href="board2.html">play with computer</a></button>
+        </div>
+    </div>
+
+   <!-- <script>
+  function startGame(file) {
+    localStorage.setItem("gameMode", file);
+    window.location.href = "board.html";
+  }
+</script> -->
+
+
+
+
+</body>
+
+</html>
diff --git a/apnacollege-deltaprojects/pvc.js b/apnacollege-deltaprojects/pvc.js
@@ -0,0 +1,225 @@
+const cells = document.querySelectorAll(".btn");
+
+let board = ["", "", "", "", "", "", "", "", ""];
+let gameover = false;
+let currentPlayer = "x";
+
+const winpattern = [
+    [0, 1, 2],
+    [3, 4, 5],
+    [6, 7, 8],
+    [0, 3, 6],
+    [1, 4, 7],
+    [2, 5, 8],
+    [0, 4, 8],
+    [2, 4, 6]
+];
+
+cells.forEach((cell, index) => {
+    cell.addEventListener("click", () => {
+        if (currentPlayer !== "x") return;
+        turn(cell, index);
+    });
+});
+
+function turn(cell, index) {
+
+    console.log(cell);
+    console.log("cell");
+    if (board[index] !== "" || gameover) return;
+
+
+
+    board[index] = currentPlayer;
+
+    renderSymbol(cell);
+
+    if (checkwinner()) {
+          const winningPattern = winpattern.find(pattern => {
+        const [a, b, c] = pattern;
+        return board[a] && board[a] === board[b] && board[a] === board[c];
+    });
+
+    Highlightwin(winningPattern);
+
+
+    requestAnimationFrame(() => {
+        setTimeout(() => {
+            popup(`winner of this match is ${currentPlayer}`);
+        }, 1500);
+    });              
+
+         gameover = true;  
+         setTimeout(resetfun,3500) 
+        return;
+    }
+
+    if (checkdraw()) {
+        popup("its draw");
+        gameover = true;
+        setTimeout(resetfun, 3100);
+        return;
+    }
+
+   currentPlayer="o";
+   setTimeout(computerwin,600);
+   playername(currentPlayer);   
+}
+function computerwin(){
+
+  if (gameover) return;
+
+  let emptyIndexes = board
+    .map((v, i) => v === "" ? i : null)
+    .filter(v => v !== null);
+
+  if (emptyIndexes.length === 0) return;
+
+  let move = emptyIndexes[Math.floor(Math.random() * emptyIndexes.length)];
+  board[move] = "o";
+  renderSymbol(cells[move]);
+
+  if (checkwinner()) {
+    popup("Computer wins!");
+    gameover = true;
+    setTimeout(resetfun, 3000);
+    return;
+  }
+  currentPlayer='x';
+  playername(currentPlayer);   
+}
+
+function popup(content) {
+    const popups = document.createElement("div");
+
+    const glowColor = currentPlayer === "x" ? "red" : "dodgerblue";
+
+    popups.innerHTML = `<span>${content} </span>`;
+
+    popups.style.position = "fixed";
+    popups.style.top = "50%";
+    popups.style.left = "50%";
+    popups.style.transform = "translate(-50%, -50%)";
+
+    /* responsive sizing */
+    popups.style.width = "min(85vw, 360px)";
+    popups.style.padding = "clamp(16px, 4vw, 30px)";
+
+    popups.style.display = "flex";
+    popups.style.justifyContent = "center";
+    popups.style.alignItems = "center";
+    popups.style.textAlign = "center";
+
+    popups.style.background = "rgba(0,0,0,0.85)";
+    popups.style.color = "white";
+    popups.style.fontWeight = "700";
+    popups.style.fontSize = "clamp(18px, 5vw, 28px)";
+    popups.style.lineHeight = "1.4";
+
+    popups.style.borderRadius = "clamp(12px, 4vw, 18px)";
+    popups.style.boxShadow = `
+        0 0 15px ${glowColor},
+        0 0 35px ${glowColor}
+    `;
+
+    popups.style.zIndex = "9999";
+
+    document.body.appendChild(popups);
+
+    setTimeout(() => popups.remove(), 3000);
+}
+
+function playername(pname) {
+  let name = document.getElementById("player-indicator");
+
+  if (!name) {
+    name = document.createElement("div");
+    name.id = "player-indicator";
+    document.body.appendChild(name);
+  }
+
+  const glowColor = pname === "x" ? "red" : "dodgerblue";
+  name.textContent = `${pname}'s turn`;
+
+  const isMobile = window.innerWidth <= 600;
+
+  name.style.position = "fixed";
+  name.style.background = "rgba(0,0,0,0.85)";
+  name.style.color = "white";
+  name.style.fontWeight = "700";
+  name.style.textAlign = "center";
+  name.style.borderRadius = "12px";
+  name.style.boxShadow = `0 0 12px ${glowColor}`;
+  name.style.zIndex = "999";
+
+  if (isMobile) {
+    /* 📱 Mobile styles */
+    name.style.bottom = "16px";
+    name.style.top = "auto";
+    name.style.left = "50%";
+    name.style.transform = "translateX(-50%)";
+
+    name.style.width = "auto";
+    name.style.padding = "8px 16px";
+    name.style.fontSize = "14px";
+  } 
+}
+
+
+function renderSymbol(cell) {
+    cell.textContent = currentPlayer;
+    cell.style.fontSize = "80px";
+    cell.style.fontWeight = "bold";
+    cell.style.borderRadius = "10px";
+    cell.style.transition = "all 0.8s ease";
+
+    if (currentPlayer == "x") {
+        cell.style.color = "red";
+        cell.style.boxShadow = "0 0 30px red";
+        cell.style.textShadow = "0 0 20px red";
+    } else {
+        cell.style.color = "blue";
+        cell.style.boxShadow = "0 0 30px blue";
+        cell.style.textShadow = "0 0 20px blue";
+    }
+}
+
+function checkdraw() {
+    return board.every(cell => cell !== "");
+}
+
+function checkwinner() {
+    return winpattern.some(pattern => {
+        const [a, b, c] = pattern;
+        return (
+            board[a] &&
+            board[a] == board[b] &&
+            board[a] == board[c]
+
+        );
+    });
+}
+
+function resetfun() {
+    board = ["", "", "", "", "", "", "", "", ""];
+    gameover = false;
+    currentPlayer = "x";
+
+    cells.forEach(cell => {
+        cell.textContent = "";
+        cell.style.boxShadow = "0 0 30px rgba(244, 105, 105, 0.5)";
+        cell.style.textShadow = "none";
+        cell.style.border = "none";
+
+    });
+}
+function Highlightwin(pattern) {
+   pattern.forEach(index => {
+        cells[index].style.boxShadow = "0 0 20px gold";
+        cells[index].style.border = "3px solid gold";
+    });
+
+
+}
+
+