feat: add pause button

In script.js: add function pauseGame() and modify rest of the code. Working: This enables pause button. When it is clicked: - time, score are paused - new edibles are not generated - clicking already generated edibles do not increase score, nor do they get caught (removed).
Rakesh9100 · Feb 15, 2023 · e04374b · e04374b
1 parent c978a8d
commit e04374b
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -15,7 +15,7 @@
 <body>
   <div class="screen">
     <i id="home-icon" onclick="reset()" class="fa fa-home" aria-hidden="true"></i>
-    <img src="images/pause-button.svg" alt="Pause Button" id="pause-button" aria-hidden="true">
+    <img src="images/pause-button.svg" alt="Pause Button" id="pause-button" onclick = "pauseGame()" aria-hidden="true">
     <h2>Play with your Favorite Edible🎮</h2>
     <button class="btn" id="start-btn">
       Play Game!

diff --git a/script.js b/script.js
@@ -7,6 +7,8 @@ const scoreEl = document.getElementById('score')
 let seconds = 0
 let score = 0
 let selected_edible = {}
+var gameInterval;
+var isRunning;   //this defines the state of game running or not
 
 start_btn.addEventListener('click', () => screens[0].classList.add('up'))
 
@@ -23,7 +25,8 @@ choose_btns.forEach(btn => {
 })
 
 function startGame() {
-    setInterval(increaseTime, 1000)
+    isRunning = 1;
+    gameInterval = setInterval(increaseTime, 1000)
 }
 
 function increaseTime() {
@@ -36,17 +39,18 @@ function increaseTime() {
 }
 
 function createEdible() {
-
-    const edible = document.createElement('div')
-    edible.classList.add('edible')
-    const { x, y } = getRandomLocation()
-    edible.style.top = `${y}px`
-    edible.style.left = `${x}px`
-    edible.innerHTML = `<img src="${selected_edible.src}" alt="${selected_edible.alt}" style="transform: rotate(${Math.random() * 360}deg)" />`
+    if (isRunning == 1) {
+        const edible = document.createElement('div')
+        edible.classList.add('edible')
+        const { x, y } = getRandomLocation()
+        edible.style.top = `${y}px`
+        edible.style.left = `${x}px`
+        edible.innerHTML = `<img src="${selected_edible.src}" alt="${selected_edible.alt}" style="transform: rotate(${Math.random() * 360}deg)" />`
 
-    edible.addEventListener('click', catchEdible)
+        edible.addEventListener('click', catchEdible)
 
-    game_container.appendChild(edible)
+        game_container.appendChild(edible)
+    }
 }
 
 function getRandomLocation() {
@@ -58,10 +62,12 @@ function getRandomLocation() {
 }
 
 function catchEdible() {
+    if(isRunning == 1){
     increaseScore()
     this.classList.add('caught')
     setTimeout(() => this.remove(), 2000)
     addEdibles()
+    }
 }
 
 function addEdibles() {
@@ -75,9 +81,21 @@ function increaseScore() {
 }
 
 // Page reload
-function reset() 
-{
+function reset() {
     // startGame();
     window.close();
     window.open("https://rakesh9100.github.io/Click-The-Edible-Game/");
+}
+
+function pauseGame() {
+    //if running then pause the timer
+    if (isRunning == 1) {
+        clearInterval(gameInterval);
+        isRunning = 0;
+    }
+    // else start the timer
+    else {
+        gameInterval = setInterval(increaseTime, 1000);
+        isRunning = 1;
+    }
 }