Merge pull request #5052 from Maana-Ajmera/game/mole

Added Hole and Mole Game
kunjgit · Aug 2, 2024 · fd46167 · fd46167
2 parents a2ca0b2 + 368c103
commit fd46167
Show file tree

Hide file tree

Showing 8 changed files with 313 additions and 0 deletions.
diff --git a/Games/Hole_And_Mole_Game/README.md b/Games/Hole_And_Mole_Game/README.md
@@ -0,0 +1,6 @@
+# mole-and-hole-game
+
+this is a simple mole and hole a web based game built using html css js. <br/>
+where you have to catch the mole, whenever you click on mole you will get points.
+
+
diff --git a/Games/Hole_And_Mole_Game/img/hole.png b/Games/Hole_And_Mole_Game/img/hole.png
diff --git a/Games/Hole_And_Mole_Game/img/mole.png b/Games/Hole_And_Mole_Game/img/mole.png
diff --git a/Games/Hole_And_Mole_Game/index.html b/Games/Hole_And_Mole_Game/index.html
@@ -0,0 +1,60 @@
+<!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" />
+
+    <link rel="stylesheet" href="style.css" />
+    <title>Hole and Mole Game</title>
+  </head>
+
+  <body>
+    <h1>Catch me, If you can <span class="score">0</span></h1>
+
+    <!-- Radio buttons for selecting game difficulty level -->
+    <div class="levels">
+      <div>
+        <input type="radio" name="level" id="easy" checked />
+        <label for="easy">Easy</label><br />
+      </div>
+      <div>
+        <input type="radio" name="level" id="medium" />
+        <label for="medium">Medium</label><br />
+      </div>
+      <div>
+        <input type="radio" name="level" id="hard" />
+        <label for="hard">Hard</label><br />
+      </div>
+    </div>
+
+    <!-- Start button for the game -->
+    <div class="controls">
+      <button class="start-btn" onClick="startGame()">Start!</button>
+    </div>
+
+    <!-- Game board with holes and moles -->
+    <div class="game">
+      <div class="hole hole1">
+        <div class="mole"></div>
+      </div>
+      <div class="hole hole2">
+        <div class="mole"></div>
+      </div>
+      <div class="hole hole3">
+        <div class="mole"></div>
+      </div>
+      <div class="hole hole4">
+        <div class="mole"></div>
+      </div>
+      <div class="hole hole5">
+        <div class="mole"></div>
+      </div>
+      <div class="hole hole6">
+        <div class="mole"></div>
+      </div>
+    </div>
+
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/Games/Hole_And_Mole_Game/script.js b/Games/Hole_And_Mole_Game/script.js
@@ -0,0 +1,95 @@
+// Selecting all the elements from the DOM
+const holes = document.querySelectorAll(".hole");
+const scoreBoard = document.querySelector(".score");
+const moles = document.querySelectorAll(".mole");
+const startBtn = document.querySelector(".start-btn");
+const levels = document.querySelector(".levels");
+const game = document.querySelector(".game");
+
+let lastHole;
+let timeUp = false;
+let score = 0;
+
+function difficultyLevel() {
+  const ele = document.getElementsByName("level");
+  for (let i = 0; i < ele.length; i++) {
+    if (ele[i].checked) {
+      return ele[i].id;
+    }
+  }
+}
+
+// random time between min and max
+function randomTime(min, max) {
+  return Math.round(Math.random() * (max - min) + min);
+}
+
+// Select a random hole to pop up the mole
+function randomHole(holes) {
+  const idx = Math.floor(Math.random() * holes.length);
+  const hole = holes[idx];
+  if (hole === lastHole) {
+    return randomHole(holes);
+  }
+  lastHole = hole;
+  return hole;
+}
+
+// make the mole appear and disappear
+function peep(show, hide) {
+  const time = randomTime(show, hide);
+  const hole = randomHole(holes);
+  hole.classList.add("up");
+  setTimeout(() => {
+    hole.classList.remove("up");
+    if (!timeUp) {
+      peep(show, hide);
+    }
+  }, time);
+}
+
+function startGame() {
+  let show, hide;
+  const difficulty = difficultyLevel();
+  if (difficulty === "easy") {
+    show = 500;
+    hide = 1500;
+  } else if (difficulty === "medium") {
+    show = 200;
+    hide = 1000;
+  } else {
+    show = 100;
+    hide = 800;
+  }
+
+  // hiding start button while game running
+  scoreBoard.textContent = 0;
+  timeUp = false;
+  startBtn.innerHTML = "running..";
+  startBtn.disabled = true;
+  levels.style.visibility = "hidden";
+  score = 0;
+
+  // Start the game by making moles appear
+  peep(show, hide);
+
+  // Finish the game after 15 seconds
+  setTimeout(() => {
+    timeUp = true;
+    startBtn.innerHTML = "start!";
+    startBtn.disabled = false;
+    levels.style.visibility = "visible";
+  }, 15000);
+}
+
+// update the score on clicking the mole
+function hitTheMole(e) {
+  if (!e.isTrusted) {
+    return;
+  }
+  score++;
+  this.parentNode.classList.remove("up");
+  scoreBoard.textContent = score;
+}
+
+moles.forEach((mole) => mole.addEventListener("click", hitTheMole));
diff --git a/Games/Hole_And_Mole_Game/style.css b/Games/Hole_And_Mole_Game/style.css
@@ -0,0 +1,150 @@
+/* Reset default styles */
+* {
+  margin: 0px;
+  padding: 0px;
+  box-sizing: border-box;
+}
+
+/* Global styles */
+body {
+  font-family: cursive;
+  background-color: #191919;
+  color: #fff;
+}
+
+h1 {
+  text-align: center;
+  font-size: 5rem;
+  line-height: 1;
+  margin-top: 45px;
+}
+
+.score {
+  color: #4caf50;
+  background: #302f2fed;
+  padding: 1rem;
+  line-height: 1;
+  border-radius: 1rem;
+  display: inline-block;
+}
+
+.controls {
+  margin: 5px;
+  text-align: center;
+}
+
+/* Buttons */
+.start-btn {
+  padding: 10px 25px;
+  outline: none;
+  font-size: 24px;
+  background: #c2185b;
+  color: #fff;
+  border: 0px;
+  border-radius: 0.5rem;
+  box-shadow: 1px 2px 4px #c2185bb0;
+  cursor: pointer;
+}
+
+.start-btn:hover {
+  background: #187bc2;
+  box-shadow: 1px 2px 4px #185fc2b0;
+}
+
+/* Difficulty levels */
+.levels {
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Style for each difficulty level */
+.levels > div {
+  margin: 20px;
+}
+
+.levels > div:nth-child(1) {
+  color: #00ff00;
+}
+.levels > div:nth-child(2) {
+  color: #ffd24e;
+}
+.levels > div:nth-child(3) {
+  color: #ff0000;
+}
+
+/* game board */
+.game {
+  width: 600px;
+  height: 400px;
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 auto;
+}
+
+/* holes on the game board */
+.hole {
+  flex: 1 0 33.33%;
+  overflow: hidden;
+  position: relative;
+}
+
+/* mole inside hole */
+.hole:after {
+  background: url("img/hole.png") bottom center no-repeat;
+  background-size: contain;
+  content: "";
+  width: 100%;
+  height: 70px;
+  position: absolute;
+  z-index: 2;
+  bottom: -30px;
+}
+
+/* moles */
+.mole {
+  position: absolute;
+  top: 100%;
+  width: 100%;
+  height: 100%;
+  background: url("img/mole.png") bottom center no-repeat;
+  background-size: 60%;
+  transition: all 0.4s;
+  cursor: pointer;
+}
+
+/* mole when visible */
+.hole.up .mole {
+  top: 0;
+}
+
+/* Responsive adjustments for smaller screens */
+@media (max-width: 768px) {
+  h1 {
+    padding: 20px;
+    font-size: 2rem;
+  }
+
+  .score {
+    margin: 20px;
+  }
+
+  .hole::after {
+    bottom: -22px;
+    margin: 6px;
+  }
+
+  .start-btn {
+    padding: 8px 20px;
+  }
+
+  .levels > div {
+    margin: 10px;
+  }
+
+  .game {
+    width: 90%;
+    height: 300px;
+  }
+}
diff --git a/README.md b/README.md
@@ -1686,8 +1686,10 @@ This repository also provides one such platforms where contributers come over an
 |[2D_Fighting_Game](https://github.com/kunjgit/GameZone/tree/main/Games/2D_Fighting_Game)|
 
 | [Airhockey_game](https://github.com/kunjgit/GameZone/tree/main/Games/Airhockey_game)|
+| [Hole_And_Mole_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Hole_And_Mole_Game)|
 |[Animal_Name_Guessing](https://github.com/kunjgit/GameZone/tree/main/Games/Animal_Name_Guessing)|
 
+
  </center>
 
 <br>

diff --git a/assets/images/Hole_And_Mole_Game.png b/assets/images/Hole_And_Mole_Game.png