Programming Games

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 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"] • Hint: look at previous chart. • Give code AND give online source (URL and type of source)

Classwork / homework • 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

Programming Games