Programming gamesClasswork: [Show Favorite Sites.] Show basic
coin toss. Filezilla.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);
<html><head><title>Coin Toss </title><script>function toss() {if (Math.random()>.5) { document.coin.src = "head.gif";}else { document.coin.src = "tail.gif"; }return false; }</script></head><body><img name="coin" src="questionmark.gif"><button onclick="return toss();">FLIP COIN</button></body></html>
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<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 casedocument.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<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>
ftp
• file transfer protocol• Many programs available.• We use Filezilla
• Demonstration
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.
• http://students.purchase.edu/john.doe/pgwill cause browser to look for a file named index.html in the pg folder.
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>
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
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>
Specify character set• In the head element
<meta charset="UTF-8">
• Program (document) will display without this, but it triggers a warning.
• Extra credit opportunity: research this and make posting to Introductions, extra credit forum.
index.html<!DOCTYPE html><html><head><title>My Games</title><meta charset="UTF-8"></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>
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• 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
