diff --git a/index.html b/index.html index 3ea22fdc..298db9fd 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,23 @@ + -

+

Whack-a-Mole

+
+
+
+
+
+
+
+
+
-
-

Click start to play!

-

score: 0

@@ -23,6 +33,27 @@

0 seconds left.

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/index.js b/src/index.js index dc08e7f6..f8d3cd8f 100644 --- a/src/index.js +++ b/src/index.js @@ -2,8 +2,12 @@ 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 endButton = document.querySelector('#end'); +const easyButton = document.querySelector("#easy"); +const normalButton = document.querySelector("#normal"); +const hardButton = document.querySelector("#hard"); +const score = document.querySelector('#score'); // Use querySelector() to get the score element +const timerDisplay = document.querySelector('#timer'); // use querySelector() to get the timer element. let time = 0; let timer; @@ -11,6 +15,21 @@ let lastHole = 0; let points = 0; let difficulty = "hard"; +const audioHit = new Audio("https://github.com/gabrielsanchez/erddiagram/blob/main/hit.mp3?raw=true"); +const song = new Audio("https://github.com/gabrielsanchez/erddiagram/blob/main/molesong.mp3?raw=true"); + +function playAudio(audioObject){ + audioObject.play(); +} + +function stopAudio(audioObject){ + audioObject.pause(); +} + +function play(){ + playAudio(song) +} + /** * Generates a random integer within a range. * @@ -21,7 +40,7 @@ let difficulty = "hard"; * */ function randomInteger(min, max) { - // return Math.floor(Math.random() * (max - min + 1)) + min; + return Math.floor(Math.random() * (max - min + 1)) + min; } /** @@ -41,7 +60,13 @@ function randomInteger(min, max) { */ function setDelay(difficulty) { // TODO: Write your code here. - + if (difficulty === "easy"){ + return 1500 + } else if (difficulty === "normal"){ + return 1000 + } else if (difficulty === "hard"){ + return randomInteger(600, 1200) + } } /** @@ -60,7 +85,17 @@ function setDelay(difficulty) { */ function chooseHole(holes) { // TODO: Write your code here. - + // 1. Generate a random integer from 0 to 8 and assign it to an index variable. + const index = randomInteger(0, 8); + // 2. Get a random hole with the random index (e.g., const hole = holes[index]). + const hole = holes[index]; + // 3. if hole === lastHole, then call chooseHole(holes) again because you don't want to return the same hole. + if (hole === lastHole){ + chooseHole(holes); + } + // 4. if hole is not the same as the lastHole, then keep track of it (lastHole = hole) and return the hole. + lastHole = hole; + return hole; } /** @@ -85,7 +120,13 @@ function chooseHole(holes) { */ function gameOver() { // TODO: Write your code here - + if (time>0){ + timeoutId = showUp(); + return timeoutId; + } else { + gameStopped = stopGame(); + return gameStopped; + } } /** @@ -98,8 +139,8 @@ 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); // TODO: Update so that it uses setDelay() + const hole = chooseHole(holes); // TODO: Update so that it use chooseHole() return showAndHide(hole, delay); } @@ -113,12 +154,13 @@ function showUp() { */ function showAndHide(hole, delay){ // TODO: call the toggleVisibility function so that it adds the 'show' class. + toggleVisibility(hole); const timeoutID = setTimeout(() => { // TODO: call the toggleVisibility function so that it removes the 'show' class when the timer times out. - + toggleVisibility(hole); gameOver(); - }, 0); // TODO: change the setTimeout delay to the one provided as a parameter + }, delay); // TODO: change the setTimeout delay to the one provided as a parameter return timeoutID; } @@ -130,7 +172,7 @@ function showAndHide(hole, delay){ */ function toggleVisibility(hole){ // TODO: add hole.classList.toggle so that it adds or removes the 'show' class. - + hole.classList.toggle("show"); return hole; } @@ -146,7 +188,11 @@ function toggleVisibility(hole){ */ function updateScore() { // TODO: Write your code here - + // Increment the points global variable by 1 point + points++; + // Update score.textContent with points. + score.textContent = points; + // Return points; return points; } @@ -159,8 +205,8 @@ function updateScore() { */ function clearScore() { // TODO: Write your code here - // points = 0; - // score.textContent = points; + points = 0; + score.textContent = points; return points; } @@ -172,7 +218,10 @@ 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; + } return time; } @@ -184,10 +233,17 @@ function updateTimer() { */ function startTimer() { // TODO: Write your code here - // timer = setInterval(updateTimer, 1000); + timer = setInterval(updateTimer, 1000); return timer; } +function endTimer(){ + time = 0; + timerDisplay.textContent = time; + setEventListeners(); + stopGame(); +} + /** * * This is the event handler that gets called when a player @@ -198,7 +254,7 @@ function startTimer() { */ function whack(event) { // TODO: Write your code here. - // call updateScore() + updateScore() return points; } @@ -209,7 +265,7 @@ function whack(event) { */ function setEventListeners(){ // TODO: Write your code here - + moles.forEach( mole => mole.addEventListener('click',whack)); return moles; } @@ -231,11 +287,12 @@ function setDuration(duration) { * */ function stopGame(){ - // stopAudio(song); //optional + stopAudio(song); //optional clearInterval(timer); return "game stopped"; } + /** * * This is the function that starts the game when the `startButton` @@ -243,13 +300,20 @@ function stopGame(){ * */ function startGame(){ - //setDuration(10); - //showUp(); + play(); + clearScore(); + setDuration(10); + showUp(); + startTimer(); + setEventListeners(); return "game started"; } startButton.addEventListener("click", startGame); - +endButton.addEventListener("click", endTimer); +easyButton.addEventListener("click", setDelay(easyButton)); +normalButton.addEventListener("click", setDelay(normalButton)); +hardButton.addEventListener("click", setDelay(hardButton)); // Please do not modify the code below. // Used for testing purposes. diff --git a/src/styles.css b/src/styles.css index 551996b1..621be197 100644 --- a/src/styles.css +++ b/src/styles.css @@ -7,31 +7,55 @@ html { -o-background-size: cover; background-size: cover; z-index:0; - overflow: hidden; + overflow: scroll; } h1 { text-align: center; - font-size: 90px; - font-family: "Comic Sans MS", "Comic Sans", cursive; + font-size: 150px; + font-family: "Amatic SC", "Comic Sans", cursive; color: white; - -webkit-text-stroke: 2px black; + -webkit-text-stroke: 5px black; } h2 { text-align: center; - font-size: 40px; + font-size: 30px; + font-family: "Special Elite", cursive; color: white; - -webkit-text-stroke: 1px black; + -webkit-text-stroke: 2px steelblue; } -#start { +button { text-align: center; font-size: 30px; + font-family: "Special Elite", cursive; + border-radius: 15%; + padding-top: 10px; +} + +button:focus { + background-color: navajowhite; } #timer{ - color: white; + color: white; + -webkit-text-stroke: 2px steelblue; +} + +.menu{ + width: 400px; + height: 60px; + display: flex; + flex-wrap: wrap; + margin: 0 auto; +} + +.menuList{ + box-sizing: border-box; + color: white; + cursor: pointer; + flex: 1 0 10%; } .grid { @@ -40,7 +64,7 @@ h2 { display: flex; flex-wrap: wrap; margin: 0 auto; - /*cursor: url('./assets/mallet.png'), pointer;*/ + cursor: url('/assets/mallet.png'), pointer; } .hole { @@ -78,5 +102,5 @@ h2 { .hole.show .mole { top: 0; - /*transform: scale(1.1);*/ + transform: scale(1.1); }