The Essential Guide to HTML5

CANNONBALL AND SL INGSHOT

Code Explanation

this.sheight = sheight; ... sheight

this.draw = drawAnImage; ... draw. This will be the draw method for
objects of this type.

this.moveit = moveball; ... This will be the moveit method. Not used.

} Close Picture function

function drawAnImage() { Header for drawAnImage function

ctx.drawImage(this.img,this.sx,

this.sy,this.swidth,this.sheight);

Draw image using properties of this object

} Closes function

var target = new Picture(targetx,targety,

targetw,targeth,"hill.jpg");

Construct new Picture object and assign to

target variable

var htarget = new Picture(htargetx,

htargety, htargetw, htargeth, "plateau.jpg");

Construct new Picture object and assign to

htarget variable

var ground = new Myrectangle(0,300,

600,30,"rgb(10,250,0)");

Construct new Myrectangle object and assign

to ground

var cannon = new Myrectangle(cannonx,

cannony,cannonlength,cannonht,"rgb(40,40,0)");

Construct new Myrectangle object and assign

to cannon

var targetindex = everything.length; Save what will be the index for target

everything.push([target,false]); Add target to everything

everything.push([ground,false]); Add ground to everything

var ballindex = everything.length; Save what will be the index for cball

everything.push([cball,false]); Add cball to everything

var cannonindex = everything.length; Save what will be the index for cannon

everything.push([cannon,true,0,

cannonx,cannony+cannonht*.5]);

Add cannon to everything; reserve space for

rotation