-
Notifications
You must be signed in to change notification settings - Fork 841
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #3208 from AtharvaShinde253/Whac-a-Mole_Atharva
Whac a mole atharva
- Loading branch information
Showing
15 changed files
with
548 additions
and
420 deletions.
There are no files selected for viewing
Binary file not shown.
Binary file not shown.
Binary file not shown.
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,152 +1,152 @@ | ||
| let scoreSection = document.querySelector("#score-section"); | ||
| let gameContainer = document.querySelector("#game-container"); | ||
| let startButton = document.querySelector(".start-btn"); | ||
| let pauseResumeButton = document.querySelector(".pause-resume-btn"); | ||
| let squares = document.querySelectorAll(".square"); | ||
|
|
||
| let highScoreH3 = document.querySelector(".highScore"); | ||
| let yourScoreH3 = document.querySelector(".yourScore"); | ||
| let timeLeftH3 = document.querySelector(".timeLeft"); | ||
| let gameMusic = new Audio("Assets/gameMusic.mp3"); | ||
| let hitMusic = new Audio("Assets/hitMusic.mp3"); | ||
|
|
||
| let highScore = 0; | ||
| let yourScore = 0; | ||
| let timeLeft = 30; | ||
| let hitPosition = null; | ||
| let timerId = null; | ||
| let randomMoleId = null; | ||
| let gameInitializing = false; // made a variable so that system can have suffient time for setup | ||
|
|
||
|
|
||
|
|
||
| startButton.addEventListener("click", () => { | ||
| if (!gameInitializing) { | ||
| // hence game will not be disturbed even after simultaneous clicks on start button | ||
|
|
||
| // Disable the start button to prevent multiple clicks | ||
| startButton.disabled = true; | ||
| gameInitializing = true; | ||
|
|
||
| // Clear existing intervals before starting new ones | ||
| clearInterval(timerId); | ||
| clearInterval(randomMoleId); | ||
|
|
||
| scoreSection.classList.remove("hide"); | ||
| timeLeftH3.classList.remove("hide"); | ||
| pauseResumeButton.classList.remove("hide"); | ||
| gameContainer.classList.remove("hide"); | ||
|
|
||
| gameMusic.currentTime = 0; | ||
| gameMusic.play(); | ||
|
|
||
| timeLeft = 30; | ||
| timerId = setInterval(countDown, 1000); | ||
| randomMoleId = setInterval(randomMole, 1000); | ||
|
|
||
| let highScoreLibrary = localStorage.getItem("highScore"); | ||
| if (highScoreLibrary == null) { | ||
| highScoreH3.innerHTML = `High Score: ${highScore}`; | ||
| } else { | ||
| highScoreH3.innerHTML = `High Score: ${highScoreLibrary}`; | ||
| } | ||
|
|
||
| yourScore = 0; | ||
| yourScoreH3.innerHTML = `Your Score: ${yourScore}`; | ||
|
|
||
| // After initialization is complete, enable the start button | ||
| startButton.disabled = false; | ||
| gameInitializing = false; | ||
| } | ||
| }) | ||
|
|
||
|
|
||
| pauseResumeButton.addEventListener("click", () => { | ||
| if (pauseResumeButton.innerText == "Pause") { | ||
| pauseResumeButton.innerText = "Resume"; | ||
| gameMusic.pause(); | ||
|
|
||
| clearInterval(timerId); | ||
| clearInterval(randomMoleId); | ||
|
|
||
| timerId = null; | ||
| randomMoleId = null; | ||
| } | ||
| else { | ||
| pauseResumeButton.innerText = "Pause"; | ||
| gameMusic.play(); | ||
|
|
||
| timerId = setInterval(countDown, 1000); | ||
| randomMoleId = setInterval(randomMole, 1000); | ||
| } | ||
| }) | ||
|
|
||
|
|
||
| function countDown() { | ||
| timeLeftH3.innerHTML = `Time Left: ${timeLeft}`; | ||
| timeLeft--; | ||
|
|
||
| if (timeLeft == 0) { | ||
| gameMusic.pause(); | ||
| clearInterval(timerId); | ||
| clearInterval(randomMoleId); | ||
|
|
||
| timeLeftH3.classList.add("hide"); | ||
| pauseResumeButton.classList.add("hide"); | ||
| gameContainer.classList.add("hide"); | ||
| } | ||
| } | ||
|
|
||
|
|
||
| function randomMole() { | ||
| if (timerId != null && randomMoleId != null) { | ||
| squares.forEach((squares) => { | ||
| squares.classList.remove("mole"); | ||
| }); | ||
|
|
||
| let randomSquare = | ||
| squares[Math.floor(Math.random() * squares.length)]; | ||
| randomSquare.classList.add("mole"); | ||
| hitPosition = randomSquare.id; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| function storeHighScore() { | ||
| let highScoreLibrary = localStorage.getItem("highScore"); | ||
|
|
||
| if (highScoreLibrary == null) { | ||
| highScore = 1; | ||
| highScoreLibrary = localStorage.setItem("highScore", highScore); | ||
| highScoreH3.innerHTML = `High Score: ${highScore}`; | ||
| } | ||
| else { | ||
| if (yourScore > highScoreLibrary) { | ||
| highScore = yourScore; | ||
| highScoreLibrary = localStorage.setItem("highScore", highScore); | ||
| highScoreH3.innerHTML = `High Score: ${highScore}`; | ||
| } | ||
| } | ||
| } | ||
|
|
||
|
|
||
| squares.forEach(squares => { | ||
| squares.addEventListener("mousedown", () => { | ||
| if (timerId != null) { | ||
| if (squares.id == hitPosition) { | ||
| hitMusic.play(); | ||
|
|
||
| setTimeout(() => { | ||
| hitMusic.currentTime = 0; | ||
| hitMusic.pause(); | ||
| }, 500); | ||
|
|
||
| ++yourScore; | ||
| yourScoreH3.innerHTML = `Your Score: ${yourScore}`; | ||
| storeHighScore(); | ||
| hitPosition = null; | ||
| } | ||
| } | ||
| }) | ||
| }) | ||
| let scoreSection = document.querySelector("#score-section"); | ||
| let gameContainer = document.querySelector("#game-container"); | ||
| let startButton = document.querySelector(".start-btn"); | ||
| let pauseResumeButton = document.querySelector(".pause-resume-btn"); | ||
| let squares = document.querySelectorAll(".square"); | ||
|
|
||
| let highScoreH3 = document.querySelector(".highScore"); | ||
| let yourScoreH3 = document.querySelector(".yourScore"); | ||
| let timeLeftH3 = document.querySelector(".timeLeft"); | ||
| let gameMusic = new Audio("Assets/gameMusic.mp3"); | ||
| let hitMusic = new Audio("Assets/hitMusic.mp3"); | ||
|
|
||
| let highScore = 0; | ||
| let yourScore = 0; | ||
| let timeLeft = 30; | ||
| let hitPosition = null; | ||
| let timerId = null; | ||
| let randomMoleId = null; | ||
| let gameInitializing = false; // made a variable so that system can have suffient time for setup | ||
|
|
||
|
|
||
|
|
||
| startButton.addEventListener("click", () => { | ||
| if (!gameInitializing) { | ||
| // hence game will not be disturbed even after simultaneous clicks on start button | ||
|
|
||
| // Disable the start button to prevent multiple clicks | ||
| startButton.disabled = true; | ||
| gameInitializing = true; | ||
|
|
||
| // Clear existing intervals before starting new ones | ||
| clearInterval(timerId); | ||
| clearInterval(randomMoleId); | ||
|
|
||
| scoreSection.classList.remove("hide"); | ||
| timeLeftH3.classList.remove("hide"); | ||
| pauseResumeButton.classList.remove("hide"); | ||
| gameContainer.classList.remove("hide"); | ||
|
|
||
| gameMusic.currentTime = 0; | ||
| gameMusic.play(); | ||
|
|
||
| timeLeft = 30; | ||
| timerId = setInterval(countDown, 1000); | ||
| randomMoleId = setInterval(randomMole, 1000); | ||
|
|
||
| let highScoreLibrary = localStorage.getItem("highScore"); | ||
| if (highScoreLibrary == null) { | ||
| highScoreH3.innerHTML = `High Score: ${highScore}`; | ||
| } else { | ||
| highScoreH3.innerHTML = `High Score: ${highScoreLibrary}`; | ||
| } | ||
|
|
||
| yourScore = 0; | ||
| yourScoreH3.innerHTML = `Your Score: ${yourScore}`; | ||
|
|
||
| // After initialization is complete, enable the start button | ||
| startButton.disabled = false; | ||
| gameInitializing = false; | ||
| } | ||
| }) | ||
|
|
||
|
|
||
| pauseResumeButton.addEventListener("click", () => { | ||
| if (pauseResumeButton.innerText == "Pause") { | ||
| pauseResumeButton.innerText = "Resume"; | ||
| gameMusic.pause(); | ||
|
|
||
| clearInterval(timerId); | ||
| clearInterval(randomMoleId); | ||
|
|
||
| timerId = null; | ||
| randomMoleId = null; | ||
| } | ||
| else { | ||
| pauseResumeButton.innerText = "Pause"; | ||
| gameMusic.play(); | ||
|
|
||
| timerId = setInterval(countDown, 1000); | ||
| randomMoleId = setInterval(randomMole, 1000); | ||
| } | ||
| }) | ||
|
|
||
|
|
||
| function countDown() { | ||
| timeLeftH3.innerHTML = `Time Left: ${timeLeft}`; | ||
| timeLeft--; | ||
|
|
||
| if (timeLeft == 0) { | ||
| gameMusic.pause(); | ||
| clearInterval(timerId); | ||
| clearInterval(randomMoleId); | ||
|
|
||
| timeLeftH3.classList.add("hide"); | ||
| pauseResumeButton.classList.add("hide"); | ||
| gameContainer.classList.add("hide"); | ||
| } | ||
| } | ||
|
|
||
|
|
||
| function randomMole() { | ||
| if (timerId != null && randomMoleId != null) { | ||
| squares.forEach((squares) => { | ||
| squares.classList.remove("mole"); | ||
| }); | ||
|
|
||
| let randomSquare = | ||
| squares[Math.floor(Math.random() * squares.length)]; | ||
| randomSquare.classList.add("mole"); | ||
| hitPosition = randomSquare.id; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| function storeHighScore() { | ||
| let highScoreLibrary = localStorage.getItem("highScore"); | ||
|
|
||
| if (highScoreLibrary == null) { | ||
| highScore = 1; | ||
| highScoreLibrary = localStorage.setItem("highScore", highScore); | ||
| highScoreH3.innerHTML = `High Score: ${highScore}`; | ||
| } | ||
| else { | ||
| if (yourScore > highScoreLibrary) { | ||
| highScore = yourScore; | ||
| highScoreLibrary = localStorage.setItem("highScore", highScore); | ||
| highScoreH3.innerHTML = `High Score: ${highScore}`; | ||
| } | ||
| } | ||
| } | ||
|
|
||
|
|
||
| squares.forEach(squares => { | ||
| squares.addEventListener("mousedown", () => { | ||
| if (timerId != null) { | ||
| if (squares.id == hitPosition) { | ||
| hitMusic.play(); | ||
|
|
||
| setTimeout(() => { | ||
| hitMusic.currentTime = 0; | ||
| hitMusic.pause(); | ||
| }, 500); | ||
|
|
||
| ++yourScore; | ||
| yourScoreH3.innerHTML = `Your Score: ${yourScore}`; | ||
| storeHighScore(); | ||
| hitPosition = null; | ||
| } | ||
| } | ||
| }) | ||
| }) | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,42 +1,39 @@ | ||
| # **Whack_a_Mole** | ||
| # **Whack_a_Mole** | ||
|
|
||
| --- | ||
|
|
||
| <br> | ||
|
|
||
| ## **Description 📃** | ||
| - The Whack-a-Mole game is a classic arcade game implemented using HTML, CSS, and JavaScript. Players must whack or hit moles that randomly pop up from holes on the screen. The game features a simple and intuitive user interface with responsive design elements. | ||
| ## **Description 📃** | ||
|
|
||
| - The Whack-a-Mole game is a classic arcade game implemented using HTML, CSS, and JavaScript.It has a special mario theme. Players must whack or hit moles that randomly pop up from holes and avoid piranha plants on the screen. The game features a simple and intuitive user interface. | ||
|
|
||
| ## **functionalities 🎮** | ||
|
|
||
| ## **functionalities 🎮** | ||
| - Hit moles that randomly pop up from holes on the screen | ||
| - Score points for successfully hitting moles | ||
| - Track your score as you play | ||
| - Play within a time limit displayed by a countdown timer | ||
| - Responsive design for easy play on different devices | ||
| - Game ends when time runs out, showing your final score | ||
| - Game ends when you click on the piranha plant , showing your final score | ||
| - Start a new round to play again | ||
| <br> | ||
| <br> | ||
|
|
||
| ## **How to play? 🕹️** | ||
|
|
||
| - Start the game by clicking on the "Start New Game" button | ||
| - Moles will randomly appear from different holes on the screen | ||
| - Use your mouse or touch screen to click on the moles as quickly as possible | ||
| - Each successful hit on a mole will earn you points | ||
| - Watch the countdown timer to keep track of the remaining time | ||
| - Aim to achieve the highest score before the time runs out | ||
| - The game ends when the timer reaches zero | ||
| - Watch the piranha plant and avoid pressing it. | ||
| - Aim to achieve the highest score. | ||
| - The game ends when you misclick on the piranha plant. | ||
| - Your final score will be displayed on the screen | ||
| - To play again, click on the "Start New Game" button | ||
| <br> | ||
| <br> | ||
|
|
||
| ## **Screenshots 📸** | ||
| <br> | ||
|
|
||
|  | ||
|
|
||
| <br> | ||
|
|
||
|  | ||
|
|
||
| ## **Working video 📹** | ||
| <!-- add your working video over here --> | ||
| <br> |
Oops, something went wrong.