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

2. 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()

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

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

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

6. Example
More coming….

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

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

9. 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’);

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

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

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

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

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

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

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

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

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

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

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

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

22. 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:
More: