One last 'project' for practicing events, loops and functions before moving on to new material!
When the page loads, there should be lots randomly generated boxes on the page on a single color (red) and have one box be a different color (blue). The goal of the game is to navigate your cursor around all of the same red boxes and hover over the single blue box.
- Generate a random number between 0 and
n - 1
to act as our "special box" index and save in variable forspecialBoxIndex
- Will need to have a function called placeRandomBoxes() that creates
n
new divs, gives them a CSS class ofbox
, generates two random numbers for their X and Y positioning and appends them to the page. - In the loop of placing the random boxes, check to see if
i == specialBoxIndex
. If it is, add classesbox specialBox
. If not, just addbox
. - Also in the loop, we will need to add event listeners to the box
- if it is the special box, a
mouseover
event should be listened to and call a functionwinGame()
. - If its a normal box, attach an event listener to the same event and call a function
loseGame()
.
- if it is the special box, a
- Create a function called
removeEventListeners
. In the function, grab all elements with the class ofbox
, loop through them and remove both thewinGame
andloseGame
event listeners from the elements. - Call the
removeEventListeners
function inside ofwinGame()
andloseGame()
to make sure the game is unplayable when a result is reached. - Both winning and losing should cause an alert to appear letting you know the result of the game.
- Instead of
divs
use images. - Replace the alerts with
div
modals. Make the divs part of your HTML but set them todisplay: none
in your CSS. Then, whenwinGame
orloseGame
is called, you can grab the modal by an ID and set thedisplay
to block. - Add buttons inside of these modals that, when clicked, reload the page using
location.reload()
.
- On page load, start a timer that updates the screen to let the user know how many seconds have gone by during the game.
- Save high scores in
localStorage
and display on screen.- When the game ends, check to see if completed time is better than the stored high score
- If it is, update the saved value in storage
- When the game ends, check to see if completed time is better than the stored high score
- Add 'Jeopardy' music that plays in the background
- Allow the users to select from different difficulties
- Toggle a variable that will be used as the amount of boxes to inject into the page
- I.E. easy = 100 boxes, medium = 250, hard = 500
- Toggle a variable that will be used as the amount of boxes to inject into the page