2. Game var count = 0 var total = 0 function myfunc() { if (count < 50) {var basetime = 1000 document.getElementById('img1').src = "Images/gopher.jpg" document.getElementById('img1').style.position = "absolute" var ycoord = Math.floor(Math.random() * 800) var xcoord = 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" } link

3. 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 var minpercent = 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 var curpercent = Math.floor(Math.random() * 50) + minpercent We mustcalculate the total width and height based on the percent var curwidth = Math.floor(curpercent/100 * 159) var curheight = 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

4. Adding size changes to game… var count = 0 var total = 0 function myfunc() { if (count < 50) {var basetime = 1000 var minpercent = 50 document.getElementById('img1').src = "Images/gopher2.jpg" document.getElementById('img1').style.position = “absolute" var ycoord = Math.floor(Math.random() * 800) var xcoord = Math.floor(Math.random() * 800) document.getElementById('img1').style.left = ycoord+"px" document.getElementById('img1').style.top = xcoord+"px“ var curpercent = Math.floor(Math.random() * 50) + minpercent var curwidth = Math.floor(curpercent/100 * 159) var curheight = 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" } link

5. Let’s start this game with a button var count = 0 var total = 0 function myfunc() { if (count < 50) {var basetime = 1000 var minpercent = 50 document.getElementById('img1').src = "Images/gopher2.jpg" document.getElementById('img1').style.position = "relative" var ycoord = Math.floor(Math.random() * 630) var xcoord = Math.floor(Math.random() * 563) document.getElementById('img1').style.left = ycoord+"px" document.getElementById('img1').style.top = xcoord+"px“ var curpercent = Math.floor(Math.random() * 50) + minpercent var curwidth = Math.floor(curpercent/100 * 159) var curheight = 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" } function func2() {total = total + 1 document.getElementById('h11').innerHTML = "Score so far: " + total +"!" document.getElementById('img1').src = "Images/bang.png" } Get the Gopher! Score so far: 0 Start Game link

6. Giving users the option of playing a harder version: How? 1.Maybe make it faster? 2.Make the gopher get smaller? 3.You could also add distractions (other things flying randomly around) 4.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…

7. Harder version: var count = 0 var total = 0 function myfunc() { if (count < 50) {var basetime = 1000 var minpercent = 50 document.getElementById('img1').src = "Images/gopher2.jpg" document.getElementById('img1').style.position = "relative" var ycoord = Math.floor(Math.random() * 630) var xcoord = Math.floor(Math.random() * 563) document.getElementById('img1').style.left = ycoord+"px" document.getElementById('img1').style.top = xcoord+"px“ var curpercent = Math.floor(Math.random() * 50) + minpercent var curwidth = Math.floor(curpercent/100 * 159) var curheight = 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?

8. Harder version: var count = 0 var total = 0 function myfunc() { if (count < 50) {var basetime = 600 var minpercent = 30 document.getElementById('img1').src = "Images/gopher2.jpg" document.getElementById('img1').style.position = "relative" var ycoord = Math.floor(Math.random() * 630) var xcoord = Math.floor(Math.random() * 563) document.getElementById('img1').style.left = ycoord+"px" document.getElementById('img1').style.top = xcoord+"px“ var curpercent = Math.floor(Math.random() * 50) + minpercent var curwidth = Math.floor(curpercent/100 * 159) var curheight = 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" } link

9. 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) {var basetime = 1000 var minpercent = 50 document.getElementById('img1').src = "gopher2.jpg" document.getElementById('img1').style.position = "relative" var ycoord = Math.floor(Math.random() * 630) var xcoord = Math.floor(Math.random() * 563) document.getElementById('img1').style.left = ycoord+"px" document.getElementById('img1').style.top = xcoord+"px“ var curpercent = Math.floor(Math.random() * 50) + minpercent var curwidth = Math.floor(curpercent/100 * 159) var curheight = 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) {var basetime = 600 var minpercent = 30 document.getElementById('img1').src = "gopher2.jpg" document.getElementById('img1').style.position = "relative" var ycoord = Math.floor(Math.random() * 630) var xcoord = Math.floor(Math.random() * 563) document.getElementById('img1').style.left = ycoord+"px" document.getElementById('img1').style.top = xcoord+"px“ var curpercent = Math.floor(Math.random() * 50) + minpercent var curwidth = Math.floor(curpercent/100 * 159) var curheight = 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 {… }

10. If we somehow knew whether the easy or the hard button was pushed… We could have one function that looked like this… function myfunc() /* easy version */ { if (count < 50) {if /* easy button was pushed */ {var basetime = 1000 var minpercent = 50 } else if /* hard button was pushed */ {var basetime = 600 var minpercent = 30 } document.getElementById('img1').src = "gopher2.jpg" document.getElementById('img1').style.position = "relative" var ycoord = Math.floor(Math.random() * 630) var xcoord = Math.floor(Math.random() * 563) document.getElementById('img1').style.left = ycoord+"px" document.getElementById('img1').style.top = xcoord+"px“ var curpercent = Math.floor(Math.random() * 50) + minpercent var curwidth = Math.floor(curpercent/100 * 159) var curheight = 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…

11. 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 var narr = 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: click here to call the function with the parameter ‘easy’ 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’

12. Parameter Example: 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!" } Different Styles click here for snow click here for rain click here for sun link

13. Functions can have more than one parameter function myFunction(name,job) {document.getElementById('p1').innerHTML = "Welcome " + name + ", the " + job; } Results go here. Try it  Parameters match in order:  function myFunction( name, job)  onclick =myFunction(‘Harry Potter’,‘Wizard’)  Onclick =myFunction(‘Bob’‘Builder’)

14. Back to Game: var count = 0 var total = 0 function myfunc(easyorhard) { if (easyorhard == 'easy') {var basetime = 1000 var minpercent = 50 } else if (easyorhard == 'hard') {var basetime = 600 var minpercent = 30 } if (count < 50) {document.getElementById('img1').src = "Images/gopher2.jpg" document.getElementById('img1').style.position = "relative" var ycoord = Math.floor(Math.random() * 630) var xcoord = Math.floor(Math.random() * 563) var curpercent = Math.floor(Math.random() * 50) + minpercent document.getElementById('img1').style.left = ycoord+"px" document.getElementById('img1').style.top = xcoord+"px" var curwidth = Math.floor(curpercent/100 * 159) var curheight = 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" } Get the Gopher! Score so far: 0 Easy Hard

15. 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: 1.Copy the correct setTimeout above 2.Replace nameoffunc with the name of your function, or, in this example myfunc, 3.Replace parameter with the name of your parameter, or easyorhard in this example