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.