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 we did (do) • Use an editor (Sublime) to prepare HTML document • It may contain html, JavaScript, CSS • Use a browser (Firefox, Chrome, etc.) to see our work (run, execute, display) • Soon: use an ftp program (Filezilla) to upload files to your website so anyone can see them • If they have the URL

Layers of software (programs) HTML document the <head> element may contain <script> with JavaScript Text editor (Sublime, Textpad, others) Browser (Chrome, Firefox, Safari, IE, others) Operating System, such as OS Yosemite on MACs or Windows on PCs or Linux on various computers or Android or iOS

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 and many other examples. • 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 the 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 = "Jordan"; • 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: could have var tas = ["Jordan"];tas[0] is "Jordan";tas[1] is an error. Can check tas.length

Note • [ordinary] arrays require the programmer to put the items in an 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 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.

Filezilla • …. is a file transfer protocol program. • Find and start Filezilla • Connect to your website • Use Site Manager to set up new connection. • Specify host, protocol, encryption, user, password • Now can move files from the computer in front of you (aka client computer) to and from your site (on server computer)

Notes • Can use this for storage even if your project is not done. • There are no links. No one knows about it. • You can make a new folder on the server • Perhaps games or pg • For the Favorite Sites project, how many files must you upload to your server?

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>

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

Programming games