Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Whack a mole V1 with basic functionality #10

Draft
wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

Whack a mole V1 with basic functionality #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bfb7821
Whack a mole V1 with basic functionality
rupali-for-chegg Jun 13, 2024
e969297
Added music on starting the game and a hit sound on whacking a mole, …
rupali-for-chegg Jun 13, 2024
4f9109f
Added flash effect on hitting a mole
rupali-for-chegg Jun 13, 2024
ac768c3
Update gameover fuction to Change the button back to Start and Enable…
rupali-for-chegg Jun 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions .idea/.gitignore
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 9 additions & 0 deletions .idea/js-dev-final-capstone-starter-whack-a-mole.iml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 6 additions & 0 deletions .idea/misc.xml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 8 additions & 0 deletions .idea/modules.xml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 6 additions & 0 deletions .idea/vcs.xml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

39 changes: 30 additions & 9 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
<html>
<html lang="">
<head>
<link rel="stylesheet" href="./src/styles.css">
<link href="./src/styles.css" rel="stylesheet">
<title>Whack a Mole </title>
</head>
<body>
<h1></h1>
<h1 id="title"> Whack a Mole! </h1>
<div>
<div>
<h2>Click start to play!</h2>
<h2> <button id="start"> Start </button></h2>
</div>
<div>
<h2>score: <span id="score">0</span></h2>
Expand All @@ -16,13 +17,33 @@ <h2><span id="timer">0</span> seconds left.</h2>
</div>
</div>
<div class="grid">
<div id="hole0" class="hole">
<div id="mole0" class="mole"></div>
<div class="hole" id="hole0">
<div class="mole" id="mole0"></div>
</div>
<div id="hole1" class="hole">
<div id="mole1" class="mole"></div>
<div class="hole" id="hole1">
<div class="mole" id="mole1"></div>
</div>
<div class="hole" id="hole2">
<div class="mole" id="mole2"></div>
</div>
<div class="hole" id="hole3">
<div class="mole" id="mole3"></div>
</div>
<div class="hole" id="hole4">
<div class="mole" id="mole4"></div>
</div>
<div class="hole" id="hole5">
<div class="mole" id="mole5"></div>
</div>
<div class="hole" id="hole6">
<div class="mole" id="mole6"></div>
</div>
<div class="hole" id="hole7">
<div class="mole" id="mole7"></div>
</div>
<div class="hole" id="hole8">
<div class="mole" id="mole8"></div>
</div>
<!--TODO: Add the missing holes and moles. -->
</div>
<script src="./src/index.js"></script>
</body>
Expand Down
141 changes: 98 additions & 43 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,27 @@ const holes = document.querySelectorAll('.hole');
const moles = document.querySelectorAll('.mole');
const startButton = document.querySelector('#start');
// TODO: Add the missing query selectors:
const score; // Use querySelector() to get the score element
const timerDisplay; // use querySelector() to get the timer element.

const score = document.querySelector('#score'); // Use querySelector() to get the score element
const timerDisplay = document.querySelector('#timer'); // use querySelector() to get the timer element.
const whackSound = new Audio('https://github.com/gabrielsanchez/erddiagram/blob/main/hit.mp3?raw=true'); // Replace 'whack_sound.mp3' with the path to your sound file
const song = new Audio("https://github.com/gabrielsanchez/erddiagram/blob/main/molesong.mp3?raw=true");
let time = 0;
let timer;
let lastHole = 0;
let points = 0;
let difficulty = "hard";
let difficulty = "normal";

/**
* Generates a random integer within a range.
*
* The function takes two values as parameters that limits the range
* The function takes two values as parameters that limits the range
* of the number to be generated. For example, calling randomInteger(0,10)
* will return a random integer between 0 and 10. Calling randomInteger(10,200)
* will return a random integer between 10 and 200.
*
*/
function randomInteger(min, max) {
// return Math.floor(Math.random() * (max - min + 1)) + min;
return Math.floor(Math.random() * (max - min + 1)) + min;
}

/**
Expand All @@ -33,15 +34,21 @@ function randomInteger(min, max) {
* return 1000. If difficulty is set to "hard" it should return a randomInteger between
* 600 and 1200.
*
* Example:
* Example:
* setDelay("easy") //> returns 1500
* setDelay("normal") //> returns 1000
* setDelay("hard") //> returns 856 (returns a random number between 600 and 1200).
*
*/
function setDelay(difficulty) {
// TODO: Write your code here.

if(difficulty === "hard"){
return randomInteger(600,1200);
}else if(difficulty === "normal"){
return 1000;
}else if(difficulty === "easy"){
return 1500;
}
}

/**
Expand All @@ -51,16 +58,20 @@ function setDelay(difficulty) {
* 1. generate a random integer from 0 to 8 and assign it to an index variable
* 2. get a random hole with the random index (e.g. const hole = holes[index])
* 3. if hole === lastHole then call chooseHole(holes) again.
* 4. if hole is not the same as the lastHole then keep track of
* 4. if hole is not the same as the lastHole then keep track of
* it (lastHole = hole) and return the hole
*
* Example:
* Example:
* const holes = document.querySelectorAll('.hole');
* chooseHole(holes) //> returns one of the 9 holes that you defined
*/
function chooseHole(holes) {
// TODO: Write your code here.

let randomId;
do {
randomId = randomInteger(0, 8);
} while (randomId === lastHole);
lastHole = randomId;
return holes[randomId];
}

