Programming games HTML/JavaScript basics Functions, events, forms Classwork: Favorite Sites. Coin toss. Homework: GET WEB SPACE. Complete crooked coin toss. HTML basics first
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
Icons and styles Things can be inside things! The contents of an a element can be… an img element. This produces a clickable picture. A style is defined to apply to specific element types. Styles also can apply to all elements of a designed class or an element with a specific id. More on this later.
secondtest.html <html> <head><title>Second test</title> <style> article { font-size:20px; display:block; } img {display:block;} </style> <script> document.write("<i>"+Date()+"</i>"); </script> </head> <body> <article>This is the Meyer family origami page. <a href="http://faculty.purchase.edu/jeanine.meyer/origami"><img src="bird.gif"/></a> </article> </body> </html>
Notice bigger letters and the line. Notice box around the bird!
Lessons Notice patterns Things inside of things…. Practice pop research quiz: look up CSS font-family and see how to specify fonts. All fonts are not on all computers, so you specify your first choice, second choice, then type (serif, monospace)
Class work Produce an HTML file that presents 3 (favorite) websites writes out the date at the top Title is your name plus 'Favorite Sites' Describes 'favorite sites', with text and an image from the site, linking to the site. Enclose each description in an article element.
Web publishing space CTS provides web space for all students. Do sign up for it! You will be required to upload projects—publish them—on the web.
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"> 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" You may be able to leave off the window in window.document….
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. JavaScript and ActionScript have 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. var size = 25; var classname = "Programming Games"; var ta = "Kathryn"; 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… ALSO: arrays var tas = ["Kathryn", "Luke"]; To get at individual components, use indexing. The first index is 0!!! tas[0] is "Kathryn" tas[1] is "Luke"
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…. Think about this in rock, paper, scissors Some languages do have associative arrays: indexing by keys, not numbers. Some languages allow programmer to specify range of numbers SETL is a language that has unordered sets as primitive data type.
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. 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 and ActionScript, etc. provide many standard math functions. This is formally done as methods of the (single) Math object. 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 forms if (condition) { statements } Or else { The indenting is NOT required, but is a good idea to help you keep track of what is going on.
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). Note: look ahead: the trace function will do a similar task as alert in ActionScript/Flash. 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"; } var statement sets up the variable named toss AND immediately gives it a value. The var statements are not required, but a good practice. This is called a variable declaration. Some languages require them.
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. 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.meyer Click on link to Lectures, materials. Click on Schedule under Programming Games
JavaScript function definition function functionname (args if there are any) { statements } </script> Outline.
Function call Set up to be response to the submit event—clicking on a submit button for a form <form action="" onSubmit="return toss();"> <input type="submit" value="TOSS"> </form> The return may not be necessary. Within the definition of the toss function will be a return statement.
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
var original = "bird.gif"; var next ="frog.gif"; <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 Squeezed to fit on a chart.
form Can use form input values to output (display) information to player 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>
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); We will use these later.
Classwork Find images for coin toss Read coin toss tutorial. The head of coin, tail of coin, and a blank or question mark. NOTE: this is not the main point of the assignment, so don't spend too much time on it. Read coin toss tutorial. Prepare coin toss.
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.