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

Demonstrate Examples http://faculty.purchase.edu/jeanine.meyer/html5pro jects.html Family Collage (may need re-load to get all photos. Extra credit to fix!): http://faculty.purchase.edu/jeanine.meyer/html5/bu ildfamily.html 2

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/mov evideos.html Second attempt at Collage with addition of videos http://faculty.purchase.edu/jeanine.meyer/html5/collagebas e.html Uses external file to hold information on media items.

ALERT Chrome browser changed what video formats it used since last offering of course. The fix was to change ORDER of the source elements within the video element, making webm option first!

Lesson Sometimes doing something general is easier than doing something specific… I did this for the family collage.

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

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) Create new objects 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/html5expla in.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 side sin(angle)*side angle cos(angle)*side 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

ctx.fillStyle=polycolor; var i; var rad = this.rad; 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.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 Many more available online: 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 Decide on final project Post proposal 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. 21