1 / 19

Programming Games

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

ganesa
Download Presentation

Programming Games

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


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

  2. Google Maps API • Build on existing functionality…

  3. Demonstrate Examples • http://faculty.purchase.edu/jeanine.meyer/html5projects.html • Family Collage:http://faculty.purchase.edu/jeanine.meyer/html5/buildfamily.html

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

  5. Lesson • Sometimes doing something general is easier than doing something specific…

  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

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

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

  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"); …

  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; } } }

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

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

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

  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; }

  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.

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

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

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

More Related