Fix game against machine now machine choose random cell

assets/js/scripts.js

@@ -12,23 +12,23 @@ let board = ["", "", "", "", "", "", "", "", ""];
 
 // Create an array with all viable winning combinations.
 const winningCombinations = [
-    [0, 1, 2],
-    [3, 4, 5],
-    [6, 7, 8],
-    [0, 3, 6],
-    [1, 4, 7],
-    [2, 5, 8],
-    [0, 4, 8],
-    [2, 4, 6]
+  [0, 1, 2],
+  [3, 4, 5],
+  [6, 7, 8],
+  [0, 3, 6],
+  [1, 4, 7],
+  [2, 5, 8],
+  [0, 4, 8],
+  [2, 4, 6]
 ];
 
 // Identify who the current player is.
 let currentPlayer = "X";
 
 // Adds an event listener to each cell.
 for (let i = 1; i <= 9; i++) {
-    const cell = document.getElementById(`cell${i}`);
-    cell.addEventListener("click", handleCellClick);
+  const cell = document.getElementById(`cell${i}`);
+  cell.addEventListener("click", handleCellClick);
 }
 
 // Add event listeners to the game mode selection buttons.
@@ -48,70 +48,112 @@ function handleGameModeSelection(mode) {
 
 // Function to deal with a cell's click
 function handleCellClick(event) {
-    // If the game is not in progress or the cell has already been preenchimed, return.
-    if (!gameInProgress || event.target.textContent !== "") return;
+  // If the game is not in progress or the cell has already been filled, return.
+  if (!gameInProgress || event.target.textContent !== "") return;
+
+  // Add the current player's icon to the board array
+  event.target.textContent = currentPlayer;
+  board[parseInt(event.target.id.slice(4)) - 1] = currentPlayer;
+
+  // Check to see if the current player won.
+  if (checkWin(currentPlayer)) {
+    // Increases the winner's point total
+    currentPlayer === "X" ? playerXScore++ : playerOScore++;
+
+    // Updates the page's punctuation
+    updateScores();
+
+    // If this was the fifth round, the game concludes, so the next round is started.
+    if (currentRound === 5) {
+      endGame();
+    } else {
+      startNextRound();
+    }
+  } else {
+    // If no one won as of yet, the current player is changed.
+    currentPlayer = currentPlayer === "X" ? "O" : "X";
+    if (gameMode === "playerVsMachine" && currentPlayer === "O") {
+      computerMove();
+    }
+  }
+}
+
+// Adapted from code by lando464 on CodePen: https://codepen.io/lando464/pen/BPGEKO
+function computerMove() {
+  var emptyCells = [];
+  var random;
+
+  for (var i = 0; i < board.length; i++) {
+    if (board[i] == '') {
+      emptyCells.push(i);
+    }
+    }
 
-    // Add the current player's icon to the cymbidium and the table's array
-    event.target.textContent = currentPlayer;
-    board[parseInt(event.target.id.slice(4)) - 1] = currentPlayer;
+    random = Math.floor(Math.random() * emptyCells.length);
+    board[emptyCells[random]] = currentPlayer;
+    document.getElementById(`cell${emptyCells[random] + 1}`).textContent = currentPlayer;
 
-    // Check to see if the current player won.
+    // Check if computer won
     if (checkWin(currentPlayer)) {
-      // Increases the winner's point total
-      currentPlayer === "X" ? playerXScore++ : playerOScore++;
-
-      // Updates the page's punctuation
-      updateScores();
-
-      // If this was the fifth round, the game concludes, so the next round is started.
-      if (currentRound === 5) {
+    playerOScore++;
+    updateScores();
+    if (currentRound === 5) {
         endGame();
-      } else {
+    } else {
         startNextRound();
-      }
+    }
     } else {
-      // If no one won as of yet, the current player is changed.
-      currentPlayer = currentPlayer === "X" ? "O" : "X";
+    currentPlayer = "X";
     }
 }
 
 // Function to determine whether a player won
 function checkWin(player) {
     return winningCombinations.some(combination =>
-      combination.every(index => board[index] === player)
+    combination.every(index => board[index] === player)
     );
-}
-
-// function to prepare the game for the upcoming round
-function startNextRound() {
-// Clean all
-board = ["", "", "", "", "", "", "", "", ""];
-for (let i = 1; i <= 9; i++) {
-    document.getElementById(`cell${i}`).textContent = "";
-}
+    }
+
+    // function to prepare the game for the upcoming round
+    function startNextRound() {
+    // Clear the board
+    board = ["", "", "", "", "", "", "", "", ""];
+    for (let i = 1; i <= 9; i++) {
+        document.getElementById(`cell${i}`).textContent = "";
 
+    }
+
 // Change the player
 currentPlayer = currentPlayer === "X" ? "O" : "X";
-
+    
 // Increment current round
 currentRound++;
+
+// If machine should start the round
+if (gameMode === "playerVsMachine" && currentPlayer === "O") {
+    computerMove();
+    }
 }
-
-// function to stop the game after 5 round
+    
+// function to stop the game after 5 rounds
 function endGame() {
 gameInProgress = false;
-
+    
 if (playerXScore > playerOScore) {
-alert("Player X wins the game!");
-} else if (playerOScore > playerXScore) {
-alert("Player O wins the game!");
-} else {
-alert("The game is a draw!");
-}
-}
 
+    alert("Player X wins the game!");
+    } else if (playerOScore > playerXScore) {
+
+        alert("Player O wins the game!");
+
+        } else {
+
+            alert("The game is a draw!");
+    }
+}
+
 // Function to update the scores
 function updateScores() {
-document.getElementById("playerXScore").textContent = playerXScore;
-document.getElementById("playerOScore").textContent = playerOScore;
+    document.getElementById("playerXScore").textContent = playerXScore;
+    document.getElementById("playerOScore").textContent = playerOScore;
 }