diff --git a/Games/Hit_The_Mole/README.md b/Games/Hit_The_Mole/README.md new file mode 100644 index 0000000000..f53877d483 --- /dev/null +++ b/Games/Hit_The_Mole/README.md @@ -0,0 +1,2 @@ +

Hit - The - Mole

+

"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!

\ No newline at end of file diff --git a/Games/Hit_The_Mole/assets/dirt.svg b/Games/Hit_The_Mole/assets/dirt.svg new file mode 100644 index 0000000000..31cc68b371 --- /dev/null +++ b/Games/Hit_The_Mole/assets/dirt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Games/Hit_The_Mole/assets/mole.svg b/Games/Hit_The_Mole/assets/mole.svg new file mode 100644 index 0000000000..48d70f005f --- /dev/null +++ b/Games/Hit_The_Mole/assets/mole.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/Games/Hit_The_Mole/index.html b/Games/Hit_The_Mole/index.html new file mode 100644 index 0000000000..9b954abf2d --- /dev/null +++ b/Games/Hit_The_Mole/index.html @@ -0,0 +1,50 @@ + + + + + Whack A Mole! + + + + +

Hit-The-Mole!

+

0

+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + diff --git a/Games/Hit_The_Mole/script.js b/Games/Hit_The_Mole/script.js new file mode 100644 index 0000000000..639aa6aa1b --- /dev/null +++ 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 new file mode 100644 index 0000000000..2d23c6f137 --- /dev/null +++ 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 new file mode 100644 index 0000000000..4c22414d77 Binary files /dev/null and b/assets/images/Hit_The_Mole.png differ