1. Programming Games [Show Google Maps project.] Demonstrate more examples. Classwork/Homework: Decide on final project. Post proposal to moodle.

2. Demonstrate Examples http://faculty.purchase.edu/jeanine.meyer/html5projects.html Family Collage: http://faculty.purchase.edu/jeanine.meyer/html5/buildfamily.html http://faculty.purchase.edu/jeanine.meyer/html5/buildfamily.html

3. Add videos First attempt – Add new object type: Videoblock. – Control overlays using globalCompositeOperator and globalAlpha – Control volume – Use setInterval for calls to drawstuff http://faculty.purchase.edu/jeanine.meyer/mediamash/movevideos.html Second attempt at Collage with addition of videos http://faculty.purchase.edu/jeanine.meyer/html5/collagebase.html http://faculty.purchase.edu/jeanine.meyer/html5/collagebase.html Uses external file to hold information on media items.

4. Lesson Sometimes doing something general is easier than doing something specific…

5. Objects Programming concept Informal definition: an object is something with properties (aka attributes) and methods (functions) One of the methods is the constructor method that builds an instance of the object – Recall: Date(), also map = new google.maps.Map(...);

6. Programmer created objects Write constructor functions for Rect, Oval, Picture, Heart – This is my coding Write code to determine when mouse is over an object Write code to draw the object Write code to create specific rectangles, ovals, heart

7. In init function var r1 = new Rect(2,10,50,50,"red"); var s1 = new Rect(60,10, 50,50,"blue"); var oval1 = new Oval(200,30,20,2.0,1.0, "teal"); var cir1 = new Oval(300,30,20,1.0,1.0,"purple"); var dad = new Image(); dad.src = "daniel1.jpg"; … var pic1 = new Picture(10,100,100,100,dad); … var heart1 = new Heart(510,30,60,20,"pink"); stuff.push(pic1); stuff.push(pic2); stuff.push(pic3); stuff.push(pic4); stuff.push(pic5); stuff.push(r1); stuff.push(s1); stuff.push(oval1); stuff.push(cir1); stuff.push(heart1); drawstuff();

8. Features Drag objects (images, drawings) – Critical events: mouse down, mouse move, mouse up Create new objects – Critical event: double click

9. In init function function init() { canvas1 = document.getElementById('canvas'); canvas1.onmousedown = function () { return false; } canvas1.addEventListener('dblclick',makenewitem,false); canvas1.addEventListener('mousedown',startdragging,false); ctx = canvas1.getContext("2d"); …

10. function startdragging(ev) { var mx; var my; if ( ev.layerX || ev.layerX == 0) { // Firefox, ??? mx= ev.layerX; my = ev.layerY; } else if (ev.offsetX || ev.offsetX == 0) { mx = ev.offsetX; my = ev.offsetY; } var endpt = stuff.length-1; for (var i=endpt;i>=0;i--) { if (stuff[i].overcheck(mx,my)) { offsetx = mx-stuff[i].x; offsety = my-stuff[i].y; var item = stuff[i]; thingInMotion = stuff.length-1; stuff.splice(i,1); stuff.push(item); canvas1.style.cursor = "pointer"; canvas1.addEventListener('mousemove',moveit,false); canvas1.addEventListener('mouseup',dropit,false); break; } } }

11. function makenewitem(ev) { var mx; var my; if ( ev.layerX || ev.layerX == 0) { mx= ev.layerX; my = ev.layerY; } else if (ev.offsetX || ev.offsetX == 0) { mx = ev.offsetX; my = ev.offsetY; } var endpt = stuff.length-1; var item; for (var i=endpt;i>=0;i--) { if (stuff[i].overcheck(mx,my)) { item = clone(stuff[i]); item.x +=20; item.y += 20; stuff.push(item); break; } } drawstuff(); }

12. Examples http://faculty.purchase.edu/jeanine.meyer/html5/html5explain.html – Scroll down to memory examples. Compare! – Polygons and pictures – Note: needed to fix problem in one of the photos examples: the last pair didn't go away! – Important feature was insert of pause, so player could see the result before "flip back" or remove pair. – Why do I put "flip back" in quotes?

13. Drawing polygons Create programmer-defined (me!) object called Polycard Defining characteristics are x,y,radius,number of sides

14. function Polycard(sx,sy,rad,n) { this.sx = sx; this.sy = sy; this.rad = rad; this.draw = drawpoly; this.n = n; this.angle = (2*Math.PI)/n; this.moveit = generalmove; }

15. Draw using method named drawpoly Objects have data (attributes, properties) and code (methods) The this refers to the object, so this.sx, this.sy, this.rad and this.angle is the stored data.

16. Recall

17. Use of this in code In my program for drawing a specific polygon p.drawpoly(); Then this.angle, this.rad, this.sx, etc., will refer to the angle, rad, sx, etc. properties of THIS polygon. These are benefits of object oriented programming: bringing together code and data.

18. function drawpoly() { ctx.fillStyle= frontbgcolor; ctx.strokeStyle=backcolor; ctx.fillRect(this.sx-2*this.rad,this.sy- 2*this.rad,4*this.rad,4*this.rad); ctx.beginPath(); ctx.fillStyle=polycolor; var i; var rad = this.rad; ctx.strokeRect(this.sx,this.sy,4,4); ctx.beginPath(); ctx.moveTo(this.sx+rad*Math.cos(-.5*this.angle),this.sy+rad*Math.sin(-.5*this.angle)); for (i=1;i<this.n;i++) { ctx.lineTo(this.sx+rad*Math.cos((i-.5)*this.angle),this.sy+rad*Math.sin((i-.5)*this.angle)); } ctx.fill(); }

19. Examples http://faculty.purchase.edu/jeanine.meyer/morehtml5examples.html Many more available online: – Remember: you don't read this like poetry.... – Scan. Look at functions defined. Look at body. Scan… BUT: the html document—the program—must have the proper structure. Be VERY careful when copy- and-pasting code.

20. Classwork/homework Catch up – bouncing ball, cannonball, 2 video, 2 Google Maps (Move on even if you haven't finished cannonball!) Decide on final project Post proposal Start final project. Have something to show. Ask for help. Show complete final project.