Final Project
For this project, you may work with a partner, or you may choose to work alone.
This project is worth up to 110 points (out of 100). It combines html, css, and javaScript. If all
of it is completed correctly and working you can earn 110 total points.
For your final project you will be creating a game, in which a turkey (or animal of your choice) must fly
from one end of the screen to the other end while scary snowmen and wonky reindeer try to get it
(again, animals/creatures are of your choice). If the turkey successfully makes it from one end of the
screen to the other, the score increases by 10 points. If, however, the turkey gets caught by a snowman
or a reindeer, then the score goes down by 10 points and the turkey returns to the right side of the
screen. Below is a screenshot of the game before it starts:
HTML and CSS:
For this lab, I set up the html so that I had 2 rows of clouds, positioned absolutely, with the z index of
the first row of clouds set to 0 and the second row set to 20. I then added 4 reindeer images, each
positioned absolutely, and with a z-index of 10.
I also had a row of house images positioned absolutely with a z index of 20, a row of 5 snowman images
positioned absolutely with a z index of 10, and a row of snow images with a z index of 0.
At the top of my html page I had a header saying “Survive the Holidays” and a paragraph that was
initialized with text saying, Turkey Score: 0.
At the bottom of my html page, I had a table with 4 arrows, one pointing left, one pointing right, one
pointing up, and one pointing down. These arrows will be used to call a function that will move the
turkey up, down, left, and right.
Below that, I had a button for starting the game (Note: I actually have 2 buttons, one for a version of the
game that may make it easier to see what is happening, and one that requires almost no extra work but
is harder to follow visually).
And finally, I added an image of a flying turkey, positioned absolutely.
The snowmen, the reindeer, the turkeys, and the paragraph all must have unique ids.
I used a table with 3 rows and 0 columns to make the top and bottom of the game line up nicely.
You are required to have: at least 2 creatures (which in your javascript will chase your cute creature)
and a cute creature. You must have a start button, a paragraph where the score will go, and the arrow
buttons for moving your cute creature.
JavaScript Part:
At a minimum, you can do the javaScript part with a number of arrays, a few variables, and 4 functions.
Let’s start with moving the turkey (or your cute creature):
You will need two have 2 variables in your javascript: one for the top position and one for the
left position of the turkey. These two variables should be set to the absolute position from the
top and the absolute position from the left of your turkey on your web page (e.g., mine was 350
from the top and 1160 from the left) See the above picture to see where my turkey started.
You will need a function for moving your turkey.
If you want to move the turkey to the left by 10 pixels, inside the function you will have to first
take your left position variable and subtract 10. Then you should reposition the turkey as
follows:
document.getElementById(“turkeyid”).style.left = leftposition + “px”;
Where ‘turkeyid’ should be replaced with the id of the turkey image in your html page, and
leftposition should be replaced with the name of the variable holding the position of the turkey
from the left.
Now go back to your html code and add code so that when you click on the left arrow, the function you
just created is called.
Save your page, and click on the left arrow image. Your turkey should move 10 pixels to the left. You
should be able to click multiple times and the turkey should continue to move over 10 pixels each time.
You now have a choice: You can create 3 more functions similar to the one above, with one adding 10
to the leftposition variable and repositioning the turkey that many pixels from the left (just like in the
above function – the only difference is that you add 10 pixels first instead of subtracting 10 pixels). You
can then associate this function with the right arrow in your code. And then you can create 2 more
functions, one in which you add 10 to the top position variable and then reposition the turkey from the
top as follows:
document.getElementById(“turkeyid”).style.top = topposition + “px”;
Where ‘turkeyid’ should be replaced with the id of the turkey image in your html page, and
topposition should be replaced with the name of the variable holding the position of the turkey
from the top. This function should then be called when you click on the down arrow.
And, of course, a final function for moving the turkey up, which will consist of subtracting 10 from the
topposition variable and using document.getElementById to reposition the turkey up 10 pixels. Call this
function when you click on the up arrow.
Save your code and test it.
Note: we will modify the left movement function later. We also might want to add restrictions to how
high up the turkey can go and how low the turkey can go and how far to the right the turkey can go later
on by simply adding an if condition (e.g., in your right moving function, add: if (leftpos < 1160) {… so that
the turkey only moves to the right if the left position is less than 1160 ).
As an alternative:
You can modify the first function so that it takes an input parameter indicating which direction
the turkey should move in, and then moving the turkey based on the input parameter.
Now you want to make one of your monsters (either the reindeer or the snoman) move:
Again, we will need some variables.
At the top of your script, add a variable for the monster’s position from the left and the
monster’s position from the top (don’t name these variables the same thing that you named
your turkey’s left position and top position variable). The monster will move up to a certain
height, and then it will move back down to a certain height. So we will need a few more
variables for the monster. We’ll need a variable for how the monster is going to move (this
variable should initially be set to -10.) And we’ll need one more variable: the variable that holds
how high the monster should jump up. I set this topheight variable to be a random number
between 150 and 350, so my monster jumped up to a random height.
Now you will need a function that moves the monster:
Unlike the arrow functions, we want the monster to move on its own. So we will use
setTimeout to have the function call itself. More on that later…
Just like the arrow functions, this function involves repositioning the monster. So first you will
take your monster’s top variable and add to it the direction variable (the one originally set to 10). You should then use document.getElementById to reposition the monster from the top.
For this function, we want the monster’s direction to be reversed when the monster’s top
position gets above the top position. This is a bit counter-intuitive because the top position is
the position down from the top, so if the monster’s top position variable is LESS THAN the
topheight position variable (that means that the monster is actually above the topheight
position, so we want to reverse direction) you should set the direction variable to 10.
Otherwise, if the top position of the monster is greater than the monster’s bottom position (the
original position of the monster in your html code), you will want to change the direction again
by setting the direction variable to -10. You will also want to create a new top position (so the
monster jumps up to different heights each time) so you will set the topheight variable to a new
random number (again, mine were between 150 and 350).
Outside of the if conditions (but within the function ,of course), use setTimeout to recall the
monster moving function. You can choose the delay – the smaller the number of milliseconds,
the faster your monster will move.
Save and test your function by (temporarily) making your start button call the monster moving function.
The monster should move up a certain amount, then back down a certain amount, then back up, etc.
Note: I modified this function slightly so that if the top position was greater than the monster’s
bottom position, I generated a random number between 500 and 5500 msec and then called
setTimeout at that interval of time, so that the monster would move up and then down, and
then pause some random amount before moving back up. You may choose to do this or not.
If you’ve got the arrow keys working, and the monster moving, you’ve got most of this project working.
Adding the scoring:
What we want to do now is to check whether the turkey is over the monster, and, if so, you
should lose 10 points (if you want to do something more dramatic with the score, that is fine. I
just chose to subtract 10 points from the score).
So first, at the top of the javaScript (above all the functions) add a score variable, and originally
set it to 0.
Now go back to your monster moving function. At the top, you repositioned the monster. Right
after that (right after you reposition the monster), you want to use an if condition to see if the
turkey’s position is over the monster. So you want to check whether the turkey’s top variable is
between the monster’s top variable and the monster’s top variable + the monster’s height and
whether the turkey’s left variable is between the monster’s left variable and the monster’s left
variable plus the monster’s width. This may require a lot of parentheses, e.g.,:
If (((topturkey > monstertop) && (topturkey < (monstertop + 200)) &&…)
Where && means and
Now, if the turkey is covered by the monster, then the score variable should have 10 points
subtracted from it, and the innerHTML of the paragraph on your web page should change to
display the new score.
In addition, the turkey should be repositioned so that its top variable and left variable are set
back to its original values, and document.getElementById is used to reposition the turkey’s top
and left position so that it gets placed back in its original position.
Save and test your code.
Adding the good scoring:
So if the monster is over the turkey, the score goes down by 10 points. How do you get points?
In this game, the turkey gets points when it reaches the left side of the board/screen. In my
code, I made the score go up when the turkey’s left position was -50 (my turkey was small).
Go back to the move turkey function that moves the turkey to the left. Add an if condition that
checks to see if the turkey’s left position variable is less than some value, and, if so, increase the
score by 10. Then change the html paragraph’s innerHTML to display the current score, and
reposition the turkey back to its beginning position (like you just did in the monster moving
function).
In my function, I added one more check: if the score was greater than or equal to 100, I
changed the paragraph to say, “You win!!!”
Save and test your code.
Moving reindeer monster down:
So we’ve got monster variables and a monster function that moves a monster up then down
from the bottom of the screen/board. You want to create an almost identical set of variables
and an almost identical function that moves the reindeer monster down from the top, and then
back up to the top. It should check to make sure the reindeer doesn’t cover the turkey and, if it
does, the score should be reduced by 10 and displayed, and the turkey should be repositioned
back to the beginning, just like the monster was. This function is very close to the monster
function.
Save and test this function by changing the start button to call this function.
Finally, add one more function (the start function):
This is the function that the start button will call. This function should just do 2 things: use
setTimeout to call the monster moving function at some time interval, and then use setTimeout
to call the reindeer monster moving function at some time interval (your choice).
Making all the monsters move.
So far you have a function that makes one monster move up and down using a monster’s top
position variable, a monster’s left position variable, a direction variable, and a top height
variable. We can use this same function to move all 5 of the monsters.
First, instead of using one variable for the left position for one monster, make an array of left
positions, with 5 different left positions in it, one for each of the monsters. Do the same for the
top position, so instead of having one variable, you’ve got an array of 5 top position variables.
Make an array of 5 direction variables. Make an array of 5 different topheight variables. And
now create one more array – an array of the ids of the monsters on your web page. The arrays
should all correspond so that for each one of the arrays at 0, information for the first monster is
stored. At location 1 in all the arrays, information for the second monster is stored, etc.
Now go to your move monster function. Add an input parameter. The input parameter will
contain a number between 0 and 5. Inside the monster function modify the function so that
instead of taking your monster’s top variable and adding to it the monster’s direction variable,
you should take monstertoparray[input parameter] and add to it monsterdirectionarray[input
parameter]. All of the monster’s variables in the function should be replaced with the
appropriate array at the input parameter.
Create a new starthard function, called by the second start button on your web page.
This function should be almost identical to the old start function, only you will call the monster
moving function 5 times, with the input value of 0, then 1, then 2, then 3, then 4.
When you have this working, do the same for the reindeer so that more than one reindeer moves.
That’s it! You’ve got a game!!
Make sure when you turn in this, you include all images as well as your html and css code.
Extra Credit (5 pts):
If you are interested, you can modify the code so that it uses keystrokes to move the turkey instead of
having to click on the arrows on your page. It makes moving the turkey much quicker. I’ve included a
brief set of instructions on how to do this on my web site.