From aeee483ef1d179f4e6c29975b2e3d1aab51daabf Mon Sep 17 00:00:00 2001 From: jeturgavli Date: Wed, 22 Oct 2025 23:49:47 +0530 Subject: [PATCH] feat: added Whack-a-Mole game with timer, Score --- .../MiniProjects/Whack_a_Mole/README.md | 12 +++ .../MiniProjects/Whack_a_Mole/index.html | 28 +++++++ .../MiniProjects/Whack_a_Mole/script.js | 69 +++++++++++++++++ .../MiniProjects/Whack_a_Mole/style.css | 77 +++++++++++++++++++ 4 files changed, 186 insertions(+) create mode 100644 Domains/Frontend/MiniProjects/Whack_a_Mole/README.md create mode 100644 Domains/Frontend/MiniProjects/Whack_a_Mole/index.html create mode 100644 Domains/Frontend/MiniProjects/Whack_a_Mole/script.js create mode 100644 Domains/Frontend/MiniProjects/Whack_a_Mole/style.css diff --git a/Domains/Frontend/MiniProjects/Whack_a_Mole/README.md b/Domains/Frontend/MiniProjects/Whack_a_Mole/README.md new file mode 100644 index 00000000..98786db9 --- /dev/null +++ b/Domains/Frontend/MiniProjects/Whack_a_Mole/README.md @@ -0,0 +1,12 @@ +**Contributor:** jeturgavli + +## Description +**Whack-a-Mole** is a fun and interactive browser game where the player’s goal is to **click on randomly appearing moles 🐹 to increase their score.** The game features **9 holes**, and moles pop up in random positions. Each successful click adds to the score, and the game runs on a **30-second timer.** + +## Tech Stack +- HTML +- CSS +- JavaScript + +## How to Run +1. Open the `index.html` file in your web browser. \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/Whack_a_Mole/index.html b/Domains/Frontend/MiniProjects/Whack_a_Mole/index.html new file mode 100644 index 00000000..f29b2b19 --- /dev/null +++ b/Domains/Frontend/MiniProjects/Whack_a_Mole/index.html @@ -0,0 +1,28 @@ + + + + + + Whack-a-Mole 🐹 + + + + +

🐹 Whack-a-Mole!

+
+ Score: 0 + Time: 30s +
+ +
+ + + + + + + + + diff --git a/Domains/Frontend/MiniProjects/Whack_a_Mole/script.js b/Domains/Frontend/MiniProjects/Whack_a_Mole/script.js new file mode 100644 index 00000000..af6698ae --- /dev/null +++ b/Domains/Frontend/MiniProjects/Whack_a_Mole/script.js @@ -0,0 +1,69 @@ +const grid = document.getElementById("grid"); +const scoreEl = document.getElementById("score"); +const timeEl = document.getElementById("time"); +const startBtn = document.getElementById("startBtn"); + +let score = 0; +let timeLeft = 30; +let timerInterval; +let moleTimer; + +function createGrid() { + for (let i = 0; i < 9; i++) { + const hole = document.createElement("div"); + hole.classList.add("hole"); + + const mole = document.createElement("div"); + mole.classList.add("mole"); + mole.textContent = "🐹"; // emoji mole 🐹 + + // 🖱 Single click event only + mole.addEventListener("click", () => { + if (mole.classList.contains("up")) { + score++; + scoreEl.textContent = score; + mole.classList.remove("up"); + } + }); + + hole.appendChild(mole); + grid.appendChild(hole); + } +} + +function randomMole() { + const moles = document.querySelectorAll(".mole"); + moles.forEach(m => m.classList.remove("up")); + + const randomIndex = Math.floor(Math.random() * moles.length); + moles[randomIndex].classList.add("up"); + + // hide mole after 700ms + setTimeout(() => moles[randomIndex].classList.remove("up"), 700); +} + +function startGame() { + score = 0; + timeLeft = 30; + scoreEl.textContent = score; + timeEl.textContent = timeLeft; + + clearInterval(timerInterval); + clearInterval(moleTimer); + + moleTimer = setInterval(randomMole, 800); + timerInterval = setInterval(() => { + timeLeft--; + timeEl.textContent = timeLeft; + if (timeLeft <= 0) endGame(); + }, 1000); +} + +function endGame() { + clearInterval(timerInterval); + clearInterval(moleTimer); + alert(`⏰ Time's up! Your score: ${score}`); +} + +createGrid(); +startBtn.addEventListener("click", startGame); diff --git a/Domains/Frontend/MiniProjects/Whack_a_Mole/style.css b/Domains/Frontend/MiniProjects/Whack_a_Mole/style.css new file mode 100644 index 00000000..edb80b1b --- /dev/null +++ b/Domains/Frontend/MiniProjects/Whack_a_Mole/style.css @@ -0,0 +1,77 @@ +body { + font-family: "Poppins", sans-serif; + text-align: center; + background: linear-gradient(135deg, #a8edea, #fed6e3); + height: 100vh; + margin: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +h1 { + font-size: 40px; + margin-bottom: 10px; +} + +.info { + display: flex; + justify-content: space-around; + width: 250px; + margin-bottom: 15px; + font-size: 18px; +} + +.game-grid { + width: 300px; + height: 300px; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 10px; +} + +.hole { + background: #3e2723; + border-radius: 50%; + position: relative; + overflow: hidden; +} + +.mole { + position: absolute; + font-size: 40px; + width: 100%; + height: 100%; + display: flex; + align-items: center; /* Vertical center */ + justify-content: center; /* Horizontal center */ + bottom: -100%; /* Hidden position */ + transition: bottom 0.25s; +} + +.mole.up { + bottom: 0; /* Pop up in center */ +} + +#startBtn { + margin-top: 20px; + padding: 10px 25px; + border: none; + border-radius: 10px; + background: #2a9d8f; + color: white; + font-size: 16px; + cursor: pointer; +} + +#startBtn:hover { + background: #21867a; +} + +footer { + margin-top: 30px; + font-size: 14px; + color: #333; + opacity: 0.8; +} \ No newline at end of file