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 2 nd 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.