34
Programming games HTML/JavaScript basics Functions, events, forms Classwork: [Show favorite sites.] Coin toss. Homework: GET WEB SPACE. Complete coin toss.
| Date post: | 31-Dec-2015 |
| Category: |
Documents |
| Upload: | eliana-weiss |
| View: | 25 times |
| Download: | 2 times |
Programming games
HTML/JavaScript basics
Functions, events, forms
Classwork: [Show favorite sites.] Coin toss. Homework: GET WEB
SPACE. Complete coin toss.
Recap on shoe tying
• Directions for sequence of operations• Included 'event' related actions: do this
until this situation is true– Usual form is: when this event happens, do
this. The pulling of the laces was keep going until something happens
• Double loop (bunny ears) method made two overhand knots
• Task definition versus language for task
Recap
• What are the parts of an html document?
template<html> <head><title> Sites </title>
<style>
article {display:block; ….}
</style>
</head>
<body> My sites
<article> …. </article>
<article> … </article>
<article> … </article>
</body> </html>
Fonts
• How do you use CSS to specify font for a specific element type, such as article?
• Look it up! Terms could be html5 font <style>
• Note: I want the formatting in the <style> element, not in the body.
Preparation for…coin toss
• Image change
• Variables
• Math functions– Math.random()
• if statement
• Function definitions and
• Function calls
Image change• Image tag (and other tags) can have
names:<img name="coin" src="blank.gif">• HTML tags have attributes.
– name and src are each attributes.
• Your code can change the image being displayed by referring to the src attribute of the img element of a given name:
document.coin.src = "head.gif"
So…
• if my/our code determines that a head of a coin should be shown, and the img element has the name coin and the name of the image files are "head.gif" and "tail.gif", how do we write the code to make sure the img element is showing a tail?
Variables• Variable is a programming construct for associating a name
(possibly a place in memory) with a value. Your code then uses the name as it would the value. Values are specific datatypes: integers, numbers, strings of characters, Booleans, other things
• JavaScript has the var statement for setting up a variable. IT IS NOT ALWAYS NECESSARY to do this before using a variable, but is a good idea.
• The term for this is declaring a variable. This is required in many programming languages, for example, Processing.
var size = 25; var classname = "Programming Games";var ta = "Skylar";• A variable can be referenced in code and changed
by code.document.write("The class is " + classname +
" and the TA is "+ ta);size = size + 1; SAME AS size++;
Array variables• Variables hold different types of data
– int, number, string, Boolean…– Arrays are a type of variable that holds an
ordered set of values
var tas = ["Skylar", "Allen"];
To get at individual components, use indexing. The first index is 0
tas[0] is "Skylar"
tas[1] is "Allen"
Note
• [ordinary] arrays require the programmer to put the items in order. Must make sure that that order doesn't influence anything it shouldn't….– See my implementations of rock, paper, scissors
• JavaScript, some other languages, also have associative arrays: indexing by keys, not numbers. (Python calls these dictionaries)
• Some languages allow programmer to specify the range of numbers.
• SETL is a language that has unordered sets as primitive data type.
• Haskell is a language that includes ways to specify infinite sets.
Variables• Variables can be outside of any function, within the script
tag. The scope of these variables is global. They can be referenced and changed everywhere.
• Variables within, local to, a function go away when the function ends.MORE ON THIS LATER: when we do the dice game (craps)
• Variables are stored 'in memory' and go away when you exit the function or leave the page.
• Variables are reinitialized when you refresh/reload a page.– See in coin toss, the return false makes sure the page is not
refreshed/reloaded.
Math functions
• JavaScript, Objective-C, Processing, etc. provide many standard math functions as part of the language. Javascript does this using methods of the (single) Math class.
• We will use Math.sin() and Math.cos() for the cannonball game (ballistics simulation).
• Many games require use of Math.random() This returns a (fraction/decimal) value from 0 up to, but not including 1.
If statement
• Example of conditional statement. Two formsif (condition) { statements}• Orif (condition) { statements}else { statements}
example
var toss = Math.random();
if (toss>.5) {
alert("greater than .5");
}
else
{alert("not greater than .5"); }
example
var toss = Math.random();
if (toss>.5) {
alert("greater than .5");
}
else
{alert("not greater than .5"); }
At this point, toss will hold a number (fraction).
Writes out string in box
string is string (sequence) of symbols, such as a message
So in coin toss
var toss = Math.random();
if (toss>=.5) {
document.coin.src = "head.gif";
}
else
{ document.coin.src="tail.gif"; }
Function definition
• You can define your own functions, to be used by your code– called user-defined functions, but
• this may be confusing because you are the developer/programming and not the end user.
• I prefer player to user.– I call them programmer-defined functions.
• Function definitions generally are in the <script> </script> element in the <head> </head>.
• Calls (invocations) of functions in tags in the body or in other functions (or in this function, but more on that much later).
Analogy to function definition
• From now on, when I say 'check the schedule', I mean– [go to a computer connected to the Web.
Invoke a browser. Go to my website: http://faculty.purchase.edu/jeanine.meyerClick on Current. Click on Schedule under Programming Games
JavaScript function definition
<script>
function functionname (args if there are any)
{
statements
}
</script>
Function call
• Functions can be called / invoked / executed in different ways.
• One way is the result of an event set up in a tag
<button onclick="return toss();">
Flip coin!</button>
Aside
• There is a tutorial on coin toss. You now have heard about different features/constructs that are used. The coin toss puts them together.
• In your notebook, make note of the terms function, array, variable. These are common and important terms in computer programming jargon. Look them up. Read multiple sources.
Classwork
• Be ready to show your favorite sites.
• Acquire (find on-line) image files of coin faces.
• Look at newcointoss.doc tutorial (follow link from the currentcourses.html page) and create a simple coin toss application.
Example: changepicture
• script element holds 3 variables and one function definition– original, next, current and change
• body holds img and form– img is named place, src (initially) the same value as
original– form element is what produces the button that calls
the change()• use onSubmit
<html><head><script>
var original = "bird.gif";var next ="frog.gif";var current = "bird.gif";function change() {if (current==original) { current = next; document.place.src = next; }else { current = original; document.place.src = original;}return false; }</script> </head> <body><img name="place" src="bird.gif"/><form action=""
onSubmit="return change();"> <input type="submit" value="Change"></form> </body> </html>
Notice == for the checking for equality operation
form
• Can use form input values to– present button to player – output (display) information to player– as well as input values
• Will show more of this
form<script>… f.ans.value= ????</script><body><form action="" name="f"onSubmit="return toss();">
<input type="text" name="ans"> <input type="submit" value="TOSS">
</form></body>
More on functions• Functions in programming are ways to store code for
later use. This includes storing code to be used (re-used) more than one time. They also can make code easier to understand.
• A function in JavaScript has a function.– The first use of function (italic and bold) is JavaScript
jargon. The second use is English.
• Programming languages have constructions like functions.– For example, I'm learning Max, a language used for
music and other things. It has encapsulations and abstractions.
onsubmit
• When form submit button is pressed, invoke the toss() function and return to the system whatever value it returns.
• Functions can return/produce values
• A return value of false (the Boolean value false) means the html page will not be refreshed—changed back to the original.
Other Function calls
• In <a> tag as value of href<a href="javascript:fun(a, b);"> Call fun </a>
• In <a> tag as value of onClick, onMouseover or onMouseOut
<a href="" onMouseover="fun(a,b);" >• Set up to be called after time interval.
This statement will be somewhere in the code, perhaps within another function.
tid = setInterval("moveit(dx, dy)",500);
HTML5 feature
• button as a new element type
• Use google to look up how to write a button
Next
• How to make this a crooked/biased/weighted coin?
• Prepare for next class.
Web space
• You need an account on the purchase student server for this course to upload work!!!
• Go to http://students.purchase.edu and follow directions.
Homework• Introduce yourself on moodle if you haven’t done
so– Respond to other posts
• Get web space• Use the web to find definitions of
– function
– variable
– object
– class
• Check out books on reserve in Library• Do coin toss
