Merge pull request #4151 from Tasnuva12/tm12

[Enhancement]: Whack a Mole : Game's start button's style should be modified and there should be a message after starting the game

Games/Master_Typing/README.md

@@ -38,3 +38,4 @@
  [Video](https://i.imgur.com/w56sUaV.mp4)
  <!--after some changes in button functionality-->
  [Video] (https://imgur.com/a/uxx8hlM)
+

Games/Whack_a_Mole/README.md

@@ -35,5 +35,8 @@
 <br>
 
 ![image](/Games/Whack_a_Mole/whac-a-mole%20.png)
+ <!--after some changes in button functionality-->
+ [Video] (https://imgur.com/a/8onaepi)
+
 
 <br>

Games/Whack_a_Mole/index.html

@@ -19,10 +19,16 @@ <h1>Score:<h2 id="score">0</h2>
     </div>
     &nbsp;
     <div id="button-section">
-        <button class="start-btn">Start New Game</button>
+        <button class="start-btn" id="btn">Start New Game</button>
     </div>
     <div id="board">
     </div>
+
+      <!-- Audio element for background music -->
+    <audio id="background-music" src="./audio/game-music.mp3" loop></audio>
+     <audio id="gameOver-music" src="./audio/game-over.mp3" loop></audio>
+
 
+
 </body>
 </html>

Games/Whack_a_Mole/mole.css

@@ -1,43 +1,43 @@
 body {
-    font-family: Arial, Helvetica, sans-serif;
-    text-align: center;
-    background: url("./mario-bg.jpg");
-    background-size: cover;
+  font-family: Arial, Helvetica, sans-serif;
+  text-align: center;
+  background: url("./mario-bg.jpg");
+  background-size: cover;
 }
 
 #board {
-    width: 540px;
-    height: 540px;
-    /* background-color: green; */
+  width: 540px;
+  height: 540px;
+  /* background-color: green; */
 
-    margin: 0 auto;
-    display: flex;
-    flex-wrap: wrap;
+  margin: 0 auto;
+  display: flex;
+  flex-wrap: wrap;
 
-    background: url("./soil.png");
-    background-size: cover;
-    border: 3px solid white;
-    border-radius: 25px;
+  background: url("./soil.png");
+  background-size: cover;
+  border: 3px solid white;
+  border-radius: 25px;
 }
 
 #board div {
-    /* board = 540 x 540, divide into 3x3 tiles --> 180 x 180 per div */
-    width: 180px; 
-    height: 180px;
-    background-image: url("./pipe.png");
-    background-size: cover;
+  /* board = 540 x 540, divide into 3x3 tiles --> 180 x 180 per div */
+  width: 180px;
+  height: 180px;
+  background-image: url("./pipe.png");
+  background-size: cover;
 }
 
 #board div img {
-    /* all img tags inside tiles */
-    width: 100px;
-    height: 100px;
+  /* all img tags inside tiles */
+  width: 100px;
+  height: 100px;
 
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-drag: none;
-    -webkit-user-select: none;
-    -ms-user-select: none;
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-drag: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
 }
 .home{
     background-color: aqua;
@@ -48,5 +48,40 @@ body {
 }
 
 
+.start-btn {
+  background-color:  #0d625e;
+  margin-bottom: 10px;
+  font-size: large;
+  padding: 5px;
+  border-radius: 5px;
+    transition: background-color 0.3s;
+     color: white;
+     border: none;
+}
+.start-btn:hover {
+            background-color: #66d37e;
+            animation: move-down 0.3s;
+            color: black;
 
-
+        }
+#speed-slider {
+  -webkit-appearance: none; /* Override default CSS styles */
+  appearance: none;
+  background:  #45b7b8;
+  outline: none;
+  border-radius: 5px;
+  height: 10px;
+}
+#speed-slider:hover {
+  opacity: 10; /* Fully shown on mouse-over */
+}
+#speed-slider::-webkit-slider-thumb {
+  -webkit-appearance: none; /* Override default look */
+  appearance:circle;
+  width: 15px; /* Set a specific slider handle width */
+  height: 15px; /* Slider handle height */
+  background: #04AA6D; /* Green background */
+  cursor: pointer; /* Cursor on hover */
+  border-radius: 10px;
+}
+

Games/Whack_a_Mole/mole.js

@@ -68,17 +68,30 @@ function setPlant() {
 }
 
 function selectTile() {
-    if (gameOver) {
-        return;
-    }
-    if (this == currMoleTile) {
-        score += 10;
-        document.getElementById("score").innerText = score.toString(); //update score html
-    }
-    else if (this == currPlantTile) {
-        document.getElementById("score").innerText = "GAME OVER: " + score.toString(); //update score html
-        gameOver = true;
-    }
+  if (gameOver) {
+    return;
+  }
+  if (this == currMoleTile) {
+    score += 10;
+    document.getElementById("score").innerText = score.toString(); //update score html
+  } else if (this == currPlantTile) {
+     let btn = document.getElementById("btn");
+     btn.textContent = "Start New Game";
+    document.getElementById("score").innerText =
+      "GAME OVER: " + score.toString(); //update score html
+    gameOver = true;
+    let backgroundMusic = document.getElementById("background-music");
+    backgroundMusic.pause();
+    backgroundMusic.currentTime = 0; // Rewind the music to the beginning
+    // Play the game over sound
+    let gameOverSound = document.getElementById("gameOver-music");
+    gameOverSound.play();
+    setTimeout(() => {
+      gameOverSound.pause();
+      gameOverSound.currentTime = 0; // Reset to the beginning if desired
+    }, 3000); // 3000 milliseconds = 3 seconds
+  }
+
 }
 
 
@@ -105,6 +118,18 @@ function startNewGame() {
     resetGame();
     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
+
+    let gameOverSound = document.getElementById("gameOver-music");
+    if (!gameOverSound.paused) {
+      gameOverSound.pause();
+      gameOverSound.currentTime = 0;
+    }
+
+     let backgroundMusic = document.getElementById("background-music");
+     backgroundMusic.play();
+     let btn = document.getElementById("btn");
+     btn.textContent = "The game has been started!";
+      document.getElementById("speed-section").style.display = "none";
 }
 
 function resetGame() {