Programming games Show work on site. Work on slide show. Timed event for bouncing ball. Homework: [Finish slide show and upload to site.] Acquire a short video clip.

ftp We will go around to check that you have uploaded something…. Preference is that you set up an index.html file so I (and anyone else) just goes to students.purchase.edu/john.doe –index.html files can be in any folder / multiple folders students.purchase.edu/john.doe/pg Your userid.

Game Review Design screen (game board) –static elements –dynamic elements image changes position changes Identify events and program event handlers Determine data (global variables)

HTML/JavaScript Review HTML head element contains –style element –script for functions and global variables setInterval used for timed events HTML body element contains –images –a element for javascript code as value of href, onMouseOver, onMouseOut, onClick –forms javascript code for onSubmit input elements for input from player AND output (display) to player –canvas element or elements

General hints Syntax (punctuation for code) counts! Watch for correct 'pairing up' of parentheses, curly brackets, quotation marks. HTML and JavaScript names must be correct. Your names (for functions, variables, images, etc.) must be consistent.

Debugging Put in alert("Here in code, variable x is "+X ); statements Use Firefox (or Mozilla or Netscape) and under Tools Error Console –Remember to Clear old messages –Be sure you are testing the file you are correcting…. Work slowly: add functionality one 'thing' at a time. Read the whole tutorial. Don't (just) copy and paste all the code. Think where the code goes.

Timed events Once a timed event is set up, you can do anything…. Better said: write code for setting up timed event. Write code to do anything. Example: bouncing ball –Strategy: use init function as done in other drawing examples. Use setInterval. Erase and re-draw circle and box.

var ctx; var cwidth = 900; var cheight = 600; var ballrad = 50; var boxx = 20; var boxy = 30; var boxwidth = 850; var boxheight = 550; var boxboundx = boxwidth+boxx-ballrad; var boxboundy = boxheight+boxy-ballrad; var inboxboundx = boxx+ballrad; var inboxboundy = boxy+ballrad; var ballx = 150; var bally = 160; var ballvx = 2; var ballvy = 4;

function init(){ ctx = document.getElementById('canvas').getCo ntext('2d'); ctx.lineWidth = ballrad; setInterval(drawscene,50); }

function drawscene(){ ctx.clearRect(boxx,boxy,boxwidth,boxheight); moveandcheck(); ctx.beginPath(); ctx.arc(ballx,bally,ballrad,0,2*Math.PI,true); ctx.fill(); ctx.strokeStyle ="rgb(200,0,50)"; ctx.strokeRect(boxx,boxy,boxwidth,boxheight); //box }

function moveandcheck() { var nballx = ballx + ballvx; var nbally = bally +ballvy; if (nballx > boxboundx) { ballvx =-ballvx; nballx = boxboundx; } if (nballx < inboxboundx) { nballx = inboxboundx ballvx = -ballvx; } if (nbally > boxboundy) { nbally = boxboundy; ballvy =-ballvy; } if (nbally < inboxboundy) { nbally = inboxboundy; ballvy = -ballvy; } ballx = nballx; bally = nbally; }

This browser doesn't support the HTML5 canvas element.

After slide show You can bounce anything! In the drawscene function replace ctx.beginPath(); ctx.arc(ballx,bally,ballrad,0,2*Math.PI,true); ctx.fill(); You can change dimensions of box, ball, speed, etc. You can change colors. You can add code to start and stop, using slide show as a model.

Class work / Homework Catch up and continue uploading work to your site Complete slide show. –upload to site. This means the html file and all the image files for the slide show. Acquire short video clip. Will start bouncing something…