Merge pull request #5155 from Sourabh782/Hit-The-Mole

Added Game "Hit_The_Mole"
kunjgit · Aug 10, 2024 · 6652a30 · 6652a30
2 parents 260979e + b744440
commit 6652a30
Show file tree

Hide file tree

Showing 7 changed files with 198 additions and 0 deletions.
diff --git a/Games/Hit_The_Mole/README.md b/Games/Hit_The_Mole/README.md
@@ -0,0 +1,2 @@
+<div align="center"> <h1>Hit - The - Mole</h1>  </div>
+<p>"Hit the Mole" game is a fun and engaging interactive game where players must quickly click on moles that randomly appear on the screen. The objective is to hit as many moles as possible within a set time limit. The game features simple yet appealing graphics, responsive controls, and keeps track of the player's score. It's a great way to test and improve your reaction speed while having fun!</p>
diff --git a/Games/Hit_The_Mole/assets/dirt.svg b/Games/Hit_The_Mole/assets/dirt.svg
diff --git a/Games/Hit_The_Mole/assets/mole.svg b/Games/Hit_The_Mole/assets/mole.svg
diff --git a/Games/Hit_The_Mole/index.html b/Games/Hit_The_Mole/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Whack A Mole!</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Amatic+SC:400,700"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Hit-The-Mole!</h1>
+    <h1 class="score">0</h1>
+    <div class="start">
+      <button onClick="startGame()">Start!</button>
+    </div>
+    <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 class="hole hole7">
+        <div class="mole"></div>
+      </div>
+      <div class="hole hole8">
+        <div class="mole"></div>
+      </div>
+      <div class="hole hole9">
+        <div class="mole"></div>
+      </div>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/Games/Hit_The_Mole/script.js b/Games/Hit_The_Mole/script.js
@@ -0,0 +1,45 @@
+const holes = document.querySelectorAll(".hole");
+const scoreBoard = document.querySelector(".score");
+const moles = document.querySelectorAll(".mole");
+let lastHole;
+let timeUp = false;
+let score = 0;
+
+function randomTime(min, max) {
+  return Math.round(Math.random() * (max - min) + min);
+}
+
+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;
+}
+
+function peep() {
+  const time = randomTime(200, 1000);
+  const hole = randomHole(holes);
+  hole.classList.add("up");
+  setTimeout(() => {
+    hole.classList.remove("up");
+    if (!timeUp) peep();
+  }, time);
+}
+
+function startGame() {
+  scoreBoard.textContent = 0;
+  timeUp = false;
+  score = 0;
+  peep();
+  setTimeout(() => (timeUp = true), 10000);
+}
+function whack(e) {
+  if (!e.isTrusted) return;
+  score++;
+  this.parentNode.classList.remove("up");
+  scoreBoard.textContent = score;
+}
+moles.forEach((mole) => mole.addEventListener("click", whack));
diff --git a/Games/Hit_The_Mole/styles.css b/Games/Hit_The_Mole/styles.css
@@ -0,0 +1,99 @@
+@import url("https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap");
+html {
+  box-sizing: border-box;
+  font-size: 10px;
+  background-color: #f3e6e8;
+  background-image: linear-gradient(315deg, #f3e6e8 0%, #d5d0e5 74%);
+}
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+body {
+  padding: 0;
+  margin: 0;
+  font-family: "Shadows Into Light", cursive;
+}
+.start {
+  text-align: center;
+}
+h1 {
+  text-align: center;
+  font-size: 5rem;
+  margin-bottom: 0;
+}
+.score {
+  color: rgb(104, 94, 114);
+  margin-top: 0%;
+}
+.game {
+  width: 800px;
+  height: 400px;
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 auto;
+}
+.hole {
+  flex: 1 0 33.33%;
+  overflow: hidden;
+  position: relative;
+}
+.hole:after {
+  display: block;
+  background: url("./assets/dirt.svg") bottom center no-repeat;
+  background-size: contain;
+  content: "";
+  width: 100%;
+  height: 70px;
+  position: absolute;
+  z-index: 2;
+  bottom: -30px;
+}
+.mole {
+  background: url("./assets/mole.svg") bottom center no-repeat;
+  background-size: 50%;
+  position: absolute;
+  top: 100%;
+  width: 100%;
+  height: 100%;
+  transition: all 0.4s ease;
+}
+.hole.up .mole {
+  top: 0;
+}
+button {
+  background: rgba(190, 19, 19, 0.2);
+  border: red;
+  font-size: 3rem;
+  cursor: pointer;
+}
+
+.hole {
+  flex: 1 0 33.33%;
+  overflow: hidden;
+  position: relative;
+}
+.hole:after {
+  display: block;
+  background: url("./assets/dirt.svg") bottom center no-repeat;
+  background-size: contain;
+  content: "";
+  width: 100%;
+  height: 70px;
+  position: absolute;
+  z-index: 2;
+  bottom: -30px;
+}
+.mole {
+  background: url("./assets/mole.svg") bottom center no-repeat;
+  background-size: 50%;
+  position: absolute;
+  top: 100%;
+  width: 100%;
+  height: 100%;
+  transition: all 0.4s ease;
+}
+.hole.up .mole {
+  top: 0;
+}
diff --git a/assets/images/Hit_The_Mole.png b/assets/images/Hit_The_Mole.png
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<div align="center"> <h1>Hit - The - Mole</h1> </div>
		<p>"Hit the Mole" game is a fun and engaging interactive game where players must quickly click on moles that randomly appear on the screen. The objective is to hit as many moles as possible within a set time limit. The game features simple yet appealing graphics, responsive controls, and keeps track of the player's score. It's a great way to test and improve your reaction speed while having fun!</p>