JS Lab 5 Due Thurs, Nov 30 (After Thanksgiving)

Transcription

1 JS Lab 5 Due Thurs, Nov 30 (After Thanksgiving) With instructions for final project, due Dec 8 at bottom You may work on this lab with your final project partner, or you may work alone. This lab will be part of your final project. Note: Make sure you review and understand the tutorials and the powerpoints (on the class web site) Hints for problems encountered: a. If nothing is working, there s probably a typo you ll have to find. i. Look for capital letters where there should be a small one, and vice versa ii. Look for missing (if you open it, you must close it) iii. Same with { and } iv. Same with ( and ) for every one of the first, you must have one of the second. b. Finally, make sure your html is valid (again, if you opened a tag, you should close it) If you re still having problems, use comments to isolate exactly where the problem is. Any code you put between /* and */ (e.g., see below) will be ignored by the browser. /* document.getelementbyid( pic1).source = cat.jpg ; <- this line is commented out, */ 1. In class we moved a car by clicking on 2 buttons, one that called movecarright, and one that called movecarleft. For this lab, you will be using the html and css you created for your final project. Add an image of the hero you ve chosen. I chose a turkey (see the turkey, below and to the right) that is trying to fly home. You can pick something else that fits into your scenery. Use CSS to position the hero absolutely somewhere where you d like her to start. Add button images (see my green arrows above). In class we were able to move the car by clicking on one of the buttons, and the button called a function. The function added 10 pixels to a variable, and then repositioned the car over to the left at that variable.

2 The other function subtracted 10 pixels from that variable and repositioned the car the left from that variable. Write 2 similar functions for the hero. Make the hero move back and forth, depending on which button you click on. Add another variable for the position down from the top. Add 2 more functions that move the hero 10 pixels down from the top, and up ten pixels from the top respectively. Make sure you add two arrow buttons that call those functions. Now you should have 2 functions for moving the hero back and forth, and 2 functions for moving the hero up and down. Use your arrows to move the hero and make sure they work. Part B: add a condition, so that if the hero reaches a value that you consider to be the end of the hero s journey, it is repositioned back to the initial position over from the left. 2. For your last lab, you completed the following problem: Make something go up and down: In your html page, create an image with an id. a.in your script in the header, create an array for the id. Yes, this array is only one element long, and the only value is the id of the image on your html page. So you have something along the lines of, var idarray = new Array(); idarray[0] = picid1 ; b.create a second array, again with only one element in it. This is for the maximum top position. Set the first value in this array to be a random number between 150 and 350 (you can always play with this later). c. Create a third array, for the bottom position. Initialize the only value in this array to be about 800, although again you may wish to play with that number later. d. Create yet another array with only one element. This will control the direction the image is moving in. This should be initialized to -10 (because you want the image to start by moving towards the top). e. Create a final array (currpos) for the current position of the image. Initialize it to the same value you initialized array 3 to be (so 800). This will hold the current position from the top of the image. Now write a function. The function should move the image up and down, similar to how we moved the train back and forth in class. However, whenever possible, we will use the array variable instead of the actual name. So, for instance, instead of document.getelementbyid( pic1 ).position = absolute, you ll say document.getelementbyid(idarray[0]).position = absolute ; Instead of saying: Say: x = x + -10; currpos[0] = currpos[0] + directionarray[0]; In other words, wherever you can use an array variable from above, use that. If the currpos[0] variable is less than the toparr[0], you should change the direction in the directionarray from -10 to 10. If the currpos[0] is greater than the bottomarr[0], you should change the direction in directionarray to -10. At the very bottom of the function, use settimeout to call the function every 100 milliseconds. (You can adjust the speed if this is too fast or too slow). In your html page, create a Start button that calls the function above to start it. Your image should move up and down. NOTE: Make sure you get this script to work, because this will be very useful for your final project. For this lab: you are going to add 4 more images and make them move up and down. In addition, you are going to position your 5 images in your final project html document. So, using the html and css final project code you wrote for lab 3 (problem 5), add 5 monster images. Position them at the bottom of

