The Essential Guide to HTML5

CANNONBALL AND SL INGSHOT

111

square of the distance for the initial velocity. I experimented with some numbers and, as I mentioned

earlier, 700 seemed to work.

Building the application and making it your own ........................................................................................

Let
s now take a look at the code for the basic firing of a cannonball, without a cannon, based on

horizontal and initial vertical speeds; the firing of a cannonball from a cannon, based on angle and initial

speed out of the cannon; and the slingshot, based on angle and initial speed determined from the position

of the mouse. As in previous chapters, I
ll present the functions and what they call or are called by for

each application. In this case, the tables are similar, though not identical, for all three applications. The

calling is more varied than previous examples in that there are situations in which functions are invoked

because they are named as methods of a programmer-defined object or as part of a declaration (var)

statement. This is a characteristic of object-oriented, event-driven programming. I
ll also present the

complete code for each application in its own table, along with an explanation of what each line does.

Table 4-1 shows the functions for the basic cannonball application.

Table 4-1. Functions in the Simplest 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

moveball Invoked by call of the moveit method for the
one Ball object