colors

Abhilash-0322 · Apr 26, 2024 · e0c2805 · e0c2805
1 parent 6223c7e
commit e0c2805
Showing 1 changed file with 172 additions and 100 deletions.
diff --git a/tic.js b/tic.js
@@ -1,15 +1,82 @@
-let boxes=document.querySelectorAll(".box");
-let Reset=document.querySelector("#resetbutton");
-let turn0=true;
-let Body=document.querySelector("body");
-let newgame=document.querySelector("#newgame");
-let windialogue="<h1>CONGRATULATIONS \nWinner Is</h1>";
-let Div=document.createElement("div");
-let counter=0;
-let won=false;
+let boxes = document.querySelectorAll(".box");
+let Reset = document.querySelector("#resetbutton");
+let turn0 = true;
+let Body = document.querySelector("body");
+let newgame = document.querySelector("#newgame");
+let windialogue = "<h1>CONGRATULATIONS \nWinner Is</h1>";
+let Div = document.createElement("div");
+let counter = 0;
+let won = false;
+let color_val =10; Math.floor(Math.random() * 63);
+let colors_l = [
+  "crimson",
+  "blue",
+  "lime",
+  "red",
+  "green",
+  "orange",
+  "yellow",
+  "cyan",
+  "magenta",
+  "purple",
+  "pink",
+  "teal",
+  "gold",
+  "silver",
+  "brown",
+  "black",
+  "white",
+  "gray",
+  "darkblue",
+  "darkgreen",
+  "darkred",
+  "darkorange",
+  "darkcyan",
+  "darkmagenta",
+  "darkpurple",
+  "darkpink",
+  "darkteal",
+  "darkgoldenrod",
+  "darkslategray",
+  "indigo",
+  "darkolivegreen",
+  "darkslateblue",
+  "darkseagreen",
+  "darkturquoise",
+  "darkviolet",
+  "deeppink",
+  "mediumblue",
+  "mediumseagreen",
+  "mediumslateblue",
+  "mediumspringgreen",
+  "mediumturquoise",
+  "mediumvioletred",
+  "navy",
+  "olive",
+  "orangered",
+  "rosybrown",
+  "royalblue",
+  "saddlebrown",
+  "salmon",
+  "sandybrown",
+  "seagreen",
+  "sienna",
+  "skyblue",
+  "slateblue",
+  "springgreen",
+  "steelblue",
+  "tan",
+  "thistle",
+  "tomato",
+  "turquoise",
+  "violet",
+  "wheat",
+  "yellowgreen",
+];
+let color_r;
 // let Toggle=document.getElementById("toggle");
-const aiPlayer = 'X';
-let AI=true;
+const aiPlayer = "X";
+let AI = true;
 // Toggle.addEventListener("click",()=>{
 //     if(AI){
 //         AI=false;
@@ -21,49 +88,49 @@ let AI=true;
 // })
 // Function to make the AI move
 const makeAIMove = () => {
-    // For simplicity, let's make a random move in an empty spot
+  // For simplicity, let's make a random move in an empty spot
 
-    // Filter out the empty spots
-    const emptySpots = Array.from(boxes).filter(box => box.innerText === '');
+  // Filter out the empty spots
+  const emptySpots = Array.from(boxes).filter((box) => box.innerText === "");
 
-    // Choose a random empty spot
-    const randomIndex = Math.floor(Math.random() * emptySpots.length);
-    const randomEmptyBox = emptySpots[randomIndex];
+  // Choose a random empty spot
+  const randomIndex = Math.floor(Math.random() * emptySpots.length);
+  const randomEmptyBox = emptySpots[randomIndex];
 
-    // Make the AI move
-    randomEmptyBox.innerText = aiPlayer;
-    randomEmptyBox.disabled = true;
-    turn0=true;
-    // Check for a winner after the AI move
-    checkwinner();
+  // Make the AI move
+  randomEmptyBox.innerText = aiPlayer;
+  randomEmptyBox.disabled = true;
+  turn0 = true;
+  // Check for a winner after the AI move
+  checkwinner();
 };
