updated Whack-A-Mole game

whack a mole game enhancement , added a speed slider and change typos in name
kunjgit · May 14, 2024 · 5542879 · 5542879
1 parent 289b54a
commit 5542879
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 8 deletions.
diff --git a/Games/Whack_a_Mole/index.html b/Games/Whack_a_Mole/index.html
@@ -3,13 +3,18 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Whac a Mole</title>
+    <title>Whack a Mole</title>
     <link rel="stylesheet" href="mole.css">
     <script src="mole.js"></script>
 </head>
 <body>
-    <h1>Whac a Mole</h1>
-    <h2 id="score">0</h2>
+    <h1>Whack a Mole</h1>
+    <h1>Score:<h2 id="score">0</h2>
+    <div id="speed-section">
+        <label for="speed-slider">Speed:</label>
+        <input type="range" id="speed-slider" min="1" max="5" value="3">
+    </div>
+    &nbsp;
     <div id="button-section">
         <button class="start-btn">Start New Game</button>
     </div>

diff --git a/Games/Whack_a_Mole/mole.js b/Games/Whack_a_Mole/mole.js
@@ -4,9 +4,12 @@ let score = 0;
 let gameOver = false;
 let moleIntervalId;
 let plantIntervalId;
-
+let speed = 2500;
 window.onload = function() {
     setGame();
+    document.getElementById('speed-slider').addEventListener('input',()=>{
+        speed = 3000 - parseInt(document.getElementById('speed-slider').value)*500;
+    });
 }
 
 function setGame() {
@@ -18,8 +21,8 @@ function setGame() {
         tile.addEventListener("click", selectTile);
         document.getElementById("board").appendChild(tile);
     }
-    setInterval(setMole, 2500); // 1000 miliseconds = 1 second, every 1 second call setMole
-    setInterval(setPlant, 5000); // 2000 miliseconds = 2 seconds, every 2 second call setPlant
+    setInterval(setMole, speed); // 1000 miliseconds = 1 second, every 1 second call setMole
+    setInterval(setPlant, 2000); // 2000 miliseconds = 2 seconds, every 2 second call setPlant
 }
 
 function getRandomTile() {
@@ -82,6 +85,9 @@ function selectTile() {
 window.onload = function() {
     setGame();
     document.querySelector('.start-btn').addEventListener('click', startNewGame);
+    document.getElementById('speed-slider').addEventListener('input',()=>{
+        speed = 3000 - parseInt(document.getElementById('speed-slider').value)*500;
+    });
 }
 
 function setGame() {
@@ -97,8 +103,8 @@ function setGame() {
 
 function startNewGame() {
     resetGame();
-    moleIntervalId = setInterval(setMole, 2500); // 1000 miliseconds = 1 second, every 1 second call setMole
-    plantIntervalId = setInterval(setPlant, 5000); // 2000 miliseconds = 2 seconds, every 2 second call setPlant
+    moleIntervalId = setInterval(setMole, speed); // 1000 miliseconds = 1 second, every 1 second call setMole
+    plantIntervalId = setInterval(setPlant, 2000); // 2000 miliseconds = 2 seconds, every 2 second call setPlant
 }
 
 function resetGame() {