The Essential Guide to HTML5

CHAPTER 4

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