Programming games Classwork: Show Favorite Sites. Show coin toss. Review concepts. Crooked coin...

21
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.

Transcript of Programming games Classwork: Show Favorite Sites. Show coin toss. Review concepts. Crooked coin...

Page 1: Programming games Classwork: Show Favorite Sites. Show coin toss. Review concepts. Crooked coin toss. Homework: Complete coin toss examples. Upload files.

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.

Page 2: Programming games Classwork: Show Favorite Sites. Show coin toss. Review concepts. Crooked coin toss. Homework: Complete coin toss examples. Upload files.

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?

Page 3: Programming games Classwork: Show Favorite Sites. Show coin toss. Review concepts. Crooked coin toss. Homework: Complete coin toss examples. Upload files.

JavaScript function definition

<script>

function functionname (args if there are any)

{

statements

}

</script>

Page 4: Programming games Classwork: Show Favorite Sites. Show coin toss. Review concepts. Crooked coin toss. Homework: Complete coin toss examples. Upload files.

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…

Page 5: Programming games Classwork: Show Favorite Sites. Show coin toss. Review concepts. Crooked coin toss. Homework: Complete coin toss examples. Upload files.

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

Page 6: Programming games Classwork: Show Favorite Sites. Show coin toss. Review concepts. Crooked coin toss. Homework: Complete coin toss examples. Upload files.

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);

Page 7: Programming games Classwork: Show Favorite Sites. Show coin toss. Review concepts. Crooked coin toss. Homework: Complete coin toss examples. Upload files.

<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>

Page 8: Programming games Classwork: Show Favorite Sites. Show coin toss. Review concepts. Crooked coin toss. Homework: Complete coin toss examples. Upload files.

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?

Page 9: Programming games Classwork: Show Favorite Sites. Show coin toss. Review concepts. Crooked coin toss. Homework: Complete coin toss examples. Upload files.

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>

Page 10: Programming games Classwork: Show Favorite Sites. Show coin toss. Review concepts. Crooked coin toss. Homework: Complete coin toss examples. Upload files.

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?

Page 11: Programming games Classwork: Show Favorite Sites. Show coin toss. Review concepts. Crooked coin toss. Homework: Complete coin toss examples. Upload files.

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.

Page 12: Programming games Classwork: Show Favorite Sites. Show coin toss. Review concepts. Crooked coin toss. Homework: Complete coin toss examples. Upload files.

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>

Page 13: Programming games Classwork: Show Favorite Sites. Show coin toss. Review concepts. Crooked coin toss. Homework: Complete coin toss examples. Upload files.

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.

Page 14: Programming games Classwork: Show Favorite Sites. Show coin toss. Review concepts. Crooked coin toss. Homework: Complete coin toss examples. Upload files.

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>

Page 15: Programming games Classwork: Show Favorite Sites. Show coin toss. Review concepts. Crooked coin toss. Homework: Complete coin toss examples. Upload files.

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

Page 16: Programming games Classwork: Show Favorite Sites. Show coin toss. Review concepts. Crooked coin toss. Homework: Complete coin toss examples. Upload files.

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.

Page 17: Programming games Classwork: Show Favorite Sites. Show coin toss. Review concepts. Crooked coin toss. Homework: Complete coin toss examples. Upload files.

ftp

• file transfer protocol

• Many programs available.

• We use Filezilla

• Demonstration

Page 18: Programming games Classwork: Show Favorite Sites. Show coin toss. Review concepts. Crooked coin toss. Homework: Complete coin toss examples. Upload files.

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.

Page 19: Programming games Classwork: Show Favorite Sites. Show coin toss. Review concepts. Crooked coin toss. Homework: Complete coin toss examples. Upload files.

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!

Page 20: Programming games Classwork: Show Favorite Sites. Show coin toss. Review concepts. Crooked coin toss. Homework: Complete coin toss examples. Upload 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

Page 21: Programming games Classwork: Show Favorite Sites. Show coin toss. Review concepts. Crooked coin toss. Homework: Complete coin toss examples. Upload files.

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