added reset button to change difficulty levels

Author: Kanavpreet-Singh

examples/Whack-A-Mole/index.html

@@ -20,6 +20,7 @@ <h1>Whack-a-Mole 🦫</h1>
       </select>
       <p>Time: <span id="time-left">30</span>s</p>
       <button id="start-btn">Start Game</button>
+      <button id="reset-btn" disabled>Reset Game</button>
     </div>
 
     <div class="grid">

examples/Whack-A-Mole/index.mjs

@@ -3,6 +3,7 @@ const scoreDisplay = document.getElementById("score");
 const timeLeftDisplay = document.getElementById("time-left");
 const difficultySelect = document.getElementById("difficulty");
 const startBtn = document.getElementById("start-btn");
+const resetBtn = document.getElementById("reset-btn");
 
 let score = 0;
 let gameActive = false;
@@ -100,13 +101,17 @@ startBtn.addEventListener("click", () => {
   scoreDisplay.textContent = score;
   gameActive = true;
   startBtn.textContent = "Playing...";
-  const { totalTimeSec } = LEVELS[difficultySelect.value] || LEVELS.easy;
+  startBtn.disabled = true;
+  resetBtn.disabled = false;
+  difficultySelect.disabled = true; // Lock difficulty during game
+  
+  const { totalTimeSec } = LEVELS[difficultySelect.value] || LEVELS.beginner;
   timeLeftDisplay.textContent = totalTimeSec;
 
   // Kick off the loop
   showMole();
 
-  // Stop after 30 seconds
+  // Stop after specified duration
   clearTimeout(endTimer);
   clearInterval(tickTimer);
 
@@ -127,6 +132,32 @@ startBtn.addEventListener("click", () => {
     timeLeftDisplay.textContent = 0;
     if (currentMole && currentMole.isConnected) currentMole.remove();
     startBtn.textContent = "Start Game";
+    startBtn.disabled = false;
+    difficultySelect.disabled = false; // Re-enable difficulty selection
     alert(`⏱️ Time's up! Your score: ${score}`);
   }, totalMs);
 });
+
+// Reset game logic
+resetBtn.addEventListener("click", () => {
+  if (!gameActive) return;
+  
+  // Stop the game
+  gameActive = false;
+  clearTimeout(moleTimer);
+  clearTimeout(endTimer);
+  clearInterval(tickTimer);
+  
+  // Clean up mole
+  if (currentMole && currentMole.isConnected) currentMole.remove();
+  
+  // Reset UI
+  score = 0;
+  scoreDisplay.textContent = score;
+  const { totalTimeSec } = LEVELS[difficultySelect.value] || LEVELS.beginner;
+  timeLeftDisplay.textContent = totalTimeSec;
+  startBtn.textContent = "Start Game";
+  startBtn.disabled = false;
+  resetBtn.disabled = true;
+  difficultySelect.disabled = false; // Allow difficulty change after reset
+});

examples/Whack-A-Mole/styles.css

@@ -44,7 +44,8 @@ h1 {
   font-weight: bold;
 }
 
-#start-btn {
+#start-btn,
+#reset-btn {
   padding: 8px 20px;
   background: #fdbb2d;
   border: none;
@@ -54,11 +55,27 @@ h1 {
   transition: transform 0.2s, background 0.3s;
 }
 
-#start-btn:hover {
+#start-btn:hover:not(:disabled),
+#reset-btn:hover:not(:disabled) {
   transform: scale(1.05);
   background: #ffc94d;
 }
 
+#start-btn:disabled,
+#reset-btn:disabled {
+  background: #555;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+#reset-btn {
+  background: #e74c3c;
+}
+
+#reset-btn:hover:not(:disabled) {
+  background: #c0392b;
+}
+
 .grid {
   display: grid;
   grid-template-columns: repeat(3, 100px);