Initial commit with game files

Abhrankan-Chakrabarti · Jun 30, 2024 · d6ff1f4 · d6ff1f4
1 parent daba6c3
commit d6ff1f4
Show file tree

Hide file tree

Showing 4 changed files with 153 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -1,2 +1,28 @@
 # Whack-a-Mole-Game
-A simple Whack-a-Mole game implemented using HTML, CSS, and JavaScript
+
+A simple Whack-a-Mole game implemented using HTML, CSS, and JavaScript.
+
+## How to Play
+
+1. Open `index.html` in your web browser.
+2. Click the "Start" button to begin the game.
+3. Click on the moles as they appear to score points.
+4. The game lasts for 30 seconds. Try to score as many points as possible!
+
+## Live Demo
+
+You can play the game live on GitHub Pages: [Whack-a-Mole Game Live Demo](https://abhrankan-chakrabarti.github.io/Whack-a-Mole-Game)
+
+## Files
+
+- `index.html`: The main HTML file.
+- `styles.css`: The CSS file for styling the game.
+- `script.js`: The JavaScript file containing the game logic.
+
+## Screenshot
+
+![Game Screenshot](screenshot.png)
+
+## License
+
+This project is licensed under the MIT License.
diff --git a/index.html b/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Whack-a-Mole Game</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="game">
+        <h1>Whack-a-Mole!</h1>
+        <div class="score-board">
+            <span>Score: </span><span id="score">0</span>
+        </div>
+        <div class="holes">
+            <div class="hole"><div class="mole"></div></div>
+            <div class="hole"><div class="mole"></div></div>
+            <div class="hole"><div class="mole"></div></div>
+            <div class="hole"><div class="mole"></div></div>
+            <div class="hole"><div class="mole"></div></div>
+            <div class="hole"><div class="mole"></div></div>
+        </div>
+        <button id="startButton">Start</button>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,49 @@
+const holes = document.querySelectorAll('.hole');
+const moles = document.querySelectorAll('.mole');
+const scoreBoard = document.getElementById('score');
+const startButton = document.getElementById('startButton');
+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.querySelector('.mole').classList.add('up');
+    setTimeout(() => {
+        hole.querySelector('.mole').classList.remove('up');
+        if (!timeUp) peep();
+    }, time);
+}
+
+function startGame() {
+    scoreBoard.textContent = 0;
+    score = 0;
+    timeUp = false;
+    peep();
+    setTimeout(() => timeUp = true, 30000); // Game duration: 30 seconds
+}
+
+function bonk(e) {
+    if (!e.isTrusted) return; // Prevent fake clicks
+    score++;
+    this.classList.remove('up');
+    scoreBoard.textContent = score;
+}
+
+moles.forEach(mole => mole.addEventListener('click', bonk));
+startButton.addEventListener('click', startGame);
diff --git a/styles.css b/styles.css
@@ -0,0 +1,50 @@
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #f0f0f0;
+    font-family: Arial, sans-serif;
+}
+
+.game {
+    text-align: center;
+}
+
+.holes {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    width: 300px;
+    margin: 20px auto;
+}
+
+.hole {
+    width: 80px;
+    height: 80px;
+    background-color: #8b4513;
+    position: relative;
+    border-radius: 50%;
+    margin: 10px;
+    overflow: hidden;
+}
+
+.mole {
+    width: 60px;
+    height: 60px;
+    background-color: #555;
+    position: absolute;
+    bottom: -60px;
+    left: 10px;
+    border-radius: 50%;
+    transition: bottom 0.3s;
+}
+
+.mole.up {
+    bottom: 10px;
+}
+
+.score-board {
+    font-size: 1.5em;
+    margin: 20px;
+}