diff --git a/README.md b/README.md index 2483ae8..ba8c10b 100644 --- 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. \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..6efa629 --- /dev/null +++ b/index.html @@ -0,0 +1,27 @@ + + + + + + Whack-a-Mole Game + + + +
+

Whack-a-Mole!

+
+ Score: 0 +
+
+
+
+
+
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..ea62bba --- /dev/null +++ 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); \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..adf35c0 --- /dev/null +++ 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; +} \ No newline at end of file