Final Project:
NOTE: The final project will be due on the last day of class, Friday, Dec 9 at midnight.
For this project, you may work with a partner, or you may choose to work alone. If you
choose to work with someone, it should be the person with whom you want to work on the
final project. You may choose to work alone.
For your final project you will be creating a game, in which a bird hero(or animal of your choice) must move from
one end of the screen to the other end while scary rabbits and wonky bats try to get it (again, monsters are of your
choice). If the bird hero successfully makes it from one end of the screen to the other, the score increases by 10
points. If, however, the bird gets caught by a monster rabbit or bat, then the score goes down by 10 points and
the bird returns to the right side of the screen. Below is a screenshot of my game before it starts. Please feel free
to choose your own images, scary creatures, and hero as you please. For instance, you could have a turkey trying
to escape from scary hunters and airplanes, or maybe a human trying to escape from zombies and ghosts in a
graveyard. I just went with scary rabbits and bats.
Part A:
HTML and CSS:
For my project 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 bat images, each positioned absolutely, and
with a z-index of 10. The goal was to have the bats appear to be between the back row of clouds and the front row
of clouds. Again, you may pick the creatures/images you like, but you will need to have 3 layers of images and
approximately 4 monsters in the middle layer.
I also had a row of boulder images positioned absolutely with a z index of 20, a row of 5 rabbit images positioned
absolutely with a z index of 10, and a row of grass images with a z index of 0. Again, the idea was that the rabbits
would appear to be between the grass in the background and the boulders in the foreground. You may choose the
images of your choice, but again, you want to have 3 layers and approximately 5 images in the middle layer
At the top of my html page I had a header saying “Fly South” and a paragraph, that I initialized with text saying,
Bird Score: 0. (You choose the name of the game, and the creature to whom you are assigning a score – it should
not be any of the creatures in the middle layers, above (e.g., not the bats or the rabbits).
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 bird 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 bird, positioned absolutely. I positioned my bird over to the right of the board.
You may pick your creature, and you may pick where you want the creature to start. Mine is an animated gif, so
the bird appears to fly.
The rabbits, the bats, the birds (or your equivalent), 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.
USE CSS to make the game board appear as you wish.
Part 2: JavaScript
Function 1: This is similar to the last function you wrote in the last lab.
Add a javascript in the head section. In your javaScript you’ll need 2 variables, one variable that will hold the
number of pixels from the top, and one that will hold the number of pixels from the left. Set their initial values to
be the number of pixels down from the top and over from the left where you want your hero to start on your web
page.
Add a function to move the hero to the left. So inside the function, position the hero image absolutely (using
getElementById for the image on your web page). And then to move to the left, subtract 10 from the left variable
and, again, using getElementById for the image of the hero on the web page, move the image 10 pixels to the left.
(this is almost exactly like the last function in the last lab).
Now in the html part of your page, have the left-arrow button call the function you’ve just written with onClick.
Part C: Now you’re going to add a parameter to the function you wrote above, between the two parentheses. The
parameter will be used to indicate whether the hero will be moving right or left. If the parameter holds the word
‘left’, then you should subtract 10 from the left variable and reposition the hero image (exactly like you’ve already
done – the only difference is that you only do it if the parameter holds the word left). If, however, the parameter
holds the word ‘right’, then you should add 10 to the left variable and reposition the hero from the left
(remember, we’re always positioning in from the left, which is why you either add 10 or subtract 10 from the left
variable to move the hero left or right).
Now In your left arrow image, add the word ‘left’ to the function call, between the parentheses. Check to make
sure that when you click on it, the hero still moves 10 pixels to the left.
In your html code, add an image of a right arrow. Inside the image, add a call to the function written in part B,
with the word ‘right’ between the parentheses. Test it to make sure that when you click on the right arrow, the
hero moves to the right and when you click on the left arrow, the hero moves to the left.
Part D: You will also want your hero to be able to move up and down. You’ll need to add 2 more images, one of
an up arrow, with the word ‘up’ in the function call, and one of a down arrow, with the word ‘down’ in the
function call.
Then, in the function, if the parameter holds the word ‘up’, subtract 10 from the top variable and position the
image using getElementById from the top. If the parameter holds the word ‘down’, subtract 10 from the top
variable and reposition the hero.
Test your arrows to make sure they all move the hero in the appropriate direction.
Function 2:For this function, you are going to make a monster move up and down on his own. This is similar to the
train example we did in class, with the differences being that a) the monster is moving up and down as opposed to
left and right, b) the monster is moving up to a random top height as opposed to a set height, and c) Eventually
there will be a bunch of monsters.
Remember, eventually the function will be moving a set of monsters. For now , create a variable for the number of
pixels from the top that the monster will be positioned, and another variable for the number of pixels from the left
that the monster will be positioned. Eventually, when we have a set of monsters, these variables will be the first
variable in arrays.
Add 3 more variables. The first will hold the id of the monster image on the web page, and the second will hold
the direction in which the monster is moving (10 or -10), and will originally be set to -10 so that the monster moves
up in direction at first. The third is the top height the monster is going to move to before it changes direction, and
should be set to a random number between 150 and 350.
All these variables should go inside your script (the same script in which problem 1 exists), at the top of the script
(above your functions). And each variable should have a unique name (so, for instance, you can’t have a variable
named “top” for the hero, and another variable named “top” for the monster. Each variable name has to be
unique.
Once you’ve got all your variables set up, you are going to write your function. This function adds the direction
variable to the top variable for your monster, then calls setTimeout to call the function again every 100
milliseconds (you can alter this if you want the monster to move faster or slower). If the top position is less than
the height variable, change the direction by multiplying the direction variable with -1.
If the top position is greater than a maximum value you pick (the lowest you want your monster to go on your
page – I made mine reverse directions at 500) again, multiply the direction variable by -1. Equally, generate a new
random number for the height variable (between 150 and 350.
We’re going to make this function start in a different way. First on your web page, add a button. The button
should call a function called start() (that you haven’t written yet). Next write an extremely simple function up in
the javaScript script. Call the function start(). The function should should have one line right now, and that one
line should be the name of the function you wrote in part c. So, for instance, if the function in Part C was called
moveMonster(), the start function should be:
function start() {
moveMonster();
}
Test this function by clicking on the start button on your web page and seeing if the monster moves up and down.
Part 3:This is actually a modification to function 2. You’re going to add scoring to the monster function.
First, make sure you have a paragraph to your web page. Give the paragraph an id. This is the paragraph that is
going to hold the score.
Second, add a variable to the javaScript script (up at the top where you’ve got all the other variables. Set it to 0 to
start with.
Now, in the monster moving function (not the start function), add a check to see if the left position of the hero is
within 20 pixels of the left position of the monster (e.g., if (( lefthero > leftmonster – 20) && (lefthero <
leftmonster + 20)) ) – note that you may wish to adjust the number 20 if your monster is significantly bigger than
20 pixels in size. This is all very similar to the car running over the frog, but in this case, we also want to check to
see if the top positions of both the monster and the hero are within 20 pixels or so of each other, so you’ll have to
add a check for that as well.
If the monster is over the bird on the screen, the score should be modified by subtracting 10, and you should use
getElementById to change the innerHTML of the paragraph on your web page to the new score.
Test this by clicking start to get the monster moving, then moving the bird so that the monster goes over the bird.
Make sure the score changes.
If you have this all working, you’ve got the guts of your final project working.
So far you have:









A variable that tells how many pixels over from the left your hero is located
A variable that tells how many pixels down from the top your hero is located
A function for moving your hero up/down/left/right.
An array that holds as its first entry the id of the monster
An array that holds as its first entry the direction in which the monster is going (-10 or 10)
An array that holds as its first entry a random number equaling the top height to which the monster will
go up before reversing direction.
An array that holds as its first entry the position over from the left that the monster is located.
A function for moving a monster up to a random height and then back down.
o Inside the function, an if condition that checks for scoring, so that if the monster and the bird are
at the same place, the score decreases by 10 points and is printed out.
A function for starting the game.
The rest of the project will largely involve adding to this basic set of functions.
First: In your moveMonster function, make sure that you’ve used the proper array within the function. So, for
instance, you should not have document.getElementById(‘monsterid’).style.left… (where ‘monsterid’ is the id of
the image of the monster you have on your web page). Instead, you should have
document.getElementById(IdArray[0]).style.left… (where IdArray should be replaced with whatever you named the
array that holds the ID of your monster. If you’ve used the arrays properly in this function, the next part will be
easy.
NOTE: This is counterintuitive, so it bears noting. When you are positioning from the top, as the monster moves
up the screen, the position from the top DECREASES. In other words, when you are changing the position by -10
each time, you are actually moving the monster up the screen because you’re positioning based on how much
distance the monster is from the top of the screen. Equally, when the monster is moving down the screen, the
position should be increasing, or changing by +10 each time.
Equally, if you want to see if your monster has moved to the top position and should change directions, you want
to check if the monster’s top position (in the appropriate monster top position array) is LESS THAN the randomly
generated top position, whereas if you want to see if your monster is at the bottom, you should check to see if the
monster’s top position is GREATER THAN the number of pixels from the top that you have chosen as the bottom of
your monster’s movement.
Part 1: Make sure each monster on your web page has a unique Id.
Part 2: Now modify the arrays, above, so that they contain information for each of your new monsters. So, for
instance, the second monster you added should have all its information in the various arrays at location 1. So if
the 2nd monster has an id of “monster2”, then the id array would be (depending on what you named your id array),
possibly IdArray[1] = “monster2”. Equally, monster 2’s position from top, left, the max top level it will go to
(chosen randomly), and its direction should all go in the appropriate array at location 1.
Repeat this process for each of the monsters you’ve added to your web page.
Part 3: Now, modify your monsterMove function so that it takes a parameter. That parameter will be the number,
representing which monster you want to move. Everywhere you have 0 now, replace it with the parameter. So if
you’ve got idArray[0], replace it with idArray[x] (or whatever you called your parameter). If you wrote your
function correctly, this should be fairly straightforward.
Part 4: To make all your monsters move simultaneously, modify your start function so that it calls the
movemonster with each monster’s number. For instance:
function start() {
moveMonster(0);
moveMonster(1);
moveMonster(2);
moveMonster(3);
moveMonster(4);
}
Part 5: Repeat the process for a new set of monster that will move down a random amount. You’ll need a new set
of arrays for these monsters, a new function for moving down instead of up (almost exactly the same as the
moving monster function that moved the monster up, with the set number being the top position, and the bottom
being the random number. Equally, these monsters should have an array of random numbers for the bottom most
position the monster will move to instead of the top most random number that the previous set of monsters
moved to. (These are the bats in my example game – they’re moving down to a random number of pixels from the
top, and then changing direction).
And the start function should call this new function with the number of each of your top monsters.
Part 6: Adding the good scoring:
Currently if the monster is over the hero, the score decreases by 10 points. But if the hero makes it across the
board, the score should go up by 10 points. So if the hero’s left position is over the edge of the board’s edge
(whatever edge you’ve chosen), the score should go up by 10 points. You will need to modify the move hero
function so that includes an if condition that will change the score and write it to the paragraph.
Once the hero has reached the other side of the board successfully, on top of the score going up to 10, the hero
should be repositioned back to its beginning position at the other side of the board.
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..
That’s it! You’ve got a game!! Make sure you’ve completed the html and css so that the game looks
good and that everything is positioned initially where you want it and htat it doesn’t “jump” when you
first start the game. Remember, when you position something in the html you are positioning it a
certain number of pixels from the left and the top. If these numbers aren’t identical to the numbers
you’re using as starting values in your javaScript, the image will appear to jump to the position you
specified in your javaScript.
Make sure when you turn in this, you upload all images as well as your html and css code to the
server, and turn in the url to the TA. Again, easiest way is to just upload the folder that holds all your
code and images.
Extra Credit 1 (5 pts):
You can modify your monster move functions so that when the bottom monsters get to the bottom,
they pause for a random number of seconds before starting again. In other words, normally within the
function setTimeout is used to call the function every 100 milliseconds (or whatever relatively fast
number you chose). But to modify it so that the monsters pause a random amount before starting to
move again, you can generate a random number greater than 100 and less than some max number of
milliseconds you might want a monster to wait, and then call setTimeout just that one time (when the
bottom monsters get to the bottom, and when the top monsters get to the top) at that random number.
Extra Credit 2 (10 pts):
If you are interested, you can modify the code so that it uses keystrokes to move the bird instead of
having to click on the arrows on your page. It makes moving the bird much quicker. I’ve included a brief
set of instructions on how to do this on my web site.