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

Code Explanation

var verticalvel1;

Variable to hold vertical displacement at start of interval

var verticalvel2; Variable to hold vertical displacement at end of interval,

after change by gravity

var gravity = 2; Amount of change in vertical displacement. Arbitrary.

Makes for a nice arc.

var iballx = 20;

Initial horizontal coordinate for the ball

var ibally = 300;

Initial vertical coordinate for the ball

function Ball(sx,sy,rad,stylestring) { Start of function to define a Ball . object. Use the
parameters to set the properties.

this.sx = sx;

Set the sx property of THIS object

this.sy = sy; … sy

this.rad = rad; … rad

… draw . Since drawball is the name of a function, this
makes draw a method that can be invoked

this.draw = drawball;

this.moveit = moveball;

… moveit set to the function moveball

this.fillstyle = stylestring; … fillstyle

}

Close the Ball function

function drawball() {

Header for the drawball function

ctx.fillStyle=this.fillstyle; Set up the fillStyle using the property of this object

ctx.beginPath();

Start a path

ctx.arc(this.sx,this.sy
,this.rad,0,Math.PI*2,true);

Set up to draw a circle

ctx.fill(); Draw the path as a filled path