programming games [show google maps project.] demonstrate more examples. classwork/homework: decide...
Post on 14-Jan-2016
217 Views
Preview:
TRANSCRIPT
Programming Games
[Show Google Maps project.] Demonstrate more examples.
Classwork/Homework: Decide on final project. Post proposal to moodle.
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 drawstuffhttp://faculty.purchase.edu/jeanine.meyer/mediamash/movevideos.html
• Second attempt at Collage 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 functionvar 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!
– 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?
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.
Recall
Use of this in code
• In my program for drawing a specific polygonp.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.
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…BUT: the html document—the program—must have
the proper structure. Be VERY careful when copy-and-pasting code.
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.
top related