TASK #1
TASK:
Create a variable called “cursor_cost” that will contain the cost of the cursor. Be sure to initialize the variable to 15.
HINT:
Use the var
keyword to create a global
variable at the top of your program. Then use the equals operator to set the variable to the value 15.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #2
TASK:
Allow the user to buy
a cursor by clicking on the image when they
have enough cookies. Remember that the user’s num_cookies should decrease
by the cursor_cost AND that
the cursor_cost should increase by a factor of 1.2
every time a cursor is purchased.
HINT:
Add an addEventListener to the start function that will
run a function called select_cursor. When select_cursor is executed, decrease num_cookies by cursor_cost
and increase cursor_cost by multiplying by 1.2.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #3
TASK:
Make the picture of the cursor opaque when player doesn’t
have enough cookies and solid when they do.
HINT:
Create a function called hideShow
that is
run in update
. In hideShow, use getElementByID to change the opacity
of the div containing
the picture of the cursor to 1 if “num_cookies” is greater than or equal
to “cursor_cost.
Otherwise, the div’s opacity
should be set to 0.2.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #4
TASK:
Show the number of cursors the user has purchased.
HINT:
Create a variable called num_cursor
that will
contain the number of cursors the user has bought. Be sure to initialize the variable to 0
. You
will need to increment this variable every time the user buys a cursor. Then, you will need to
use getElementByID to update the text to show the content of “num_cursor”. Remember that you will
need to use Math.floor()
to ensure that decimal places are not shown to the user.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #5
TASK:
Keep track of the Cookies Per Second.
HINT:
Create a global variable called CPS
that
will contain the number of cookies per second. Be sure to initialize it to 0. You will
need to increment the CPS variable by 0.1 every time a cursor is purchased. Remember that
you will need to show the content of CPS by using getElementByID.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #6
TASK:
Increase the number of cookies by CPS every second.
HINT:
You will need to increment num_cookies by
CPS/10
in the update function. You need to divide by 10 since update is running every 100
milliseconds, which is 10 times per second.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #7
TASK:
Download a sound that will be played when a cursor is purchased.
HINT:
You have several options: download a sound from a
sound archive website, rip a sound effect off of youtube, download a library of sounds, or use the
sounds I used here. Once a
sound file is downloaded, you will need to create a folder called sounds
and place the files there.
Refer to the video below to see how to complete each task.
CHECK UP:
Watch the video below to check that you completed the task.
TASK #8
TASK:
Play a sound when a cursor is purchased.
HINT:
You will need to create a global variable
called snd_cursor
and set it equal to the appropriate sound file using the Audio class
along with a pathway to the file. To play the file, use the Audio class’ play
method at
the appropriate time.
CHECK UP:
Watch the video below to check that you completed the task.
CHALLENGE EXERCISE
- Apply the same algorithm to the other buildings in your web application.
- Add the other sound files to your web application: background music, clicking on the cookie, and purchasing a building.
SUPER CHALLENGE EXERCISE
- Add commas to the number of cookies. For example, 1000000 would become 1,000,000.
- Make the buildings fully transparent until they are able to be purchased. After that, make them semi-transparent when not able to be purchased.
- Modify the number of cookies to use 'B' for billion, 'T' for trillion, 'Q' for quadrillion and so on.
- Add upgrades for the building as can be found here.