Programming games

Programming games 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 <script> function functionname (args if there are any) { statements } </script>

Function call • Multiple ways to set up to be response to a button • A form is an html element. <form action="" onSubmit="return toss();"> <input type="submit" value="TOSS"> </form> • A new html element is button <button onclick="return toss();">TOSS</button> • 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 <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);

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 <form name="f"> Heads: <input name="hc" value="0" /> Tails: <input name="tc" value="0" /> </form>

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 • Enhance the fair coin toss and the biased coin toss to show counts.

Reading code: sketch <html> <head> <title>First html</title> </head> <body> Annika's first Halloween <br/> <img src="yodalightsaber.jpg" width="200"/> <br/> Costume by Aunt Aviva <a href="http://ravel.me/avivameyer/prix7">Knitting information </a> </body> </html>

Folders • You may decide to make a folder called pg • So…. • http://students.purchase.edu/john.doe/pgwill cause browser to look for a file named index.html

index.html <html><head><title>My Games</title></head> <body> Programming Games <ul> <li><a href=“sites.html”>My Favorite Sites </a></li> <li><a href=“coin.html”>Coin toss </a></li> <li><a href=“badcoin.html”>Biased coin </a></li> </ul></body></html>

Folder for images • You can make a folder for images • Then the reference from the html file must be correct! <img src=“images/head.jpg” /> • 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 <!DOCTYPE html> • If you use Dreamweaver, you may notice that it inserts another DOCTYPE. Remove this or else it won't work if it has html5 features. • A new text editor is http://www.sublimetext.com/

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

codeacademy • There are many sources online to help you. • One is http://www.codecademy.com/ • 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 • Do first course (8 short lessons) in codeacademy. • comment on moodle forum for this week! • Complete coin toss projects. • Prepare index.html file (This is a table of contents) with links to your projects. • Put it in the web folder OR (if you are taking other courses) a new subfolder called pg or games • Upload the index.html file and all your projects • html files and other files….

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/pgwill open up that file.

Programming games