3 the scene you created originally so that they are hiding between some of the scenery. I did this by giving them a smaller z-index than some of the objects they are hiding behind. In the picture below, I hid the evil snowmen behind the houses. Once you have your 5 monsters positioned absolutely at the bottom of your game scene, copy the javascript for problem 4 in Lab 4 over into the head section of the final project html file. You should have 5 different arrays, each with only one value. Add 4 more values to each array. Note that this is pretty easy you just copy the first value 4more times for the rest of the array and change the index numbers so that they go from 0 to 4. The only array that will have a different value for each position in the array is the idarray, and that will hold the ids of each of the different monster images. Add a start button to your html page. Make it so that when you click on the start button, it calls the function that made the one monster move. You re just double-checking to make sure that code still works. Now, everywhere the index is 0 in the function, change it to 1. Test the function again. Your second monster should move. Repeat for each of the 5 monsters. 3. Repeat 2 with another set of 4 monsters. The difference is that these monsters will start at the top of the web page and move down to a random number, and then back up. In other words, you ve got 5 monsters moving up from the bottom to a random number, and then moving back to their starting place, and now you will have 4 more monsters starting at the top and moving down to a random number, and then back up to the beginning. Make sure all 4 monsters move down and up.

4 End of Lab 5 The above code is Due Nov 30 ********************************************************************************* Instructions for completing final project (Due Dec 8) For final project: 1. Add a parameter to your 2 monster moving functions above. a. If you called the parameter x, everywhere you are currently using 0 (or 1, or whatever) as your index, change that to x. Make sure in your settimeout, you add x to the call to these functions. b. Add a startit function. The start button in your html code should call this startit function instead of the movemonster function. In your startit function, call the first movemonster function 5 times, each time with a different number between 0 and 4. Call the second movemonster2 function 4 times, each time with a different number between 0 and 3. Test this by clicking on the start button. All the monsters should move simultaneously, 4 moving down from the top and 5 moving up from the bottom. 2. Add 2 more arrays, one for each of the monster sets. This array should just hold the number representing how many pixels over from the left a particular monster is located. So, for instance, if you originally positioned your first monster with style = position:absolute; left: 30px;, then the leftposition array at 0 should hold 30. If the second monster was positioned 160px over, then the leftposition array at 1 should hold 160. Do this for both sets of monsters. 3. Adding the scoring: a. What we want to do now is to check whether the hero 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). b. So first, at the top of the javascript (above all the functions) add a score variable, and originally set it to 0. c. 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 hero s position is over the monster. So you want to check whether the hero 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 d. Now, if the hero 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. e. In addition, the hero 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 hero s top and left position so that it gets placed back in its original position.

5 f. Save and test your code. 4. Adding the good scoring: a. So if the monster is over the hero, 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). b. Go back to the move hero function that moves the turkey to the left. Add an if condition that checks to see if the hero 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). c. 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!!! d. Save and test your code. 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. 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. (Due Friday, Dec 8) Extra Credit (5 pts): If you are interested, you can modify the code so that it uses keystrokes to move the hero instead of having to click on the arrows on your page. It makes moving the hero much quicker. I ve included a brief set of instructions on how to do this on my web site. Extra Credit 2(between 1 and 10 pts): Do something with opacity. A couple of ideas: add other monsters who are stationary, but whose opacity goes between 0 and one. When the opacity is over.6 and the hero is over the monster, the hero loses a random number of points between 0 and 25. Another idea: while you re moving the monsters up and down also adjust their opacity up and down. Again, add a check to make sure the monster s opacity is over.6 when the hero is over the monster in order for the hero to lose points. Make random safe zones appear on top of everything else at random moments, and then make them fade. The hero can safely stay on the safe zones until their opacity gets below.2. Ideas of yoru choice. Extra Credit 3(between 1 and 15 pts) Think of and add other factors to the game to make it cooler. Be creative.