< script> var count = 0 var total = 0 function myfunc () { if (count < 50 ) { var basetime = 1000">
Game
This presentation is the property of its rightful owner.
Sponsored Links
1 / 15

Game PowerPoint PPT Presentation


  • 89 Views
  • Uploaded on
  • Presentation posted in: General

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

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Game

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>


Make the gopher change sizes randomly

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


  • Adding size changes to game

    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"

    }

    }


    Let s start this game with a button

    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>


    Giving users the option of playing a harder version

    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…


    Harder version

    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?


    Harder version1

    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"

    }

    }


    What if we want to give users the option of easy or hard

    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

    {…

    }

    }


    If we somehow knew whether the easy or the hard button was pushed

    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…


    Parameters

    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’


    Parameter example

    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>


    Functions can have more than one parameter

    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’)


    Back to game

    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>


    Side note

    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


  • Login