Add easy bot option

Nati404 · May 25, 2024 · 927c973 · 927c973
1 parent 5d7f025
commit 927c973
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -9,13 +9,17 @@
 </head>
 <body>
     <div class = "container">
-        <h1 class="gameText">X to move</h1> 
+        <h1 class="gameText">X to play</h1> 
         <div class = "game">
             <div class = "grid-container">
 
             </div>
         </div>
+        <div class = "additionalButtons">
         <button class = "resetGame">Reset Game</button>
+        <button class = "twoPlayersButton">2 Players</button>
+        <button class = "easyBot">Easy Bot</button>
+        </div>
     </div>
 </body>
 </html>
diff --git a/script.js b/script.js
@@ -1,20 +1,31 @@
 const gridContainer = document.querySelector(".grid-container");
 const currentText = document.querySelector(".gameText");
 const resetButton = document.querySelector(".resetGame");
+const easyBotButton = document.querySelector(".easyBot");
+const twoPlayersButton = document.querySelector(".twoPlayersButton");
 const winningSequences = [[1,2,3],[4,5,6],[7,8,9],[1,4,7],[2,5,8],[3,6,9],[1,5,9],[3,5,7]];
-
+let possible
 let currentMove = 0;
+let isPlayingAgainstEasyBot = false;
 const xSymbolFile = "./images/xSymbol.png";
 const zeroSymbolFile = "./images/zeroSymbol.png";
+let possibleMoves;
+
+// Makes the program sleep for x millisecond
+function sleep(time){
+    return new Promise((resolve) => setTimeout(resolve, time));
+}
 
 function resetGame(){
+    possibleMoves = [];
     for(let i = 1; i <= 9; i++){
+        possibleMoves.push(i);
         const button = document.getElementById(`button${i}`);
         button.setAttribute("class", "empty");
         button.style.backgroundImage = "";
         currentMove = 0;
-        currentText.textContent = "X to move";
     }
+    currentText.textContent = "X to play";
     gridContainer.style.pointerEvents = "auto";
 }
 
@@ -74,9 +85,29 @@ function makeMove(button){
         currentText.textContent = `Game has ended, ${(gameStatus == 0) ? "X" : "0"} won!`;
         gridContainer.style.pointerEvents = "none";
     } else{
-    // Go to the next move
-    currentMove ^= 1;
-    currentText.textContent = `${(currentMove == 0) ? "X":"0"} to move`;
+        // Go to the next move
+        currentMove ^= 1;
+        currentText.textContent = `${(currentMove == 0) ? "X":"0"} to play`;
+        // If the easy bot is active, make a random possible move
+        if(isPlayingAgainstEasyBot){
+            if(currentMove == 1){
+                console.log(possibleMoves);
+                // Take out the human made moves from the list of possible moves
+                const idName = button.getAttribute("id");
+                const buttonIndex = idName[idName.length-1];
+                possibleMoves.splice(possibleMoves.indexOf(Number(buttonIndex)), 1);
+
+                // Wait 0.5s and then make a move and remove it from the list of possible moves
+                sleep(500).then( () => {
+                    const randomIndex = Math.round(Math.random() * (possibleMoves.length-1));
+                    const indexOfButton = possibleMoves[randomIndex];
+                    possibleMoves.splice(randomIndex, 1);
+                    console.log(indexOfButton);
+                    const buttonToBePlayed = document.getElementById(`button${indexOfButton}`);
+                    makeMove(buttonToBePlayed);
+                });
+            }
+        }
     }
 }
 
@@ -90,4 +121,19 @@ for(let i = 1; i <= 9; i++){
 }
 
 // Reset the game when the reset button is pressed
-resetButton.addEventListener("click", resetGame);
+resetButton.addEventListener("click", resetGame);
+
+// Enable the bot when the option is selected and restart the game
+easyBotButton.addEventListener("click", () => {
+    isPlayingAgainstEasyBot = true;
+    easyBotButton.style.backgroundColor = "lightBlue";
+    twoPlayersButton.style.backgroundColor = "lightGray";
+    resetGame();
+});
+
+twoPlayersButton.addEventListener("click", () => {
+    isPlayingAgainstEasyBot = false;
+    easyBotButton.style.backgroundColor = "lightGray";
+    twoPlayersButton.style.backgroundColor = "lightBlue";
+    resetGame();
+});
diff --git a/styles.css b/styles.css
@@ -6,12 +6,6 @@ body, html {
     align-items: center;
 }
 
-.resetGame{
-    margin-top: 10px;
-    width: 100px;
-    height: 60px;
-}
-
 .container{
     display: flex;
     flex-direction: column;
@@ -34,4 +28,20 @@ body, html {
 .grid-container button{
     width: 150px;
     height: 150px;
+}
+
+.additionalButtons{
+    display: flex;
+    column-gap: 30px;
+}
+
+.additionalButtons button{
+    margin-top: 10px;
+    width: 100px;
+    height: 60px;
+    background-color: lightgray;
+}
+
+.additionalButtons .twoPlayersButton{
+    background-color: lightblue;
 }