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

Code Explanation

</body>

Close body element

</html> Close html element

You certainly can make improvements to this application, but it probably makes more sense to first make
sure you understand it as is and then move on to the next.

Cannonball: with cannon, angle, and speed

Our next application adds a rectangle to represent the cannon, a picture for the original target instead of
the simple rectangle used in the first application, and a second picture for the hit target. The cannon
rotates as specified by input in the form. I made the everything array an array of arrays because I
needed a way to add the rotation and translation information. I also decided to make the result more
dramatic when the cannonball hits the target. This means the code in the change function for checking for
a collision is the same, but the code in the if-true clause removes the old target, puts in the hit target, and
removes the ball. Now, having said all this, most of the coding is the same. Table 4-3, which shows the
functions, has two additional lines for Picture and drawAnImage .

Table 4-3. Functions in the Second Cannonball Application

Function Invoked By / Called By Calls

init

Action of the onLoad in body tag

drawall

drawall Invoked directly by init ,

fire ,
change

Calls the draw method of all objects in
the everything array. These are the
functions drawball, drawrects.

fire Invoked by action of the onSubmit attribute in

form

drawall

change Invoked by action of the setInterval function

called in fire

drawall , calls the moveit method of
cball , which is moveball

Ball

Invoked directly by code in a var statement

Myrectangle Invoked directly by code in a var statement

drawball

Invoked by call of the draw method for the one
Ball object

drawrects Invoked by call of the draw method for the target

object