1 / 15

Game

link. Game. <!DOCTYPE html><html><head> <meta charset= "utf-8" /><link rel = “ stylesheet ” href = “game.css”> < script> var count = 0 var total = 0 function myfunc () { if (count < 50 ) { var basetime = 1000

fleur
Download Presentation

Game

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. link Game <!DOCTYPE html><html><head> <meta charset= "utf-8" /><link rel = “stylesheet” href = “game.css”> <script> varcount = 0 vartotal = 0 function myfunc() { if (count < 50) {varbasetime = 1000 document.getElementById('img1').src = "Images/gopher.jpg" document.getElementById('img1').style.position = "absolute" varycoord= Math.floor(Math.random() * 800) varxcoord= Math.floor(Math.random() * 800) document.getElementById('img1').style.left = ycoord+"px" document.getElementById('img1').style.top = xcoord+"px" count = count + 1 var time = Math.floor(Math.random() * 250) + basetime setTimeout("myfunc()",time) } else {document.getElementById('h11').innerHTML = "Congratulations! You got " + total +"!" } } function func2() { total = total + 1 document.getElementById('h11').innerHTML = "You got " + total +"!" document.getElementById('img1').src = "Images/bang.png" } </script> </head> <body onLoad = "myfunc()"> <p><imgsrc = "Images/gopher.jpg" width = "189" height = "267" id = "img1" onMouseDown = "func2()"></p> <h1 id = "h11"> </h1> </body> </html>

  2. Make the gopher change sizes randomly?: • We need a minimum size • We don’t want it to be 0x0 • I chose percent so I could alter height and width proportionally varminpercent = 50 /* the smallest the image can get is 50% of full size */ • We need a random number between 0 and 50 for the other half of the size varcurpercent= Math.floor(Math.random() * 50) + minpercent • We mustcalculate the total width and height based on the percent varcurwidth = Math.floor(curpercent/100 * 159) varcurheight= Math.floor(curpercent/100 * 227) /* 159 and 227 are the original width and height of the image*/ /* Math.floor rounds down to the nearest integer, e.g., 3.2 becomes 3 */ • And finally, we must set our images width and height to those values: document.getElementById('img1').width = curwidth document.getElementById('img1').height = curheight

  3. link Adding size changes to game… varcount = 0 vartotal = 0 function myfunc() { if (count < 50) {varbasetime = 1000 varminpercent = 50 document.getElementById('img1').src = "Images/gopher2.jpg" document.getElementById('img1').style.position = “absolute" varycoord = Math.floor(Math.random() * 800) varxcoord = Math.floor(Math.random() * 800) document.getElementById('img1').style.left = ycoord+"px" document.getElementById('img1').style.top = xcoord+"px“ varcurpercent = Math.floor(Math.random() * 50) + minpercent varcurwidth = Math.floor(curpercent/100 * 159) varcurheight = Math.floor(curpercent/100 * 227) document.getElementById('img1').width = curwidth document.getElementById('img1').height = curheight count = count + 1 vartime = Math.floor(Math.random() * 250) + basetime setTimeout("myfunc()",time) } else {document.getElementById('h11').innerHTML = "Congratulations! You got " + total +"!" document.getElementById('img1').src = "Images/gameover.png" } }

  4. link Let’s start this game with a button <!DOCTYPE html><html><head> <meta charset= "utf-8" /><link rel = "stylesheet" href = "game.css"> <script> varcount = 0 vartotal = 0 function myfunc() { if (count < 50) {varbasetime = 1000 varminpercent = 50 document.getElementById('img1').src = "Images/gopher2.jpg" document.getElementById('img1').style.position = "relative" varycoord = Math.floor(Math.random() * 630) varxcoord = Math.floor(Math.random() * 563) document.getElementById('img1').style.left = ycoord+"px" document.getElementById('img1').style.top = xcoord+"px“ varcurpercent = Math.floor(Math.random() * 50) + minpercent varcurwidth = Math.floor(curpercent/100 * 159) varcurheight = Math.floor(curpercent/100 * 227) document.getElementById('img1').width = curwidth document.getElementById('img1').height = curheight count = count + 1 vartime = Math.floor(Math.random() * 250) + basetime setTimeout("myfunc()",time) } else {document.getElementById('h11').innerHTML = "Congratulations! You got " + total +"!" document.getElementById('img1').src = "Images/gameover.png" } } function func2() { total = total + 1 document.getElementById('h11').innerHTML = "Score so far: " + total +"!" document.getElementById('img1').src = "Images/bang.png" } </script> </head> <body > <h1 > Get the Gopher! </h1> <h2 id = "h11" >Score so far: 0</h2> <p id = "p3" onClick = "myfunc()">Start Game </p> <p><imgsrc = "Images/gopher2.jpg" width = "159" height = "227" id = "img1" onMouseDown = "func2()"></p> </body></html>

  5. Giving users the option of playing a harder version: • How? • Maybe make it faster? • Make the gopher get smaller? • You could also add distractions (other things flying randomly around) • Maybe even bombs that if you clicked on, the game would end immediately and you’d lose • Right now, we’ll worry about the first two…

  6. Harder version: var count = 0 var total = 0 function myfunc() { if (count < 50) {varbasetime = 1000 varminpercent = 50 document.getElementById('img1').src = "Images/gopher2.jpg" document.getElementById('img1').style.position = "relative" varycoord = Math.floor(Math.random() * 630) varxcoord = Math.floor(Math.random() * 563) document.getElementById('img1').style.left = ycoord+"px" document.getElementById('img1').style.top = xcoord+"px“ varcurpercent = Math.floor(Math.random() * 50) + minpercent varcurwidth = Math.floor(curpercent/100 * 159) varcurheight = Math.floor(curpercent/100 * 227) document.getElementById('img1').width = curwidth document.getElementById('img1').height = curheight count = count + 1 var time = Math.floor(Math.random() * 250) + basetime setTimeout("myfunc()",time) } else {document.getElementById('h11').innerHTML = "Congratulations! You got " + total +"!" document.getElementById('img1').src = "Images/gameover.png" } } What sets speed of gopher’s movement? What sets the minimum size of the gopher?

  7. link Harder version: var count = 0 var total = 0 function myfunc() { if (count < 50) {varbasetime = 600 varminpercent = 30 document.getElementById('img1').src = "Images/gopher2.jpg" document.getElementById('img1').style.position = "relative" varycoord = Math.floor(Math.random() * 630) varxcoord = Math.floor(Math.random() * 563) document.getElementById('img1').style.left = ycoord+"px" document.getElementById('img1').style.top = xcoord+"px“ varcurpercent = Math.floor(Math.random() * 50) + minpercent varcurwidth = Math.floor(curpercent/100 * 159) varcurheight = Math.floor(curpercent/100 * 227) document.getElementById('img1').width = curwidth document.getElementById('img1').height = curheight count = count + 1 var time = Math.floor(Math.random() * 250) + basetime setTimeout("myfunc()",time) } else {document.getElementById('h11').innerHTML = "Congratulations! You got " + total +"!" document.getElementById('img1').src = "Images/gameover.png" } }

  8. What if we want to give users the option of easy or hard… • We’ll need two buttons… • Will we need two functions? function myfunc() /* easy version */ { if (count < 50) { varbasetime = 1000 varminpercent = 50 document.getElementById('img1').src = "gopher2.jpg" document.getElementById('img1').style.position = "relative" varycoord = Math.floor(Math.random() * 630) varxcoord = Math.floor(Math.random() * 563) document.getElementById('img1').style.left = ycoord+"px" document.getElementById('img1').style.top = xcoord+"px“ varcurpercent = Math.floor(Math.random() * 50) + minpercent varcurwidth = Math.floor(curpercent/100 * 159) varcurheight = Math.floor(curpercent/100 * 227) document.getElementById('img1').width = curwidth document.getElementById('img1').height = curheight count = count + 1 var time = Math.floor(Math.random() * 250) + basetime setTimeout("myfunc()",time) } else { … } } function myfunc2() /* hard version */ { if (count < 50) { varbasetime = 600 varminpercent = 30 document.getElementById('img1').src = "gopher2.jpg" document.getElementById('img1').style.position = "relative" varycoord = Math.floor(Math.random() * 630) varxcoord = Math.floor(Math.random() * 563) document.getElementById('img1').style.left = ycoord+"px" document.getElementById('img1').style.top = xcoord+"px“ varcurpercent = Math.floor(Math.random() * 50) + minpercent varcurwidth = Math.floor(curpercent/100 * 159) varcurheight = Math.floor(curpercent/100 * 227) document.getElementById('img1').width = curwidth document.getElementById('img1').height = curheight count = count + 1 var time = Math.floor(Math.random() * 250) + basetime setTimeout("myfunc()",time) } else { … } }

  9. If we somehow knew whether the easy or the hard button was pushed… function myfunc() /* easy version */ { if (count < 50) { if /* easy button was pushed */ { varbasetime = 1000 varminpercent = 50 } else if /* hard button was pushed */ { varbasetime = 600 varminpercent = 30 } document.getElementById('img1').src = "gopher2.jpg" document.getElementById('img1').style.position = "relative" varycoord = Math.floor(Math.random() * 630) varxcoord = Math.floor(Math.random() * 563) document.getElementById('img1').style.left = ycoord+"px" document.getElementById('img1').style.top = xcoord+"px“ varcurpercent = Math.floor(Math.random() * 50) + minpercent varcurwidth = Math.floor(curpercent/100 * 159) varcurheight = Math.floor(curpercent/100 * 227) document.getElementById('img1').width = curwidth document.getElementById('img1').height = curheight count = count + 1 var time = Math.floor(Math.random() * 250) + basetime setTimeout("myfunc()",time) } else { … } } But we still need a way of telling which button was pushed… • We could have one function that looked like this…

  10. Parameters: • Parameters are another way of having something hold a value. • E.g., var x = 3 • Now the variable x holds 3. We can use x as if it is the number 3 varnarr = new Array() narr[0] = “cat” narr[1] = “dog” • Now the array narr at location 1 holds the word “dog”, and we can use narr[1] as if it is the word “dog” • Parameters: <p onclick = “func(‘easy’)”> click here to call the function with the parameter ‘easy’ </p> <script> function func(easyorhard) { If (easyorhard == ‘easy’) … • Now when you click on the paragraph, the word ‘easy’ is placed in the parameter easyorhard, so easyorhard can be used as if it is the word ‘easy’

  11. link Parameter Example: <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script > function showparam(param) { if (param == 'snow') { document.getElementById("h11").innerHTML = "it's snowing!" } else if (param == 'rain') { document.getElementById("h11").innerHTML = "it's raining!" } else if (param == 'sun') { document.getElementById("h11").innerHTML = "it's sunny!" } } </script> </head> <body> <h1 id = "h11"> Different Styles</h1> <p id = "p1" onClick = "showparam('snow')">click here for snow</p> <p id = "p2" onClick = "showparam('rain')">click here for rain</p> <p id = "p3" onClick = "showparam('sun')">click here for sun</p> </body> </html>

  12. Functions can have more than one parameter <!DOCTYPE html><html><head> <meta charset= "utf-8" /> <script> function myFunction(name,job) { document.getElementById('p1').innerHTML = "Welcome " + name + ", the " + job; } </script> </head> <body> <p id = "p1">Results go here.</p> <button onclick="myFunction('Harry Potter','Wizard')">Try it</button> <button onclick="myFunction('Bob','Builder')">Try it</button> </body> </html> • Parameters match in order: • function myFunction( name, job) • onclick = myFunction( ‘Harry Potter’, ‘Wizard’) • Onclick = myFunction( ‘Bob’ ‘Builder’)

  13. Back to Game: <!DOCTYPE html><html><head><meta charset= "utf-8" /><link rel = "stylesheet" href = "game.css"> <script> var count = 0 var total = 0 function myfunc(easyorhard) { if (easyorhard == 'easy') { varbasetime = 1000 varminpercent = 50 } else if (easyorhard == 'hard') { varbasetime = 600 varminpercent = 30 } if (count < 50) {document.getElementById('img1').src = "Images/gopher2.jpg" document.getElementById('img1').style.position = "relative" varycoord = Math.floor(Math.random() * 630) varxcoord = Math.floor(Math.random() * 563) varcurpercent = Math.floor(Math.random() * 50) + minpercent document.getElementById('img1').style.left = ycoord+"px" document.getElementById('img1').style.top = xcoord+"px" varcurwidth = Math.floor(curpercent/100 * 159) varcurheight = Math.floor(curpercent/100 * 227) document.getElementById('img1').width = curwidth document.getElementById('img1').height = curheight count = count + 1 var time = Math.floor(Math.random() * 250) + basetime setTimeout("myfunc(easyorhard)",time) setTimeout(function(){myfunc(easyorhard); easyorhard = null},time); } else {document.getElementById('h11').innerHTML = "Congratulations! You got " + total +"!" document.getElementById('img1').src = "Images/gameover.png" } } function func2() { total = total + 1 document.getElementById('h11').innerHTML = "Score so far: " + total +"!" document.getElementById('img1').src = "Images/bang.png" } </script> </head> <body > <h1 > Get the Gopher! </h1> <h2 id = "h11" >Score so far: 0</h2> <p id = "p2" onClick = "myfunc('easy')">Easy</p><p id = "p3" onClick = "myfunc('hard')">Hard</p> <p><imgsrc = "Images/gopher2.jpg" width = "159" height = "227" id = "img1" onMouseDown = "func2()"> </p> </body> </html>

  14. Side note: setTimeout(function(){myfunc(easyorhard); easyorhard = null},time); /* correct*/ • Versus: setTimeout(myfunc(easyorhard),time) /* incorrect*/ • You’d think it would be this second version. • It isn’t • For those of you who like explanations: • It’s because of what is know as a memory leak • When we call a function in setTimeout, the parameters don’t get cleaned out of memory • So quickly you run out of space in memory and everything either crashes or freezes. • For those of you who just want to use it: setTimeout(function() {nameoffunc(parameter); parameter = null}, 3000) • nameoffunc is the name of the function you want to call • parameter is the name of the parameter you’re sending into the function • So to use: • Copy the correct setTimeout above • Replace nameoffunc with the name of your function, or, in this example myfunc, • Replace parameter with the name of your parameter, or easyorhardin this example

More Related