Programming Games Show Google Maps project. Demonstrate examples. Classwork/Homework: decide on final project. Post proposal to moodle.
Google Maps API • Build on existing functionality…
Demonstrate Examples • http://faculty.purchase.edu/jeanine.meyer/html5projects.html • Family Collage:http://faculty.purchase.edu/jeanine.meyer/html5/buildfamily.html
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 atCollage with addition of videoshttp://faculty.purchase.edu/jeanine.meyer/html5/collagebase.html • Uses external file to hold information on media items.
Lesson • Sometimes doing something general is easier than doing something specific…
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
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();
Features • Drag objects (images, drawings) • Critical events: mouse down, mouse move, mouse up • Create new objects • Critical event: double click
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"); …
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; } } }
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(); }
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!
Drawing polygons • Create programmer-defined (me!) object called Polycard • Defining characteristics are x,y,radius,number of sides
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; }
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.
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(); }
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...
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
