Programming Games

Reprise on drawing on canvas. Jargon (concepts): objects.

Demonstrate slingshot. Mouse events. Work on your cannonball.

Homework: Finish your cannonball. 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()

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 timectx.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– 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"]

• Give code AND give online source (URL and type of source)

Classwork / homework• Catch up

– Uploading work, updating index.html.

• Finish your cannonball. (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.

• Teasers: – http://faculty.purchase.edu/jeanine.meyer/html5/playblrrotated.html

– http://faculty.purchase.edu/jeanine.meyer/html5/movingpictures.html

– http://faculty.purchase.edu/jeanine.meyer/html5/jigsaw/jigsawdance.html

– http://faculty.purchase.edu/jeanine.meyer/html5/collagebase.html

– More: http://faculty.purchase.edu/jeanine.meyer/morehtml5examples.html