2. Remove the temporary calls to your random number functions (two in total) in the ready() function. Disable the call to your score increment function in the “start” function. Incrementing the score should only occur when a user clicks a mole now. Disable any other code which was for testing purposes, so it does not ruin the game. 3. Now it is time to make your timer count down! There are plenty of articles on the web that shows you how to make a function repeat. This citWebDev article discussing how to make functions repeat is a good starting point. Use this information to make your timer function repeat every one second after the user clicks the “start” button. Add a check (using an if or if else statement) to your function which decrements the timer that checks to see if the seconds remaining greater than 0 before repeating the call. You do not want your seconds to count past zero!
4. Next, we need to make the image inside the gamespace clickable! Recall that you can use .click(), but this will not work for images added after page load. Use .on() to make all of your images clickable inside of the gamespace! When the image is clicked, call your score incrementing function. This code should go in your ready() function.
5. To make this game more…. game-like… we need to display more than one image! Make addImage() repeat on an timed interval (say two seconds…we will randomize this later). Now, multiple images should appear and be clickable. Modify your existing addImage()function. Hint: repeating is similar to the timer counting down. Note: Depending on how you added your code, you will not see the images being added repeatedly because our current code overwrites the #gamespace HTML each time; replacing the image which was there. If you utilized the append method, you will see the images appear next to each other, and will not stop. This is ok to happen.
6. Find a new mouse cursor to use for your game. Download the cursor into the img folder. Use your external stylesheet to have the mouse cursor only change when hovering over the gamespace.
and I need to adjust my gamespace. It is adjusting to different sizes. It needs to be a fix size. In my style sheet, I have:
<strong> height: 50px;
border: 2px solid #CCC;
I would need the width to be 600px, height 300 px.
By then end of this assignment , the game should do the following:
- Fully and automatically decrement the timer every 1 second down to 0.
- A single image should appear automatically on a timed interval.
- User should be able to click the image.
- Upon clicking a image, the user’s score is incremented by 1.
- Adding a new mouse cursor to the game.
I would need the assignment completed by Friday before midnight.