/**
Expand All @@ -85,7 +96,17 @@ function chooseHole(holes) {
*/
function gameOver() {
// TODO: Write your code here

if(time > 0){
let timeoutId = showUp();
return timeoutId;
} else {
let gameStopped = stopGame();
song.pause();
// Change the button back to Start and Enable the start button again
startButton.textContent = "Start";
startButton.disabled = false;
return gameStopped;
}
}

/**
Expand All @@ -98,8 +119,9 @@ function gameOver() {
*
*/
function showUp() {
let delay = 0; // TODO: Update so that it uses setDelay()
const hole = 0; // TODO: Update so that it use chooseHole()
let delay = setDelay(difficulty);
const hole = chooseHole(holes);
console.log("Showing mole in hole:", hole); // Log the hole selected
return showAndHide(hole, delay);
}

Expand All @@ -112,25 +134,25 @@ function showUp() {
*
*/
function showAndHide(hole, delay){
// TODO: call the toggleVisibility function so that it adds the 'show' class.

const timeoutID = setTimeout(() => {
// TODO: call the toggleVisibility function so that it removes the 'show' class when the timer times out.

hole.classList.add('show'); // Add the 'show' class to the hole
console.log("Mole shown in hole:", hole); // Log the hole where the mole is shown
let timeoutID = setTimeout(() => {
hole.classList.remove('show'); // Remove the 'show' class after the delay
console.log("Mole hidden from hole:", hole); // Log the hole where the mole is hidden
gameOver();
}, 0); // TODO: change the setTimeout delay to the one provided as a parameter
}, delay);
return timeoutID;
}

/**
*
* Adds or removes the 'show' class that is defined in styles.css to
* Adds or removes the 'show' class that is defined in styles.css to
* a given hole. It returns the hole.
*
*/
function toggleVisibility(hole){
// TODO: add hole.classList.toggle so that it adds or removes the 'show' class.

hole.classList.toggle();
return hole;
}

Expand All @@ -139,14 +161,15 @@ function toggleVisibility(hole){
* This function increments the points global variable and updates the scoreboard.
* Use the `points` global variable that is already defined and increment it by 1.
* After the `points` variable is incremented proceed by updating the scoreboard
* that you defined in the `index.html` file. To update the scoreboard you can use
* `score.textContent = points;`. Use the comments in the function as a guide
* that you defined in the `index.html` file. To update the scoreboard you can use
* `score.textContent = points;`. Use the comments in the function as a guide
* for your implementation:
*
*/
function updateScore() {
// TODO: Write your code here

points += 1;
score.textContent = points;
console.log("Score updated:", points); // Log the updated score
return points;
}

Expand All @@ -158,9 +181,9 @@ function updateScore() {
*
*/
function clearScore() {
// TODO: Write your code here
// points = 0;
// score.textContent = points;
points = 0;
score.textContent = points;
console.log("Score cleared:", points); // Log the cleared score
return points;
}

Expand All @@ -170,9 +193,11 @@ function clearScore() {
*
*/
function updateTimer() {
// TODO: Write your code here.
// hint: this code is provided to you in the instructions.

if (time > 0){
time -= 1;
timerDisplay.textContent = time;
console.log("Timer updated:", time); // Log the updated timer value
}
return time;
}

Expand All @@ -184,7 +209,7 @@ function updateTimer() {
*/
function startTimer() {
// TODO: Write your code here
// timer = setInterval(updateTimer, 1000);
timer = setInterval(updateTimer, 1000);
return timer;
}

Expand All @@ -196,20 +221,35 @@ function startTimer() {
* the moles.
*
*/

// Function to play whack sound
function playWhackSound() {
whackSound.play();
}

function whack(event) {
// TODO: Write your code here.
// call updateScore()
return points;
playWhackSound(); // Play whack sound
updateScore(); // Increment score

// Provide visual feedback (screen flash)
document.body.classList.add('flash');
setTimeout(() => {
document.body.classList.remove('flash');
}, 500); // Adjust the duration of the flash as needed

// Other whack logic...
}


/**
*
* Adds the 'click' event listeners to the moles. See the instructions
* for an example on how to set event listeners using a for loop.
*/
function setEventListeners(){
// TODO: Write your code here

function setEventListeners() {
for (const mole of moles) {
mole.addEventListener("click", whack);
}
return moles;
}

Expand Down Expand Up @@ -242,12 +282,27 @@ function stopGame(){
* is clicked.
*
*/
function startGame(){
//setDuration(10);
//showUp();
function startGame() {
// Disable the start button to prevent multiple game instances
startButton.disabled = true;
startButton.textContent = "Game In Progress";
song.play();
// Clear the score and set event listeners for moles
clearScore();
setEventListeners();

// Set the duration of the game (in seconds)
setDuration(10);

// Start the timer and show up the moles
startTimer();
showUp();

return "game started";
}


// attach event listener to start button
startButton.addEventListener("click", startGame);


Expand Down
Loading