Programming Games Reprise on drawing on canvas. Jargon (concepts): objects. Demonstrate slingshot. Mouse events. Work on animation project. Homework: Finish your animation project. Acquire video clip.

Programming jargon: objects Objects are members of classes. Objects come with Properties (aka attributes). These are values Methods. These are functions. Examples: slides.length (read-only property), ctx.fillStyle document.write(…); canvas1.addEventListener(…) There also are class properties & methods: Math.PI Math.random()

JavaScript Constructor function MyThing (x, y, w, h, pic) { this.xp = x; this.yp = y; this.wp = w; this.wh = h; this.imagefile = pic; this.display = showpicture; this.move = moveThing; }

function showpicture() { ctx.drawImage(this.imagefile, this.xp, this.yp, this.wp, this.hp); } function moveThing (dx, dy) { this.xp = this.xp + dx; this.yp = this.yp + dy;

Usage firstThing = new myThing(10,20,100,100,”Annika.jpg”); firstThing.display(); firstThing.move(5,10);

Example http://faculty.purchase.edu/jeanine.meyer/html5/buildfamily.html http://faculty.purchase.edu/jeanine.meyer/html5/collagebase.html More coming….

Class properties & functions Are NOT associated with any specific object.

What is ‘this’? In JavaScript, and in some other programming languages, the programmer can create an object. You see this in my cannonball, collage, other examples. The properties and methods are accessed using the dot notation and the use of the term this. The properties and methods are set using a declaration with the term new and then a function with use of the term this.

Drawing on [a] canvas Screen (canvas) coordinates Absolute numbers Variables Expressions Remember: canvas methods are done to a canvas context: ctx = document.getElementById(‘mycanvas’).document.getContext(‘2d’);

Drawing, cont. To draw at a position known ahead of time ctx.fillRect(100,150,50,60); To draw at a position defined by variables, with dimensions defined by variables, with a color defined by variables: ctx.fillStyle = mycolor; ctx.fillRect(x,y,w,h); fillStyle is a property of context objects and fillRect is a method of context objects.

Events Events and event handling are featured in many programming languages but the exact methods differ. HTML and JavaScript provide event handling in multiple ways: setInterval and setTimeout for timing events Setting attributes in HTML tags for various events including: onload, onsubmit, onclick, onMouseover, onmouseout, etc. Using addEventListener for various things canvas1.addEventListener(‘click’,toss,false);

Reflecting on bouncing ball Bouncing something Use setInterval to set up event/event handling for timing event. This sets up calls to a function that will calculate a new position using two variables (aka displacement values, horizontal and vertical velocities) and draw the item. Also calculates (by another function) if item hits a wall and changes the variables so the NEXT iteration moves away from the wall.

Reflecting on cannonball [First, go through sequence of examples.] Cannonball uses form input to set displacement variables AND orient cannon. The fire function uses setInterval to set up event/event handling: call to function that will do the re-positioning of the ball AND checking for collisions of ball with target and with ground.

Your cannonball Do progression of examples. You can change cannon or ball or target or ground You can add a second target. ???? Remember: you also can wait to do something more elaborate for your final project. Including adding video and/or audio

Look at cannonball source The possible things to be drawn include balls, pictures and rectangles. Each object class has its own draw method set. Each object class has its own set of properties. Look at the drawall function. Look at the Ball, Picture, Myrectangle functions. These are called constructor functions.

Slingshot Built on cannonball, but using different events! Mouse down on the ball Actually, mouse down on the canvas is detected and code determines whether or not it is on the ball (rock). Mouse move: movement of mouse is detected and this causes the sling shot coordinates to change Mouse up: release of mouse button is detected and code calculated trajectory and fires off the ball (rock)

slingshot Based on cannonball but… different graphics Player (user) affordance (fancy way of saying move or action) is based on [simulation of] pulling back on slingshot. Needs improvement! http://faculty.purchase.edu/jeanine.meyer/html5/slingshot1.html

Mouse events on canvas mousedown mousemove mouseup need to determine if mouse on the ball (rock) mousemove move rock and re-draw sling mouseup calculate angle and velocity based on (my formulas) simulation of slingshot physics needs improvement. These are all set up using the addEventListener method.

Note I have never seen Angry Chickens. This is based on cannonball, which, in turn, is based on bouncing ball, which …

Preview… There are more array operations, also called methods. If a is an array a.indexOf(b) a.join(“+”); a.push(item); a.slice(….); a.splice(…); More To learn: search on JavaScript array operations or JavaScript array methods. WRITE THESE DOWN IN YOUR NOTES.

Pop quiz Using JavaScript, how do you replace the first instance of a specific item in an array with 2 other items? For example, if “potatoes” in an element in the array items, remove it and replace it with “rice”, “beans”. So ["milk","OJ", "potatoes", "onion", "napkins"] becomes ["milk","OJ", "rice", "beans", "onion","napkins"] Hint: look at previous chart. Give code AND give online source (URL and type of source) Hint: indexOf and splice

Classwork / homework Teaser: Catch up Uploading work, updating index.html. Finish your animation project. (Skip if you are finishing bb today). We start video & audio next week. Acquire a short video, MOV or avi format, to use in class. Teaser: http://faculty.purchase.edu/jeanine.meyer/html5/monkeybars.html More: http://faculty.purchase.edu/jeanine.meyer/morehtml5examples.html