Simon

JS/Simon Says/app.js

@@ -1,82 +1,133 @@
-let gameSeq = [];
-let userSeq = [];
-
-let btns = ["yellow", "red", "purple", "green"];
-
-let started = false;
-let level = 0;
-
-let h2 = document.querySelector("h2");
-
-document.addEventListener("keypress", function () {
-  if (started == false) {
-    console.log("game is started");
-    started = true;
+//Initial References
+const countValue = document.getElementById("count");
+const colorPart = document.querySelectorAll(".color-part");
+const container = document.querySelector(".container");
+const startButton = document.querySelector("#start");
+const result = document.querySelector("#result");
+const wrapper = document.querySelector(".wrapper");
+let b = document.querySelector("b");
+let mySound = new Audio('song3.mp3')
+mySound.play()
+//Mapping Colors By Creating Colors Object
+const colors = {
+  color1: { 
+    current: "#068e06",
+    new: "#11e711",
+  },
+  color2: {
+    current: "#950303",
+    new: "#fd2a2a",
+  },
+  color3: {
+    current: "#01018a",
+    new: "#2062fc",
+  },
+  color4: {
+    current: "#919102",
+    new: "#fafa18",
+  },
+};
+let high=0;
+function highScore(){
+   if(high<count){
+    high = count;
+   }
+   return high;
+}
+let randomColors = [];
+let pathGeneratorBool = false;
+let count,
+  clickCount = 0;
 
-    levelUp();
-  }
+//Function to start game
+startButton.addEventListener("click", () => {
+  count = 0;
+  clickCount = 0;
+  randomColors = [];
+  pathGeneratorBool = false;
+  wrapper.classList.remove("hide");
+  container.classList.add("hide");
+  pathGenerate();
 });
 
-function gameFlash(btn) {
-  btn.classList.add("flash");
-  setTimeout(function () {
-    btn.classList.remove("flash");
-  }, 250);
-}
+//Function to decide the sequence
+const pathGenerate = () => {
+  randomColors.push(generateRandomValue(colors));
+  count = randomColors.length;
+  pathGeneratorBool = true;
+  pathDecide(count);
+};
 
-function userFlash(btn) {
-  btn.classList.add("userflash");
-  setTimeout(function () {
-    btn.classList.remove("userflash");
-  }, 250);
-}
+//Function to get a random value from object
+const generateRandomValue = (obj) => {
+  let arr = Object.keys(obj);
+  return arr[Math.floor(Math.random() * arr.length)];
+};
 
-function levelUp() {
-  userSeq = [];
-  level++;
-  h2.innerText = `Level ${level}`;
+//Function to play the sequence
+const pathDecide = async (count) => {
+  countValue.innerText = count;
+  for (let i of randomColors) {
+    let currentColor = document.querySelector(`.${i}`);
+    await delay(500);
+    currentColor.style.backgroundColor = `${colors[i]["new"]}`;
+    await delay(600);
+    currentColor.style.backgroundColor = `${colors[i]["current"]}`;
+    await delay(600);
+  }
+  pathGeneratorBool = false;
+};
 
-  let randIdx = Math.floor(Math.random() * 3);
-  let randColor = btns[randIdx];
-  let randBtn = document.querySelector(`.${randColor}`);
-  gameSeq.push(randColor);
-  console.log(gameSeq);
-  gameFlash(randBtn);
+//Delay for blink effect
+async function delay(time) {
+  return await new Promise((resolve) => {
+    setTimeout(resolve, time);
+  });
 }
 
-function checkAns(idx) {
-  if (userSeq[idx] === gameSeq[idx]) {
-    if (userSeq.length == gameSeq.length) {
-      setTimeout(levelUp, 1000);
+//When user click on the colors
+colorPart.forEach((element) => {
+  element.addEventListener("click", async (e) => {
+    //if user clicks the same color then next level
+    if (pathGeneratorBool) {
+      return false;
     }
-  } else {
-    h2.innerHTML = `Game Over! Your score was <b>${level}</b> <br> Press any key to start.`;
-    document.querySelector("body").style.backgroundColor = "red";
-    setTimeout(function () {
-      document.querySelector("body").style.backgroundColor = "white";
-    }, 150);
-    reset();
-  }
-}
+    if (e.target.classList[0] == randomColors[clickCount]) {
+      //Color blick effect on click
+      e.target.style.backgroundColor = `${
+        colors[randomColors[clickCount]]["new"]
+      }`;
+      await delay(500);
 
-function btnPress() {
-  let btn = this;
-  userFlash(btn);
+      e.target.style.backgroundColor = `${
+        colors[randomColors[clickCount]]["current"]
+      }`;
 
-  userColor = btn.getAttribute("id");
-  userSeq.push(userColor);
+      //User click
+      clickCount += 1;
 
-  checkAns(userSeq.length - 1);
-}
-
-let allBtns = document.querySelectorAll(".btn");
-for (btn of allBtns) {
-  btn.addEventListener("click", btnPress);
-}
+      //Next level if number of valid clicks == count
+      if (clickCount == count) {
+        clickCount = 0;
+        pathGenerate();
+      }
+    }
+     else {
+      mySound.play()
+      setTimeout(()=>{
+        lose();
+      },1000);
+    }
+     highScore();
+  });
+});
 
-function reset() {
-  started = false;
-  gameSeq = [];
-  userSeq = [];
-  level = 0;
-}
+//Function when player executes wrong sequence
+const lose = () => {
+  result.innerHTML = `<span> Your Score: </span> ${count} <br> Highest score: ${high}`;
+  result.classList.remove("hide");
+  container.classList.remove("hide");
+  wrapper.classList.add("hide");
+  startButton.innerText = "Play Again";
+  startButton.classList.remove("hide");
+};

JS/Simon Says/index.html

@@ -1,26 +1,32 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Simon Says Game</title>
+    <title>Simon Game</title>
+    <!-- Google Font -->
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap"
+      rel="stylesheet"
+    />
+    <!-- Stylesheet -->
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <h1>Simon Says Game</h1>
-    <h2>Press any key to start the game</h2>
-
-    <div class="btn-container">
-      <div class="line-one">
-        <div class="btn red" type="button" id="red">1</div>
-        <div class="btn yellow" type="button" id="yellow">2</div>
-      </div>
-      <div class="line-two">
-        <div class="btn green" type="button" id="green">3</div>
-        <div class="btn purple" type="button" id="purple">4</div>
+    <div class="container">
+      <p id="result" class="hide">Demo Message</p>
+      <button id="start">Start Game</button>
+    </div>
+    <div class="wrapper hide">
+      <div class="simon">
+        <div class="color1 color-part"></div>
+        <div class="color2 color-part"></div>
+        <div class="color3 color-part"></div>
+        <div class="color4 color-part"></div>
+        <div id="count">00</div>
       </div>
+      <b></b>
     </div>
-
+    <!-- Script -->
     <script src="app.js"></script>
   </body>
 </html>