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

2. Demonstrate Examples
jects.html
Family Collage (may need re-load to get all photos. Extra credit to fix!): ildfamily.html 2

3. Add videos First attempt Add new object type: Videoblock.
Control overlays using globalCompositeOperator and globalAlpha
Control volume
Use setInterval for calls to drawstuff
evideos.html
Second attempt at Collage with addition of videos e.html
Uses external file to hold information on media items.

4. 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!

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

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

7. 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

8. 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

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

10. 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

11. 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

12. 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

13. Examples
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

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

15. 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

16. 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

17. Recall
side
sin(angle)*side
angle
cos(angle)*side 17

18. 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

19. 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

20. Examples Many more available online:
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

21. 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