Cannonball and Slingshot - The Essential Guide to HTML5 - page 116

Code Explanation

function drawall() {

Function header for drawall

ctx.clearRect
(0,0,cwidth,cheight);

Erase canvas

var i; Declare var i for the for loop

for (i=0;i<everything.length;i++)
{

For each item in everything array…

everything[i].draw();} …invoke the object's draw method. Close for loop.

} Close function

function change() {

Header for change function

var dx = horvelocity; Set dx to be horvelocity

verticalvel2 =
verticalvel1 + gravity;

Compute new vertical velocity (add gravity)

var dy = (verticalvel1 +
verticalvel2)*.5;

Compute average velocity for the time interval

verticalvel1 = verticalvel2;

Now set old to be new

cball.moveit(dx,dy); Move cball computed amount

var bx = cball.sx;

Set bx to simplify the if

var by = cball.sy; ... and by

if ((bx>=target.sx)&&(bx<=
(target.sx+target.swidth))&&

Is the ball within the target horizontally…

(by>=target.sy)&&(by<=
(target.sy+target.sheight))) {

and vertically?

clearInterval(tid);

If so, stop motion

} Close if true clause

if (by>=ground.sy) {

Is the ball beyond ground?