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.getConte
xt(‘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
– 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.ht
ml