-const winPatterns=[
-    [0,1,2],
-    [0,3,6],
-    [0,4,8],
-    [1,4,7],
-    [2,5,8],
-    [2,4,6],
-    [3,4,5],
-    [6,7,8]
-]
-function modeAI(){
-    // makeAIMove();
-    boxes.forEach((box)=>{
-        box.addEventListener("click",()=>{
-            console.log("box was clicked");
-            if(turn0){
-                box.innerHTML="0";
-                turn0=false;
-            }
-            box.disabled=true;
-             // AI move after player's move
-            checkwinner();
-            if(!won){
-                makeAIMove();
-            }
-        })
-    })
+const winPatterns = [
+  [0, 1, 2],
+  [0, 3, 6],
+  [0, 4, 8],
+  [1, 4, 7],
+  [2, 5, 8],
+  [2, 4, 6],
+  [3, 4, 5],
+  [6, 7, 8],
+];
+function modeAI() {
+  // makeAIMove();
+  boxes.forEach((box) => {
+    box.addEventListener("click", () => {
+      console.log("box was clicked");
+      if (turn0) {
+        box.innerHTML = "0";
+        turn0 = false;
+      }
+      box.disabled = true;
+      // AI move after player's move
+      checkwinner();
+      if (!won) {
+        makeAIMove();
+      }
+    });
+  });
 }
 // function modeMutiplayer(){
 //     boxes.forEach((box)=>{
@@ -82,65 +149,70 @@ function modeAI(){
 //         })
 //     })
 // }
-const Newgame=()=>{
-    won=false;
-    counter=0;
-    newgame.style.display="none";
-    Div.style.display="none";
-    boxes.forEach((box)=>{
-    box.disabled=false;
-    box.innerText="";
-    })
-    makeAIMove();
-}
-newgame.addEventListener("click",()=>{
-    Newgame();
+const Newgame = () => {
+  won = false;
+  counter = 0;
+  newgame.style.display = "none";
+  Div.style.display = "none";
+  boxes.forEach((box) => {
+    box.disabled = false;
+    color_val=Math.floor(Math.random() * 63);
+    color_r=colors_l[color_val];
+    box.style.backgroundColor = color_r;
+    box.innerText = "";
+  });
+  makeAIMove();
+};
+newgame.addEventListener("click", () => {
+  Newgame();
 });
-Reset.addEventListener("click",()=>{
-    Newgame();
+Reset.addEventListener("click", () => {
+  Newgame();
 });
-const winEvents=()=>{
-    console.log("We GOT THE WINNER");
-}
-const checkwinner=()=>{
-    counter++;
-    for(let pattern of winPatterns){
-    console.log(pattern[0],pattern[1],pattern[2]);
-    console.log(boxes[pattern[0]].innerText,boxes[pattern[1]].innerText,boxes[pattern[2]].innerText);
-    if(counter===9 && !won){
-        Body.appendChild(Div).innerHTML="<h1>GAME HAS BEEN DRAWN</h1>";
-        Div.style.display="unset";
-        newgame.style.display="unset";
-        console.log("Drawn");
-    }
+const winEvents = () => {
+  console.log("We GOT THE WINNER");
+};
+const checkwinner = () => {
+  counter++;
+  for (let pattern of winPatterns) {
+    console.log(pattern[0], pattern[1], pattern[2]);
     console.log(
-        boxes[pattern[0]],
-        boxes[pattern[1]],
-        boxes[pattern[2]]
-        );
-        let posval1=boxes[pattern[0]].innerText;
-        let posval2=boxes[pattern[1]].innerText;
-        let posval3=boxes[pattern[2]].innerText;
-        if (posval1 !==""&& posval2 !=="" && posval3!==""){
-            if(posval1==posval2&&posval2==posval3){
-                winEvents();
-                Body.appendChild(Div).innerHTML=`<h1>CONGRATULATIONS \n</h1> <h2> ${posval1} Is Winner</h2>`;
-                newgame.style.display="unset";
-                Div.style.display="unset";
-                won=true;
-                boxes.forEach((box)=>{
-                    box.disabled=true;
-                })
-            }
-        }
+      boxes[pattern[0]].innerText,
+      boxes[pattern[1]].innerText,
+      boxes[pattern[2]].innerText
+    );
+    if (counter === 9 && !won) {
+      Body.appendChild(Div).innerHTML = "<h1>GAME HAS BEEN DRAWN</h1>";
+      Div.style.display = "unset";
+      newgame.style.display = "unset";
+      console.log("Drawn");
+    }
+    console.log(boxes[pattern[0]], boxes[pattern[1]], boxes[pattern[2]]);
+    let posval1 = boxes[pattern[0]].innerText;
+    let posval2 = boxes[pattern[1]].innerText;
+    let posval3 = boxes[pattern[2]].innerText;
+    if (posval1 !== "" && posval2 !== "" && posval3 !== "") {
+      if (posval1 == posval2 && posval2 == posval3) {
+        winEvents();
+        Body.appendChild(
+          Div
+        ).innerHTML = `<h1>CONGRATULATIONS \n</h1> <h2> ${posval1} Is Winner</h2>`;
+        newgame.style.display = "unset";
+        Div.style.display = "unset";
+        won = true;
+        boxes.forEach((box) => {
+          box.disabled = true;
+        });
+      }
     }
+  }
 };
 modeAI();
 // function selectmode(){
 // if(AI){
 //     modeAI();
 // }
 // else{
-//  modeMutiplayer();   
+//  modeMutiplayer();
+// }
 // }
-// }