diff --git a/assets/background.png b/assets/background.png index 94ce7e69..dc6c4e60 100644 Binary files a/assets/background.png and b/assets/background.png differ diff --git a/assets/mole.png b/assets/mole.png index bb580663..6f8f3ac1 100644 Binary files a/assets/mole.png and b/assets/mole.png differ diff --git a/assets/wp2568544.png b/assets/wp2568544.png new file mode 100644 index 00000000..599944aa Binary files /dev/null and b/assets/wp2568544.png differ diff --git a/index.html b/index.html index 3ea22fdc..38cbdbb3 100644 --- a/index.html +++ b/index.html @@ -1,21 +1,29 @@ - + + + + + -

+
+

Catch-Me-If-You-Can!!

+
+
-

Click start to play!

+

Click to play!

score: 0

-

0 seconds left.

+

0 seconds left.

-
+ +
@@ -23,7 +31,34 @@

0 seconds left.

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ diff --git a/src/index.js b/src/index.js index dc08e7f6..b8d4f5da 100644 --- a/src/index.js +++ b/src/index.js @@ -1,9 +1,10 @@ -const holes = document.querySelectorAll('.hole'); -const moles = document.querySelectorAll('.mole'); +document.addEventListener("DOMContentLoaded", () => { +const holes = document.querySelectorAll(".hole"); +const moles = document.querySelectorAll(".mole"); +/*missing query selectors for the score and timer */ 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'); +const timerDisplay = document.querySelector('#timer'); let time = 0; let timer; @@ -14,15 +15,11 @@ let difficulty = "hard"; /** * Generates a random integer within a 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; } + /** * Sets the time delay given a difficulty parameter. @@ -33,18 +30,20 @@ function randomInteger(min, max) { * return 1000. If difficulty is set to "hard" it should return a randomInteger between * 600 and 1200. * - * 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 === 'easy') { + return 1500; + } else if (difficulty === 'normal') { + return 1000; + } else if (difficulty === 'hard') { + return randomInteger(600, 1200); + } + } -/** + + /** * Chooses a random hole from a list of holes. * * This function should select a random Hole from the list of holes. @@ -54,19 +53,21 @@ function setDelay(difficulty) { * 4. if hole is not the same as the lastHole then keep track of * it (lastHole = hole) and return the hole * - * 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. + function chooseHole(holes) { + + const index = randomInteger(0, holes.length - 1); + const hole = holes[index]; + if (hole === lastHole) { + return chooseHole(holes); + } + lastHole = hole; + return hole; + } + -} -/** -* -* Calls the showUp function if time > 0 and stops the game if time = 0. -* + /** Calls the showUp function if time > 0 and stops the game if time = 0. * The purpose of this function is simply to determine if the game should * continue or stop. The game continues if there is still time `if(time > 0)`. * If there is still time then `showUp()` needs to be called again so that @@ -75,18 +76,20 @@ function chooseHole(holes) { * return the timeoutId if the game continues or the string "game stopped" * if the game is over. * -* // if time > 0: -* // timeoutId = showUp() -* // return timeoutId -* // else -* // gameStopped = stopGame() -* // return gameStopped -* +* */ -function gameOver() { - // TODO: Write your code here - -} + function gameOver() { + if(time > 0){ + let timeoutId = showUp(); + return timeoutId; + } else { + let gameStopped = stopGame(); + clearInterval(timer); + return gameStopped; + } + } + + /** * @@ -97,11 +100,13 @@ function gameOver() { * to call `showAndHide(hole, delay)`. * */ -function showUp() { - let delay = 0; // TODO: Update so that it uses setDelay() - const hole = 0; // TODO: Update so that it use chooseHole() - return showAndHide(hole, delay); -} + function showUp() { + let delay = setDelay(difficulty);/*updated from 0 to setDelay()*/ + const hole = chooseHole(holes);/*Update from 0 to chooseHole()*/ + return showAndHide(hole, delay); + } + + /** * @@ -111,16 +116,20 @@ function showUp() { * the timeoutID * */ -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. - - gameOver(); - }, 0); // TODO: change the setTimeout delay to the one provided as a parameter - return timeoutID; -} + function showAndHide(hole, delay) { + /*call the toggleVisibility function so that it adds the 'show' class.*/ + delay = setDelay(difficulty); + toggleVisibility(hole, 'show'); + /*call the toggleVisibility function so that it removes the 'show' class when the timer times out.*/ + const timeoutID = setTimeout(() => { + toggleVisibility(hole, 'hide'); + gameOver(); + /*changed the setTimeout delay to the one provided as a parameter*/ + },delay); + return timeoutID; + } + + /** * @@ -128,27 +137,29 @@ function showAndHide(hole, delay){ * a given hole. It returns the hole. * */ -function toggleVisibility(hole){ - // TODO: add hole.classList.toggle so that it adds or removes the 'show' class. - - return hole; -} + function toggleVisibility(hole) { + /*add hole.classList.toggle so that it adds or removes the 'show' class*/ + hole.classList.toggle('show'); + return 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 -* for your implementation: +* that you defined in the `index.html` file. * */ -function updateScore() { - // TODO: Write your code here + function updateScore() { + + points++; + score.textContent = points; + return points; + } - return points; -} /** * @@ -157,101 +168,114 @@ function updateScore() { * the points. * */ -function clearScore() { - // TODO: Write your code here - // points = 0; - // score.textContent = points; - return points; -} - -/** + function clearScore() { + points= 0; + score.textContent = points; + return points; + } + + + /** * * Updates the control board with the timer if time > 0 * */ -function updateTimer() { - // TODO: Write your code here. - // hint: this code is provided to you in the instructions. - - return time; -} + function updateTimer() { + if (time > 0){ + time -= 1; + timerDisplay.textContent = time; + } + return time; + } -/** + + /** * * Starts the timer using setInterval. For each 1000ms (1 second) -* the updateTimer function get called. This function is already implemented +* the updateTimer function get called. * */ -function startTimer() { - // TODO: Write your code here - // timer = setInterval(updateTimer, 1000); - return timer; -} + function startTimer() { + timer = setInterval(updateTimer, 1000); + return timer; + } -/** -* -* This is the event handler that gets called when a player + + + /*This is the event handler that gets called when a player * clicks on a mole. The setEventListeners should use this event * handler (e.g. mole.addEventListener('click', whack)) for each of * the moles. * */ -function whack(event) { - // TODO: Write your code here. - // call updateScore() - return points; -} + function whack(event) { + updateScore() + return points; + } + /** * -* 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 +* Adds the 'click' event listeners to the moles*/ - return moles; -} + function setEventListeners(){ + moles.forEach( + mole => mole.addEventListener('click', whack) + ); + return moles; + } -/** + + + /** * * This function sets the duration of the game. The time limit, in seconds, * that a player has to click on the sprites. * */ -function setDuration(duration) { - time = duration; - return time; -} + function setDuration(duration) { + + time = duration; + return time; + } -/** + + /** * * This function is called when the game is stopped. It clears the * timer using clearInterval. Returns "game stopped". * */ -function stopGame(){ - // stopAudio(song); //optional - clearInterval(timer); - return "game stopped"; -} -/** + function stopGame(){ + /*stopAudio(song);*/ + clearInterval(timer); + return "game stopped"; + } + + + /** * * This is the function that starts the game when the `startButton` * is clicked. * */ -function startGame(){ - //setDuration(10); - //showUp(); - return "game started"; -} + function startGame() { + setDuration(10); + clearScore(); + startTimer(); + showUp(); + return "game started"; + } + + startButton.addEventListener("click", startGame); + setEventListeners(); +}); -startButton.addEventListener("click", startGame); + -// Please do not modify the code below. + // Please do not modify the code below. // Used for testing purposes. window.randomInteger = randomInteger; window.chooseHole = chooseHole; diff --git a/src/styles.css b/src/styles.css index 551996b1..51a7a73a 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,7 +1,6 @@ html { - /*background: url('./assets/background.png') no-repeat center center fixed;*/ - background: url('https://github.com/Thinkful-Ed/js-dev-final-capstone-starter/blob/main/assets/background.png?raw=true') no-repeat center center fixed; - box-sizing: border-box; + background: url('../assets/background.png') no-repeat center center fixed; + box-sizing: border-box; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; @@ -12,35 +11,41 @@ html { h1 { text-align: center; - font-size: 90px; + font-size: 30px; font-family: "Comic Sans MS", "Comic Sans", cursive; - color: white; - -webkit-text-stroke: 2px black; + color: rgb(44, 245, 127); + -webkit-text-stroke: 0px rgb(248, 240, 240); } h2 { text-align: center; - font-size: 40px; - color: white; - -webkit-text-stroke: 1px black; + font-size: 25px; + color: rgb(15, 14, 15); + -webkit-text-stroke: 1px rgb(243, 243, 237); } #start { text-align: center; - font-size: 30px; + font-size: 20px; } +#score { + color: rgb(230, 238, 240); +} + + #timer{ color: white; } .grid { width: 600px; - height: 400px; + height: 300px; display: flex; flex-wrap: wrap; - margin: 0 auto; - /*cursor: url('./assets/mallet.png'), pointer;*/ + margin: auto; + cursor:url('../assets/mallet.png'), pointer; + } .hole { @@ -51,32 +56,38 @@ h2 { .hole:after { display: block; - /*background: url("./assets/hole.png") bottom center no-repeat;*/ - background: url("https://github.com/Thinkful-Ed/js-dev-final-capstone-starter/blob/main/assets/hole.png?raw=true") bottom center no-repeat; + background: url("../assets/hole.png") bottom center no-repeat; background-size:contain; content:''; width: 100%; height: 100%; - position: absolute; + position:absolute; bottom: -40%; z-index: 2; pointer-events:none; } + + + .mole { - /*background:url('./assets/mole.png') bottom center no-repeat;*/ - background:url('https://github.com/Thinkful-Ed/js-dev-final-capstone-starter/blob/main/assets/mole.png?raw=true') bottom center no-repeat; + background:url('../assets/mole.png') bottom center no-repeat; background-size: 40%; position: absolute; top: 100%; width: 100%; height: 100%; /*transition: transform 0.5s;*/ - transition: all 1s; + transition: all 0.5s; pointer-events:auto; } .hole.show .mole { - top: 0; - /*transform: scale(1.1);*/ + top: 0; + transform: scale(1.1); } + + +p { + font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; +} \ No newline at end of file