kunjgit · JRao2108 · Oct 11, 2023 · Oct 11, 2023 · Oct 11, 2023 · Oct 11, 2023
diff --git a/Games/Mole Bash Mania/ReadMe b/Games/Mole Bash Mania/ReadMe
@@ -0,0 +1,17 @@
+Mole Bash Mania
+Mole Bash Mania is an arcade game, in which the player uses a small rubber mallet to hit robotic toy moles that pop up randomly in holes laid out across the surface of the machine.
+The objective of the game is to hit the mole to get more points.
+The game runs for 20 seconds with the mole moving randomly across 3 x 3 matrix.
+
+Tech Stack
+HTML
+CSS
+Javascript
+
+Functionalities
+Random selection of a hole to place the Mole.
+Start button triggers the timer and movement of Mole across the grid.
+Start button gets disabled untill 20 seconds are over.
+To score 10 points you have to hit the mole by clicking on it before it disappers.
+Counting of total score.
+Responsive Layout.
diff --git a/Games/Mole Bash Mania/assets_smash.mp3 b/Games/Mole Bash Mania/assets_smash.mp3
diff --git a/Games/Mole Bash Mania/index.css b/Games/Mole Bash Mania/index.css
@@ -0,0 +1,113 @@
+* {
+  font-family: Arial, Helvetica, sans-serif;
+  /* background-color: rgb(113, 143, 224); */
+}
+#disp {
+  /* border: 1px solid blue; */
+  text-align: center;
+  font-size: 25px;
+  line-height: 10px;
+  font-weight: 500;
+  color: black;
+}
+#score {
+  color: rgb(8, 147, 55);
+  font-weight: bold;
+}
+#time {
+  color: rgb(255, 0, 0);
+  font-weight: bold;
+}
+#container {
+  height: 450px;
+  width: 450px;
+  margin: auto;
+  margin-top: 50px;
+  padding: 20px 20px;
+  /* border: 1px solid red; */
+  /* background-color: grey; */
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  gap: 60px;
+}
+#container > div {
+  /* border: 1px solid black; */
+  background-color: #dfd1d1;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  overflow: hidden;
+  cursor: pointer;
+}
+#container > div > img {
+  width: 70%;
+  background-color: #dfd1d1;
+}
+button {
+  /* border: 1px solid red; */
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  margin-top: 40px;
+  background-color: white;
+  border-radius: 5px;
+  padding: 10px 20px;
+  cursor: pointer;
+}
+@media screen and (min-width: 300px) and (max-width: 700px) {
+  #disp {
+    /* background-color: pink; */
+    width: 100%;
+  }
+  #container {
+    width: 250px;
+    height: 250px;
+    gap: 20px;
+  }
+}
+#instructions {
+  background-color: rgba(255, 255, 255, 0.9);
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+  margin-right: 20px;
+  text-align: center;
+  font-size: 22px;
+  line-height: 1.5;
+  color: #333;
+}
+
+#instructions h2 {
+  font-size: 30px;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+#instructions {
+  background-image: url('https://media.giphy.com/media/OPb0ujC8EZWHi3e1rW/giphy.gif');
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  animation: backgroundAnimation 10s linear infinite;
+  color: white; 
+}
+
+@keyframes backgroundAnimation {
+  0% {
+    background-position: 0% 0%;
+  }
+  100% {
+    background-position: 100% 0%;
+  }
+}
+
+body {
+  background-image: url('https://cdn.marketjs.net/games/whack-a-mole/localization/en/media/graphics/game/horizont.jpg');
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+
+}
+
+
diff --git a/Games/Mole Bash Mania/index.html b/Games/Mole Bash Mania/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Whack-A-Mole</title>
+    <link rel="stylesheet" href="index.css" />
+  </head>
+  <body>
+    <div id="instructions">
+      <h2>Mole Bash Mania</h2>
+      <p>Game Instructions!!</p>
+      <p>| Click on the moles as they appear in the holes to score points |</p>
+      <p>| You have 20 seconds to whack as many moles as possible |</p>
+      <p>| Each mole whacked gives you 10 points |</p>
+      <p>| Good luck!! |</p>
+    </div>
+
+    <div id="disp">
+      <p>Score: <span id="score">0</span></p>
+      <p>Time Remaining: <span id="time">20 Sec</span></p>
+    </div>
+    <div id="container">
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+    <div id="hammer"></div>
+    <button>Start Game</button>
+
+
+  </body>
+
+</html>
+<script src="index.js"></script>
diff --git a/Games/Mole Bash Mania/index.js b/Games/Mole Bash Mania/index.js
@@ -0,0 +1,60 @@
+// to set the time
+let time = document.querySelector("#time");
+// audio sound for every hit
+let sound = new Audio("assets_smash.mp3");
+// holes list to place mole randomly;
+let holes = document.querySelectorAll("#container>div");
+// score variable
+let s = document.querySelector("#score");
+// Total time is 20sec
+let i = 20;
+let score = 0;
+let moveMole = null;
+let start_time = () => {
+// start will be disabled for duration of gameplay
+  document.querySelector("button").disabled = true;
+  s.innerText = score;
+  run();
+
+  // setinterval for changing timer on screen
+  let time_rem = setInterval(() => {
+    time.innerText = i + " Sec";
+    i--;
+    if (i == -1) {
+      stopGame(time_rem);
+    }
+  }, 1000);
+};
+document.querySelector("button").addEventListener("click", start_time);
+
+let stopGame = (time_rem) => {
+  clearInterval(time_rem);
+  // time reset to total time and start button enabled
+  i = 20;
+  document.querySelector("button").disabled = false;
+  clearInterval(moveMole);
+  score = 0;
+  // for each to clear last mole element as position is not known so all holes are cleared
+  holes.forEach(function (el) {
+    el.innerHTML = null;
+  });
+};
+
+function run() {
+  let position = Math.floor(Math.random() * 9);
+  let mole = holes[position];
+  let i = document.createElement("img");
+  i.src = "https://cdn-icons-png.flaticon.com/512/5050/5050857.png";
+  i.addEventListener("click", hitMole);
+  mole.append(i);
+  moveMole = setTimeout(() => {
+    mole.innerHTML = null;
+    run();
+  }, 750);
+}
+//score is incremented and sound is played
+function hitMole() { 
+  score = score + 10;
+  sound.play();
+  s.innerText = score;
+}