Programming games

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 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 = "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 data var tas = ["Joshua", "Aryn"]; To get at individual components, use indexing. The first index is 0!!! tas[0] is "Joshua" tas[1] is "Aryn"

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 • JavaScript, some other languages, 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.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, ActionScript, Processing, etc. provide many standard math functions. This is formally done as 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 forms if (condition) { statements } • Or if (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

Notice == for the checking for equality operation <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>

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>

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 • 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

Programming games