Programming gamesClasswork: 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
<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>
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>
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>
• For your own copy of sublime: http://www.sublimetext.com/– 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 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
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