|
| 1 | +const holes = document.querySelectorAll('.hole'); |
| 2 | +const moles = document.querySelectorAll('.mole'); |
| 3 | +const startButton = document.querySelector('#start'); |
| 4 | +const score = document.querySelector('#score'); |
| 5 | +const timerDisplay = document.querySelector('#timer'); |
| 6 | + |
| 7 | +let time = 0; |
| 8 | +let timer; |
| 9 | +let lastHole = 0; |
| 10 | +let points = 0; |
| 11 | +let difficulty = "hard"; |
| 12 | + |
| 13 | +/** |
| 14 | + * Generates a random integer within a range. |
| 15 | + * |
| 16 | + * The function takes two values as parameters that limits the range |
| 17 | + * of the number to be generated. For example, calling randomInteger(0,10) |
| 18 | + * will return a random integer between 0 and 10. Calling randomInteger(10,200) |
| 19 | + * will return a random integer between 10 and 200. |
| 20 | + * |
| 21 | + */ |
| 22 | +function randomInteger(min, max) { |
| 23 | + return Math.floor(Math.random() * (max - min + 1)) + min; |
| 24 | +} |
| 25 | + |
| 26 | +/** |
| 27 | + * Sets the time delay given a difficulty parameter. |
| 28 | + * |
| 29 | + * The function takes a `difficulty` parameter that can have three values: `easy` |
| 30 | + * `normal` or `hard`. If difficulty is "easy" then the function returns a time delay |
| 31 | + * of 1500 milliseconds (or 1.5 seconds). If the difficulty is set to "normal" it should |
| 32 | + * return 1000. If difficulty is set to "hard" it should return a randomInteger between |
| 33 | + * 600 and 1200. |
| 34 | + * |
| 35 | + * Example: |
| 36 | + * setDelay("easy") //> returns 1500 |
| 37 | + * setDelay("normal") //> returns 1000 |
| 38 | + * setDelay("hard") //> returns 856 (returns a random number between 600 and 1200). |
| 39 | + * |
| 40 | + */ |
| 41 | +function setDelay(difficulty) { |
| 42 | + if(difficulty === "easy"){ |
| 43 | + return 1500; |
| 44 | + } else if (difficulty === "normal"){ |
| 45 | + return 1000; |
| 46 | + } else if (difficulty === "hard"){ |
| 47 | + return randomInteger(600, 1200); |
| 48 | + } |
| 49 | +} |
| 50 | + |
| 51 | +/** |
| 52 | + * Chooses a random hole from a list of holes. |
| 53 | + * |
| 54 | + * This function should select a random Hole from the list of holes. |
| 55 | + * 1. generate a random integer from 0 to 8 and assign it to an index variable |
| 56 | + * 2. get a random hole with the random index (e.g. const hole = holes[index]) |
| 57 | + * 3. if hole === lastHole then call chooseHole(holes) again. |
| 58 | + * 4. if hole is not the same as the lastHole then keep track of |
| 59 | + * it (lastHole = hole) and return the hole |
| 60 | + * |
| 61 | + * Example: |
| 62 | + * const holes = document.querySelectorAll('.hole'); |
| 63 | + * chooseHole(holes) //> returns one of the 9 holes that you defined |
| 64 | + */ |
| 65 | +function chooseHole(holes) { |
| 66 | + const index = randomInteger(0, holes.length - 1); |
| 67 | + const hole = holes[index]; |
| 68 | + if (hole === lastHole) { |
| 69 | + return chooseHole(holes); |
| 70 | + } |
| 71 | + lastHole = hole; |
| 72 | + return hole; |
| 73 | +} |
| 74 | + |
| 75 | +/** |
| 76 | +* |
| 77 | +* Calls the showUp function if time > 0 and stops the game if time = 0. |
| 78 | +* |
| 79 | +* The purpose of this function is simply to determine if the game should |
| 80 | +* continue or stop. The game continues if there is still time `if(time > 0)`. |
| 81 | +* If there is still time then `showUp()` needs to be called again so that |
| 82 | +* it sets a different delay and a different hole. If there is no more time |
| 83 | +* then it should call the `stopGame()` function. The function also needs to |
| 84 | +* return the timeoutId if the game continues or the string "game stopped" |
| 85 | +* if the game is over. |
| 86 | +* |
| 87 | +* // if time > 0: |
| 88 | +* // timeoutId = showUp() |
| 89 | +* // return timeoutId |
| 90 | +* // else |
| 91 | +* // gameStopped = stopGame() |
| 92 | +* // return gameStopped |
| 93 | +* |
| 94 | +*/ |
| 95 | +function gameOver() { |
| 96 | + if(time > 0){ |
| 97 | + let timeoutId = showUp(); |
| 98 | + return timeoutId; |
| 99 | + } else { |
| 100 | + let gameStopped = stopGame(); |
| 101 | + return gameStopped; |
| 102 | + } |
| 103 | +} |
| 104 | + |
| 105 | +/** |
| 106 | +* |
| 107 | +* Calls the showAndHide() function with a specific delay and a hole. |
| 108 | +* |
| 109 | +* This function simply calls the `showAndHide` function with a specific |
| 110 | +* delay and hole. The function needs to call `setDelay()` and `chooseHole()` |
| 111 | +* to call `showAndHide(hole, delay)`. |
| 112 | +* |
| 113 | +*/ |
| 114 | +function showUp() { |
| 115 | + let delay = setDelay(difficulty); |
| 116 | + const hole = chooseHole(holes); |
| 117 | + return showAndHide(hole, delay); |
| 118 | +} |
| 119 | + |
| 120 | +/** |
| 121 | +* |
| 122 | +* The purpose of this function is to show and hide the mole given |
| 123 | +* a delay time and the hole where the mole is hidden. The function calls |
| 124 | +* `toggleVisibility` to show or hide the mole. The function should return |
| 125 | +* the timeoutID |
| 126 | +* |
| 127 | +*/ |
| 128 | +function showAndHide(hole, delay){ |
| 129 | + toggleVisibility(hole); |
| 130 | + const timeoutID = setTimeout(() => { |
| 131 | + toggleVisibility(hole); |
| 132 | + gameOver(); |
| 133 | + }, delay); |
| 134 | + return timeoutID; |
| 135 | +} |
| 136 | + |
| 137 | +/** |
| 138 | +* |
| 139 | +* Adds or removes the 'show' class that is defined in styles.css to |
| 140 | +* a given hole. It returns the hole. |
| 141 | +* |
| 142 | +*/ |
| 143 | +function toggleVisibility(hole){ |
| 144 | + hole.classList.toggle('show'); |
| 145 | + return hole; |
| 146 | +} |
| 147 | + |
| 148 | +/** |
| 149 | +* |
| 150 | +* This function increments the points global variable and updates the scoreboard. |
| 151 | +* Use the `points` global variable that is already defined and increment it by 1. |
| 152 | +* After the `points` variable is incremented proceed by updating the scoreboard |
| 153 | +* that you defined in the `index.html` file. To update the scoreboard you can use |
| 154 | +* `score.textContent = points;`. Use the comments in the function as a guide |
| 155 | +* for your implementation: |
| 156 | +* |
| 157 | +*/ |
| 158 | +function updateScore() { |
| 159 | + points++; |
| 160 | + score.textContent = points; |
| 161 | + return points; |
| 162 | +} |
| 163 | + |
| 164 | +/** |
| 165 | +* |
| 166 | +* This function clears the score by setting `points = 0`. It also updates |
| 167 | +* the board using `score.textContent = points`. The function should return |
| 168 | +* the points. |
| 169 | +* |
| 170 | +*/ |
| 171 | +function clearScore() { |
| 172 | + points = 0; |
| 173 | + score.textContent = points; |
| 174 | + return points; |
| 175 | +} |
| 176 | + |
| 177 | +/** |
| 178 | +* |
| 179 | +* Updates the control board with the timer if time > 0 |
| 180 | +* |
| 181 | +*/ |
| 182 | +function updateTimer() { |
| 183 | + if (time > 0){ |
| 184 | + time -= 1; |
| 185 | + timerDisplay.textContent = time; |
| 186 | + } |
| 187 | + return time; |
| 188 | +} |
| 189 | + |
| 190 | +/** |
| 191 | +* |
| 192 | +* Starts the timer using setInterval. For each 1000ms (1 second) |
| 193 | +* the updateTimer function get called. This function is already implemented |
| 194 | +* |
| 195 | +*/ |
| 196 | + |
| 197 | +function startTimer() { |
| 198 | + timer = setInterval(updateTimer, 1000); |
| 199 | + return timer; |
| 200 | +} |
| 201 | + |
| 202 | +/** |
| 203 | +* |
| 204 | +* This is the event handler that gets called when a player |
| 205 | +* clicks on a mole. The setEventListeners should use this event |
| 206 | +* handler (e.g. mole.addEventListener('click', whack)) for each of |
| 207 | +* the moles. |
| 208 | +* |
| 209 | +*/ |
| 210 | + |
| 211 | +function whack(event) { |
| 212 | + // playAudio(audioHit); // optional |
| 213 | + updateScore(); |
| 214 | + return points; |
| 215 | +} |
| 216 | + |
| 217 | +/** |
| 218 | +* |
| 219 | +* Adds the 'click' event listeners to the moles. |
| 220 | +* |
| 221 | +*/ |
| 222 | +function setEventListeners(){ |
| 223 | + moles.forEach( |
| 224 | + mole => mole.addEventListener('click', whack) |
| 225 | + ); |
| 226 | + return moles; |
| 227 | +} |
| 228 | + |
| 229 | +/** |
| 230 | +* |
| 231 | +* This function sets the duration of the game. The time limit, in seconds, |
| 232 | +* that a player has to click on the sprites. |
| 233 | +* |
| 234 | +*/ |
| 235 | +function setDuration(duration) { |
| 236 | + time = duration; |
| 237 | + return time; |
| 238 | +} |
| 239 | + |
| 240 | +/** |
| 241 | +* |
| 242 | +* This function is called when the game is stopped. It clears the |
| 243 | +* timer using clearInterval. Returns "game stopped". |
| 244 | +* |
| 245 | +*/ |
| 246 | +function stopGame(){ |
| 247 | + // stopAudio(song); //optional |
| 248 | + clearInterval(timer); |
| 249 | + return "game stopped"; |
| 250 | +} |
| 251 | + |
| 252 | +/** |
| 253 | +* |
| 254 | +* This is the function that starts the game when the `startButton` |
| 255 | +* is clicked. |
| 256 | +* |
| 257 | +*/ |
| 258 | +function startGame(){ |
| 259 | + setDuration(10); |
| 260 | + clearScore(); |
| 261 | + setEventListeners(); |
| 262 | + startTimer(); |
| 263 | + showUp(); |
| 264 | + // loopAudio(song); //optional |
| 265 | + return "game started"; |
| 266 | +} |
| 267 | + |
| 268 | +startButton.addEventListener("click", startGame); |
| 269 | + |
| 270 | +/* |
| 271 | +// audio implementation is optional |
| 272 | +
|
| 273 | +const audioHit = new Audio("https://github.com/gabrielsanchez/erddiagram/blob/main/hit.mp3?raw=true"); |
| 274 | +const song = new Audio("https://github.com/gabrielsanchez/erddiagram/blob/main/molesong.mp3?raw=true"); |
| 275 | +
|
| 276 | +function playAudio(audioObject) { |
| 277 | + audioObject.play(); |
| 278 | +} |
| 279 | +
|
| 280 | +function loopAudio(audioObject) { |
| 281 | + audioObject.loop = true; |
| 282 | + playAudio(audioObject); |
| 283 | +} |
| 284 | +
|
| 285 | +function stopAudio(audioObject) { |
| 286 | + audioObject.pause(); |
| 287 | +} |
| 288 | +
|
| 289 | +*/ |
| 290 | + |
| 291 | +// Please do not modify the code below. |
| 292 | +// Used for testing purposes. |
| 293 | +window.randomInteger = randomInteger; |
| 294 | +window.chooseHole = chooseHole; |
| 295 | +window.setDelay = setDelay; |
| 296 | +window.startGame = startGame; |
| 297 | +window.gameOver = gameOver; |
| 298 | +window.showUp = showUp; |
| 299 | +window.holes = holes; |
| 300 | +window.moles = moles; |
| 301 | +window.showAndHide = showAndHide; |
| 302 | +window.points = points; |
| 303 | +window.updateScore = updateScore; |
| 304 | +window.clearScore = clearScore; |
| 305 | +window.whack = whack; |
| 306 | +window.time = time; |
| 307 | +window.setDuration = setDuration; |
| 308 | +window.toggleVisibility = toggleVisibility; |
| 309 | +window.setEventListeners = setEventListeners; |
0 commit comments