Programming games Classwork: Show Favorite Sites. Show coin toss. Review concepts. Crooked coin toss. Homework: Complete coin toss examples. Upload files to your Purchase website. Try codeacademy.

What is… a function? –how is it defined? –how is it called? What is the name of the function you defined in your coin toss application?

JavaScript function definition function functionname (args if there are any) { statements }

Function call Multiple ways to set up to be response to a button –A form is an html element. –A new html element is button TOSS –other ways…

Event handling Speaking in general terms about something set up a variety of ways. Set up the when this event happens, … do this, maybe call this function Terms used: –event listener –event handler –event catcher sometimes restricted to potential errors: try { } catch

Other Function calls In tag as value of href Call fun In tag as value of onClick, onMouseover or onMouseOut 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);

Coin Toss function toss() { if (Math.random()>.5) { document.coin.src = "head.gif"; } else { document.coin.src = "tail.gif"; } return false; } FLIP COIN

Biased coin How to change your program from a fair coin to a biased coin? How to make it produce (over time) twice as many heads as tails? How to make it produce (over time) heads 60% of the time and tails 40% of the time?

Keeping counts One approach –use form element –Note: the input elements actually are used for output: output to show player Heads: Tails:

Problem There is a difference between text and numbers, so…. need to extract the text value, convert to a number, add 1, then convert back. // for the head case document.f.hc.value = String(1+Number(document.f.hc.value) ); So where do you put this and what do you do for the tail case?

Classwork Complete and show your fair coin toss. Save under new name and make a biased coin –Precisely biased! Save under new name and enhance the fair coin toss and the biased coin toss to show counts.

Reading code: sketch First html Annika's first Halloween Costume by Aunt Aviva Knitting information

Folders Browsers provide a way to specify which file to open if no file is mentioned. This is the index.html file. Let's assume you made a folder called pg to hold all your Programming Games work. pg will cause browser to look for a file named index.html in the pg folder.

index.html My Games Programming Games My Favorite Sites Coin toss Biased coin

Folder for images You can make a folder for images –Then the reference from the html file must be correct! Or not….. May make more sense to make separate folders for the large[r] applications

doctype The first line of an HTML5 file should / can /maybe must for some browsers be For your own copy of sublime: –At some point, you should pay for this.

ftp file transfer protocol Many programs available. We use Filezilla Demonstration

codeacademy There are many sources online to help you. One is This includes a terminal/console mode that returns the value of each expression. Try the first lesson (or more) and post a comment on moodle.

Homework Complete coin toss projects. –Make file names without spaces. Prepare index.html file (This is a table of contents) with links to your projects. Put it in the web folder OR a new subfolder called pg or games Upload the index.html file and all your projects –html files and other files…. You will keep updating the index.html file as you add new projects. Do first course (8 short lessons) in codeacademy. –comment on moodle forum for this week!

Required Master editing using TextWrangler (or Text Pad) or Sublime Master ftp, using Filezilla (or equivalent ftp program) to upload to YOUR PURCHASE website –Using the virtual disk tends to be problematic! Master using Filezilla to download from your server to your computer. Master modifying your index file and uploading again

Web site It may make sense to make a directory/folder for this class. You can call it pg Put the index file in that directory Put your application files in that directory –the.html files and all image files. So.. students.purchase.edu/jane.doe/pg will open up that file. faculty.purchase.edu/jeanine.meyer actually opens a file called index.html