Programming games Review concepts. Crooked coin toss. Drawing on canvas. Homework: Complete [static] drawings. Upload files to website.

What is… a function? –how is it defined? –how is it called? What is a variable?

JavaScript function definition function functionname (args if there are any) { statements }

Function call Set up to be response to the submit event— clicking on a submit button for a form A form is an html element.

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 tag as value of href Call fun In tag as value of onClick, onMouseover or onMouseOut 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);

Break Show coin toss and crooked coin toss if you haven't done so already. Will then start on drawing on canvas element.

HTML5 drawing on canvas canvas is a new type of element drawing is done using what is termed the 2d context of a drawing element –This requires statement done AFTER the body is loaded can draw rectangles, paths (lines and arcs), images, text, video! –can also display video directly.

Screen geometry Origin is upper left corner!!!! units are pixels (very small) Sometimes top and sometimes y is used for vertical –vertical values increase going down the screen Sometimes left and sometimes x is used for horizontal –horizontal values increase going to the right. Screen geometry holds for Flash (and Processing)

Drawings Default color is black. Drawing done for stroke versus fill. Colors are set using –names (for 16 specific colors or_names.htm. or_names.htm –red-green-blue values, each as numbers 0 to 255 –hexadecimal

0,0, default color, 10 by 10, stroke 0,300,green,30 by 30, stroke 500,300, 50 by 50, fill 500,0,default color,20 by 20, fill rgb(200,0,100)

Four rectangles var ctx; function init() { ctx = document.getElementById('canvas').getContext('2d'); ctx.lineWidth = 2; ctx.strokeRect(0,0,10,10); ctx.fillRect(500,0,20,20); ctx.strokeStyle = "green"; ctx.fillStyle = "rgb(200,0,100)"; ctx.strokeRect(0,300,30,30); ctx.fillRect(500,300,50,50); } Your browser doesn't support the HTML5 element canvas.

Next After you get this working, change it! Put rectangles of different sizes in different places. Change colors.

Errors JavaScript is scripting language: interpret statements at execution time. –NOT compiled, with error messages Semantic errors (errors of meaning) are more difficult to detect and fix! Syntactic errors are errors of form, analogous to grammatical errors –FireFox Tools/Error Console can help Most common: bad bracketing ctx.fillStyle("rgb(200,0,100)"); fillStyle is attribute,not method

Comments The drawing is done in the init function which is called when the body element is loaded. The canvas element with id="canvas" does not exist until the body is loaded. –if there was more than one canvas element, we would use different names for the ids. Default color is black. Red green blue values each are 0 to 255 (8 bits of intensity). The strokeStyle and the fillStyle are attributes, not methods. GO: experiment with colors (by name) and rgb (note the quotation marks) and location and width and height.

More comments Drawings are …paint on the canvas. These rectangles are not objects to be moved or referenced later. Use ctx.clearRect method to erase. Need to do calculations to detect hits. –See memory game in book. Alternative is dynamic placement of html markup –See quiz, hangman.

Next drawing Paths created with arcs and line segments Arcs are portions of circles, created using radians in place of degrees. Math.PI is available for use. A complete circle can be drawn from 0 to 2*Math.PI or –Math.PI to Math.PI, etc. Arcs can be stroke or fill. workshop/wkshopsmile.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5 workshop/wkshopsmile.html workshop/wkshopfrown.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5 workshop/wkshopfrown.html

Angles 0 (=2*PI) PI/4 PI/2 PI PI*3/2 true means counter- clockwise!.80*PI.20 * PI

arcs ctx.arc (x of center, y of center, radius, starting angle, finishing angle, true for counter-clockwise) No drawing (ink) at the center! This is important when connecting arcs and lines. EXPERIMENT

4 distinct paths, each made up of 1 arc. Default, "red" and "brown"

Strategy Use variables with some variable values defined in terms of others. Circle face and two eyes. Smile is (partial) arc. Brown eyes and red smile. body element same as before. –You can add the code for this to your rectangles drawing.

var ctx; var headx = 100; //center of face x coord. var heady = 200; // center of face y coord. var headrad = 50; //radius of face var smileoffsetx=0; //smile center x is same as face var smileoffsety = 15; //smile center y further down var smilerad=20; // smile radius var eyeoffsety = -10; //eyes up from center var lefteyeoffsetx = -15; //left eye var righteyeoffsetx = -lefteyeoffsetx; //right var eyerad = 8; // eye radius

function init() { ctx = document.getElementById('canvas').getContext(' 2d'); ctx.lineWidth = 5; ctx.beginPath(); ctx.arc(headx,heady,headrad,0,2*Math.PI,true); ctx.closePath(); ctx.stroke(); …

ctx.strokeStyle = "red"; ctx.beginPath(); ctx.arc(headx+smileoffsetx,heady+smileoffsety, smilerad,.80*Math.PI,.20*Math.PI,true); ctx.stroke(); ctx.fillStyle = "brown"; ctx.beginPath(); ctx.arc(headx+lefteyeoffsetx,heady+eyeoffsety,eyerad, 0,2*Math.PI,true); ctx.fill(); ctx.beginPath(); ctx.arc(headx+righteyeoffsetx,heady+eyeoffsety,eyerad, 0,2*Math.PI,true); ctx.fill(); }

Homework Practice [static] drawing(s). Next class we will a new version of coin toss triggered by clicking on the canvas. Upload work to your website –create an index file with list of projects and upload using an ftp program –upload the html and, if required, any image files