From a78003908acc6a50ade13c32c5488ea5153cd980 Mon Sep 17 00:00:00 2001 From: Mary Gail Ang Date: Tue, 28 May 2024 18:04:20 +0900 Subject: [PATCH 1/8] Changes for US-01 --- index.html | 25 +++++++++++++++++++++++-- src/index.js | 4 ++-- 2 files changed, 25 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 3ea22fdc..ea44fdcc 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,10 @@ -

+

Whack-a-mole

-

Click start to play!

+

Click to play!

score: 0

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

0 seconds left.

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/index.js b/src/index.js index dc08e7f6..9ded897a 100644 --- a/src/index.js +++ b/src/index.js @@ -2,8 +2,8 @@ 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. let time = 0; let timer; From 4b2adaff2932dd6e27edb88c4dd213f7cea4e57e Mon Sep 17 00:00:00 2001 From: Mary Gail Ang Date: Tue, 28 May 2024 18:21:48 +0900 Subject: [PATCH 2/8] Changes for US-02 --- src/index.js | 22 +++++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index 9ded897a..dbeed2d3 100644 --- a/src/index.js +++ b/src/index.js @@ -21,7 +21,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 +41,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 +66,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; } /** From 803d5a9924a7b5b0d677a76ddd43fc0094b6ca96 Mon Sep 17 00:00:00 2001 From: Mary Gail Ang Date: Tue, 28 May 2024 19:42:07 +0900 Subject: [PATCH 3/8] Changes for US-03 midway --- src/index.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/index.js b/src/index.js index dbeed2d3..83eb9b79 100644 --- a/src/index.js +++ b/src/index.js @@ -114,8 +114,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); } @@ -129,12 +129,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; } @@ -146,7 +147,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; } From 324c08722686ff1ad74e52d9b618c240472a6906 Mon Sep 17 00:00:00 2001 From: Mary Gail Ang Date: Tue, 28 May 2024 19:45:40 +0900 Subject: [PATCH 4/8] Changes for US-03 complete --- src/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index 83eb9b79..38690771 100644 --- a/src/index.js +++ b/src/index.js @@ -260,8 +260,8 @@ function stopGame(){ * */ function startGame(){ - //setDuration(10); - //showUp(); + setDuration(10); + showUp(); return "game started"; } From 76511873290bb67159dd2a539c1758d45f6ae73f Mon Sep 17 00:00:00 2001 From: Mary Gail Ang Date: Tue, 28 May 2024 19:53:04 +0900 Subject: [PATCH 5/8] Changes for US-04 complete --- src/index.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/index.js b/src/index.js index 38690771..57645224 100644 --- a/src/index.js +++ b/src/index.js @@ -163,7 +163,8 @@ function toggleVisibility(hole){ */ function updateScore() { // TODO: Write your code here - + points++; + score.textContent = points; return points; } @@ -176,8 +177,8 @@ function updateScore() { */ function clearScore() { // TODO: Write your code here - // points = 0; - // score.textContent = points; + points = 0; + score.textContent = points; return points; } @@ -215,7 +216,7 @@ function startTimer() { */ function whack(event) { // TODO: Write your code here. - // call updateScore() + updateScore() return points; } @@ -226,7 +227,7 @@ function whack(event) { */ function setEventListeners(){ // TODO: Write your code here - + moles.forEach( mole => mole.addEventListener("click",whack)); return moles; } From b6f96656c0ab28c7e2aa9569ab7ea2634ff541c0 Mon Sep 17 00:00:00 2001 From: Mary Gail Ang Date: Wed, 29 May 2024 17:07:49 +0900 Subject: [PATCH 6/8] Fixed test failures --- src/index.js | 23 +++++++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) diff --git a/src/index.js b/src/index.js index 57645224..3853055e 100644 --- a/src/index.js +++ b/src/index.js @@ -101,7 +101,13 @@ function chooseHole(holes) { */ function gameOver() { // TODO: Write your code here - + if (time>0){ + timeoutId = showUp(); + return timeoutId; + } else { + gameStopped = stopGame(); + return gameStopped; + } } /** @@ -163,8 +169,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; } @@ -190,7 +199,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; } @@ -202,7 +214,7 @@ function updateTimer() { */ function startTimer() { // TODO: Write your code here - // timer = setInterval(updateTimer, 1000); + timer = setInterval(updateTimer, 1000); return timer; } @@ -227,7 +239,7 @@ function whack(event) { */ function setEventListeners(){ // TODO: Write your code here - moles.forEach( mole => mole.addEventListener("click",whack)); + moles.forEach( mole => mole.addEventListener('click',whack)); return moles; } @@ -261,8 +273,11 @@ function stopGame(){ * */ function startGame(){ + clearScore(); setDuration(10); showUp(); + startTimer(); + setEventListeners(); return "game started"; } From c6b484271049da70e56806d0c5a6c846fe8e3e58 Mon Sep 17 00:00:00 2001 From: Mary Gail Ang Date: Fri, 31 May 2024 20:53:15 +0900 Subject: [PATCH 7/8] US-06 Completed --- index.html | 18 ++++++++++++++---- src/index.js | 35 +++++++++++++++++++++++++++++++++-- src/styles.css | 44 ++++++++++++++++++++++++++++++++++---------- 3 files changed, 81 insertions(+), 16 deletions(-) diff --git a/index.html b/index.html index ea44fdcc..298db9fd 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,23 @@ + -

Whack-a-mole

+

Whack-a-Mole

+
+
+
+
+
+
+
+
+
-
-

Click to play!

-

score: 0

diff --git a/src/index.js b/src/index.js index 3853055e..29e13cb1 100644 --- a/src/index.js +++ b/src/index.js @@ -2,6 +2,10 @@ const holes = document.querySelectorAll('.hole'); const moles = document.querySelectorAll('.mole'); const startButton = document.querySelector('#start'); // TODO: Add the missing query selectors: +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. @@ -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. * @@ -218,6 +237,11 @@ function startTimer() { return timer; } +function endTimer(){ + time = 0; + timerDisplay.textContent = time; +} + /** * * This is the event handler that gets called when a player @@ -261,11 +285,14 @@ function setDuration(duration) { * */ function stopGame(){ - // stopAudio(song); //optional + stopAudio(song); //optional clearInterval(timer); + endTimer(); + setEventListeners(); return "game stopped"; } + /** * * This is the function that starts the game when the `startButton` @@ -273,6 +300,7 @@ function stopGame(){ * */ function startGame(){ + play(); clearScore(); setDuration(10); showUp(); @@ -282,7 +310,10 @@ function startGame(){ } startButton.addEventListener("click", startGame); - +endButton.addEventListener("click", stopGame); +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); } From 8f023650c6c33253692a38429c64b157c824aaf0 Mon Sep 17 00:00:00 2001 From: Mary Gail Ang Date: Fri, 31 May 2024 20:58:18 +0900 Subject: [PATCH 8/8] Fix test issues --- src/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index 29e13cb1..f8d3cd8f 100644 --- a/src/index.js +++ b/src/index.js @@ -240,6 +240,8 @@ function startTimer() { function endTimer(){ time = 0; timerDisplay.textContent = time; + setEventListeners(); + stopGame(); } /** @@ -287,8 +289,6 @@ function setDuration(duration) { function stopGame(){ stopAudio(song); //optional clearInterval(timer); - endTimer(); - setEventListeners(); return "game stopped"; } @@ -310,7 +310,7 @@ function startGame(){ } startButton.addEventListener("click", startGame); -endButton.addEventListener("click", stopGame); +endButton.addEventListener("click", endTimer); easyButton.addEventListener("click", setDelay(easyButton)); normalButton.addEventListener("click", setDelay(normalButton)); hardButton.addEventListener("click", setDelay(hardButton));