Added single player mode with AI

css/style.css

@@ -6,12 +6,12 @@ body {
   height: 100vh;
   background: url("https://blenderartists.org/uploads/default/original/4X/0/5/f/05fb495b0f4ce4fb15ddc0cd136250a6aaae67c2.jpeg")
     no-repeat center center fixed;
-  background-size: cover; /* This makes the image cover the entire background */
+  background-size: cover; 
   font-family: "Arial", sans-serif;
   color: #fff;
 }
 
-/* Rest of your CSS remains unchanged */
+
 
 #currentPlayer {
   position: absolute;
@@ -63,10 +63,10 @@ body {
 }
 
 .cell.o {
-  color: #ff4f94; /* Neon Pink */
+  color: #ff4f94; 
   text-shadow: 0 0 10px rgba(255, 79, 148, 0.7);
-  font-weight: 900; /* Extra bold for O */
-  font-size: 3em; /* Optional: Increase font size for more emphasis */
+  font-weight: 900; 
+  font-size: 3em; 
 }
 
 .cell:hover {
@@ -109,6 +109,19 @@ body {
   box-shadow: 0 0 15px rgba(0, 255, 127, 0.5);
 }
 
+#modeToggleButton {
+  margin-top: 20px;
+  padding: 10px 20px;
+  background-color: #00ff7f;
+  color: #1e1e2f;
+  border: none;
+  border-radius: 5px;
+  font-size: 1.2em;
+  cursor: pointer;
+  transition: background-color 0.3s, transform 0.3s;
+  box-shadow: 0 0 15px rgba(0, 255, 127, 0.5);
+}
+
 #buttonDiv {
   display: flex;
   justify-content: center;

index.html

@@ -12,7 +12,8 @@
     <div id="buttonDiv">
       <button id="resetButton">Play Again</button>
       <button id="soundButton">Sound: ON</button>
+      <button id="modeToggleButton">Mode: Two Player</button>
     </div>
-    <script src="js/script.js"></script>
+    <script src="js/script.js" defer></script>
   </body>
 </html>

js/script.js

@@ -2,11 +2,13 @@ const gameBoard = document.getElementById("gameBoard");
 const resultElement = document.getElementById("result");
 const currentPlayerDisplay = document.getElementById("currentPlayer");
 const soundButton = document.getElementById("soundButton");
+const modeToggleButton = document.getElementById("modeToggleButton");
 
 let currentPlayer = "X";
 let gameIsOver = false;
+let isSinglePlayerMode = false; // New variable to toggle between single and two-player mode
 
-//sound-effects"
+// Sound effects
 const backgroundSound = new Audio("sounds/background.wav");
 const clickSound = new Audio("sounds/click.wav");
 const winSound = new Audio("sounds/win.wav");
@@ -18,30 +20,36 @@ backgroundSound.play();
 soundButton.addEventListener("click", () => {
   if (backgroundSound.paused) {
     backgroundSound.play();
-    soundButton.textContent = "Sound: On";
+    soundButton.textContent = "Sound: ON";
   } else {
     backgroundSound.pause();
-    soundButton.textContent = "Sound: Off";
+    soundButton.textContent = "Sound: OFF";
   }
 });
 
+modeToggleButton.addEventListener("click", () => {
+  isSinglePlayerMode = !isSinglePlayerMode;
+  modeToggleButton.textContent = isSinglePlayerMode ? "Mode: Single Player" : "Mode: Two Player";
+  resetGame(); 
+});
+
 function createBoard() {
   for (let i = 0; i < 9; i++) {
     const cell = document.createElement("div");
     cell.classList.add("cell");
     cell.addEventListener("click", handleCellClick);
     gameBoard.appendChild(cell);
   }
-  updateCurrentPlayerDisplay(); // Show the initial player
+  updateCurrentPlayerDisplay(); 
 }
 
 function handleCellClick(event) {
-  clickSound.play();
+  if (gameIsOver) return;
+
   const cell = event.target;
-  if (!cell.textContent && !gameIsOver) {
+  if (!cell.textContent) {
+    clickSound.play();
     cell.textContent = currentPlayer;
-
-    // Add class for styling based on current player
     cell.classList.add(currentPlayer.toLowerCase());
 
     if (checkWinner()) {
@@ -52,14 +60,37 @@ function handleCellClick(event) {
       gameIsOver = true;
     } else {
       currentPlayer = currentPlayer === "X" ? "O" : "X";
-      updateCurrentPlayerDisplay(); // Update display after each turn
+      updateCurrentPlayerDisplay();
+
+      if (isSinglePlayerMode && currentPlayer === "O") {
+        setTimeout(aiMove, 500); 
+      }
+    }
+  }
+}
+
+function aiMove() {
+  const availableCells = Array.from(gameBoard.children).filter(cell => !cell.textContent);
+  if (availableCells.length > 0) {
+    const randomCell = availableCells[Math.floor(Math.random() * availableCells.length)];
+    randomCell.textContent = currentPlayer;
+    randomCell.classList.add(currentPlayer.toLowerCase());
+
+    if (checkWinner()) {
+      resultElement.textContent = `${currentPlayer} wins!`;
+      gameIsOver = true;
+    } else if (isBoardFull()) {
+      resultElement.textContent = "It's a draw!";
+      gameIsOver = true;
+    } else {
+      currentPlayer = currentPlayer === "X" ? "O" : "X";
+      updateCurrentPlayerDisplay();
     }
   }
 }
 
 function updateCurrentPlayerDisplay() {
   currentPlayerDisplay.textContent = `Current Player: ${currentPlayer}`;
-  console.log("Current player:", currentPlayer);
 }
 
 function checkWinner() {
@@ -91,23 +122,18 @@ function checkWinner() {
 }
 
 function isBoardFull() {
-  for (let i = 0; i < gameBoard.children.length; i++) {
-    if (gameBoard.children[i].textContent === "") {
-      return false;
-    }
-  }
-  return true;
+  return Array.from(gameBoard.children).every(cell => cell.textContent !== "");
 }
 
 function resetGame() {
   currentPlayer = "X";
   gameIsOver = false;
   resultElement.textContent = "";
-  updateCurrentPlayerDisplay(); // Reset display on game reset
+  updateCurrentPlayerDisplay();
 
-  for (let i = 0; i < gameBoard.children.length; i++) {
-    gameBoard.children[i].textContent = "";
-    gameBoard.children[i].classList.remove("x", "o"); // Remove the classes
+  for (let cell of gameBoard.children) {
+    cell.textContent = "";
+    cell.classList.remove("x", "o");
   }
 }