Game zone koundika

Games/Memory_Game/index.html

@@ -29,7 +29,11 @@ <h1>INSTRUCTIONS</h1>
              <p><b>3.</b> Click on another block and try to remember on which block have you seen the same image</p>
              <p><b>4.</b> Your Number of moves are counted</p></div>
         <div class="game-container"></div>
+
         <button id="stop" class="hide">Stop Game</button>
+        <div style="display: flex; gap: 10px;">
+        <button id="pause" >Pause Game</button>
+        </div>
     </div>
     <div class="controls-container">
         <p id="result"></p>

Games/Memory_Game/script.js

@@ -2,11 +2,12 @@ const moves = document.getElementById("moves-count");
 const timeValue = document.getElementById("time");
 const startButton = document.getElementById("start");
 const stopButton = document.getElementById("stop");
+const pauseButton = document.getElementById("pause");
 const gameContainer = document.querySelector(".game-container");
 const result = document.getElementById("result");
 const controls = document.querySelector(".controls-container");
 let cards;
-let interval;
+let interval = null;
 let firstCard = false;
 let secondCard = false;
 
@@ -32,6 +33,8 @@ let seconds = 0,
 //Initial moves and win count
 let movesCount = 0,
   winCount = 0;
+  let secondsValue = 0;
+  let minutesValue = 0;
 
 //For timer
 const timeGenerator = () => {
@@ -42,8 +45,8 @@ const timeGenerator = () => {
     seconds = 0;
   }
   //format time before displaying
-  let secondsValue = seconds < 10 ? `0${seconds}` : seconds;
-  let minutesValue = minutes < 10 ? `0${minutes}` : minutes;
+  secondsValue = seconds < 10 ? `0${seconds}` : seconds;
+  minutesValue = minutes < 10 ? `0${minutes}` : minutes;
   timeValue.innerHTML = `<span>Time:</span>${minutesValue}:${secondsValue}`;
 };
 
@@ -98,6 +101,11 @@ const matrixGenerator = (cardValues, size = 4) => {
   cards = document.querySelectorAll(".card-container");
   cards.forEach((card) => {
     card.addEventListener("click", () => {
+
+if (interval === null) {   // prevents multiple intervals
+    interval = setInterval(timeGenerator, 1000);
+  }
+
       //If selected card is not matched yet then only run (i.e already matched card when clicked would be ignored)
       if (!card.classList.contains("matched")) {
         //flip the cliked card
@@ -161,7 +169,7 @@ startButton.addEventListener("click", () => {
   stopButton.classList.remove("hide");
   startButton.classList.add("hide");
   //Start timer
-  interval = setInterval(timeGenerator, 1000);
+  //interval = setInterval(timeGenerator, 1000);
   //initial moves
   moves.innerHTML = `<span>Moves:</span> ${movesCount}`;
   initializer();
@@ -175,6 +183,20 @@ stopButton.addEventListener(
     stopButton.classList.add("hide");
     startButton.classList.remove("hide");
     clearInterval(interval);
+    seconds = 0;
+    minutes = 0;
+    secondsValue = 0;
+    minutesValue = 0;
+    interval = null;
+    timeValue.innerHTML = `<span>Time:</span>${minutesValue}:${secondsValue}`;
+  })
+);
+
+pauseButton.addEventListener(
+  "click",
+  (pauseGame = () => {
+    clearInterval(interval);
+    interval = null;
   })
 );