Programming Games
Refresher on coordinates. Scaling,
translation. HTML5 logo. Refresher on
animation. Bouncing ball. Show project.
Classwork/Homework: [Finish midterm
project. Upload.] Do your own bouncing
something.
Midterm project
Due today! Will accept next class and then
we move on!
There will be another chance to do a project
totally of your own design.
Coordinates
Recall for canvas or for screen
• horizontal values: from the left
• vertical values: from the top
• pixel unit: very small!
Canvas path
• Set variable (any name your want, I chose ctx)
to be
ctx =
document.getElementById("canvas").getContext
('2d');
• Paths used to be drawn in outline (stroke) or
filled in (fill)
• ctx.moveTo(x,y) moves to position
• ctx.lineTo(x,y)
sets up line drawn
• ctx.arc(center_x, center_y, radius,
starting_angle, ending_angle, true or false);
Angles given in radians, NOT degrees. 90 degrees
is Math.PI/2. A circle is 2*Math.PI.
Note
• Drawing a complete circle is easy:
• ctx.arc(centerx,centery,radius,0,2*Math.PI,
true); OR
• ctx.arc(centerx,centery,radius,0,2*Math.PI,
false); OR
• ???
Paths
ctx.beginPath();
sequence of moveTo, lineTo, arc statements
ctx.closePath();
NOTHING happens until:
ctx.fill(); and/or ctx.stroke();
HTML5 logo
Example of
• drawing on canvas
• input type="range"
– May appear as text in older browsers
• Called graceful degradation
• changing coordinate system using
translate and scale
• semantic tags
• http://faculty.purchase.edu/jeanine.meyer/
html5/html5logoscale.html
range input
• AKA slider
Scale percentage: <input id="slide"
type="range" min="0" max="100"
value="100"
onChange="changescale(this.value)"
step="10"/>
• Does form validation.
• Note the event handler
event handler
function changescale(val) {
factorvalue = val / 100;
dologo();
}
• So…. You can guess that dologo uses
the variable factorvalue in its code and
you would be correct!
Note
• This is yet another way to specify an event
(changing the slider) and the event
handler.
• Flash ActionScript is more consistent:
– All events specified using addEventListener
Shield
Transformations
• …. change origin of coordinate system or scale
of coordinate system or both.
– ctx.translate(x,y);
– ctx.scale(xfactor, yfactor);
• ctx.save(); saves current system so that your
code can ctx.restore();
• This is done using a stack
– last in, first out
– restore pops the stack
Use of transformations for logo
• use <input type="range" name="slide"
….> to change scale based on input
• use translate to write out HTML and then
'move down' and draw the logo.
Recall on animation
• Produce a succession of pictures.
• Produced in my virtual dog, a succession of
times to make decisions on the state of the dog.
• Use setInterval(what to do, length of interval in
milliseconds)
• NEW (future?) alternative:
window.requestAnimationFrame
– look up and try. Standard seems to be unsettled.
– fixed timed period of 60pfs
• Bouncing ball (or anything similar): re-draw
canvas at the intervals
– erase using clearRect( )
– draw
Bouncing ball
• Circle:
http://faculty.purchase.edu/jeanine.meyer/
html5/bouncingballinputs.html
• Image:
http://faculty.purchase.edu/jeanine.meyer/
html5/bouncingballinputsimg.html
Tea party
• [Not political reference, but reference to
http://stolenchair.org/
• http://faculty.purchase.edu/jeanine.meyer/
html5/teapartytest.html
• Animation (appearance of life/motion)
done by continually erasing and redrawing images on a canvas.
• Some images are positioned off of the
canvas: not an error (in this case)
Performance issues
• duty cycle
– Think of night watchman. Are there too many
tasks to do before doing next round?
• battery life
• One approach
– use second (alternate/buffer/prerender)
canvas
– Look up and post on moodle.
How do I/you program bouncing
something?
• You actually know how to do this!
• What are the tasks (subtasks) that your
code needs to do?
[sub]Tasks
• Set up to do the drawing at intervals of
time. How?
• Draw at a specific place on the canvas.
• Do a calculation (check a condition) to
determine if the ball needs to bounce,
namely if it is outside the box.
Speed of ball
• Horizontal and vertical speed set using a
form.
• Note: some validation is done by browser.
– try putting in letters
• The movement of the ball is done using
the variables ballvx and ballvy set
(changed) if and when the form is
submitted.
Study source code
• (can also look at chapter 3 in The
Essential Guide to HTML5 book)
• In this example, I don’t want ball to go
outside of box drawn on canvas.
• functions are
– init: initialization, invocation set by onLoad in
body
– moveball: invoked by init and by action of
setInterval
– moveandcheck: invoked by moveball
– change: invocation set by onSubmit in the
form
Did I need?
• to extract the moveandcheck code from
the moveball code?
– No. However, several small functions
generally works better than fewer larger
functions.
Drawn circle versus image
• Code is nearly the same.
• Drawing the image uses:
var img = new Image();
img.src = "pearl.jpg";
//use your image
….
In moveball function:
ctx.drawImage(img,ballx-ballrad,ballyballrad,2*ballrad,2*ballrad)
• NOTE: image needs to be positioned at its upper
left corner, not the center of the ball.
Repeat: Events and Event
Handling
• You (your code) sets up an event for which you
specify an event handler.
• HTML & JavaScript does this in multiple ways!
– HTML tags contain onLoad, onClick, onSubmit,
onChange, …
– JavaScript has setInterval and setTimeout
– JavaScript has object.addEventListener
• Note: other languages, for example Flash
ActionScript, has most consistent approach
balltimer.addEventListener(TIMER,…)
Advice
• Mentally step back and think about
concepts…
– including realizing when things are
inconsistent
• This will enable you to build your own
projects as opposed to just remembering
specific coding.
Classwork/homework
• Stop everything else and work on midterm
project. It can be a more elaborate virtual
something or some elaboration on past
work.
– Post proposal!!!
• Finish your project. Last date is next class.
• Today's assignment is bouncing
something. It can be a decorated drawn
object and/or an image. Make other
changes as you wish.