Project 6 Game

Copy ALL of the contents in the public_html/csci2447/project5 folder into the public_html/csci2447/project6 folder. This ensures that you will not overwrite your work for the previous project. You will do this for each project from here on out. If you do not do this, there is no way for me to grade your previous project.
(5 pts) In the last project, you created an addMole() function which added the mole image to #gamespace. This worked well but each time it is called, it replaced the image which was already in there with a new one. We want to preserve the moles already in the #gamespace. Change your use of .html() in addMole() to .append(). Done!
(5 pts) Add a check (using an if-statement) to your function which decrements the timer that checks to see if the seconds remaining > 0 before repeating the call. You do not want your seconds to count past zero!
(5 pts) Now we will try to make the moles appear randomly around the screen. First, add the following code to your game.css file. This will allow us to use the “top” and “left” CSS styles on the mole IMG tag.

div#gamespace img { position: absolute; }

And add the following property to div#gamespace:

div#gamespace { position: relative; }
(15 pts) To actually randomly move each mole, you will need to call your random number functions! Call each function once in the addMole() function and save the returned value to a variable (eg. xPos and yPos). Now that you have two random values, you will need to add a “style” attribute to the mole IMG tag. For example:

In this “style” attribute, you will need to add a “left” and “top” property. The values for each property will be your random numbers.

Tweak the values of your random function to make the moles stay within the #gamespace.

Hint: The actual value would be be stored within a variable. You will call the function to run, and have the value stored within a variable. You will place the variable within the line of code where the value is to added.
(5 pts) When the mole is clicked, it should disappear as if it was whacked! To do this, add a line of code to your.on() function that makes image disappear when clicked. Note: There are a variety of methods that will allow you to do so in jQuery, and jQuery UI.

(15 pts) Randomize the time interval in which new moles appear. Currently, it is set to a static 2000 (2 seconds). The interval should vary between 0 and 2000 at random. You may create a new random function similar to your random x and y functions, if you like. Moles should now appear at random intervals!

Sample Solution