The Essential Guide to HTML5

CHAPTER 4

The support for audio and video in HTML5 varies across the browsers. You can look ahead to the

presentation of video as a reward for completing the quiz in Chapter 6, and to the audio presented as part

of the rock-paper-scissors game in Chapter 8. If you want to tackle this subject, it would be great to have

a sound when the cannonball hits the target and a video clip showing the target exploding.

Moving away from the look of the game, you can invent a scoring system, perhaps keeping track of

attempts versus hits.

Slingshot: using a mouse to set parameters of flight

The slingshot application is built on the cannonball application. There are differences, but much is the

same. Reviewing and understanding how more complicated applications are built on simpler ones will help

you to create your own work.

Creating the slingshot application involves designing the slingshot, and implementing the mouse events to

move the ball and parts of the slingshot, and then fire the ball. The form is absent because the player's

moves are just the mouse actions. In addition, I used a somewhat different approach for what to do when

the target was hit. I check for the ball to intersect with an area within the target by 40 pixels. That is, I

require the ball to hit the middle of the chicken! When there
s a hit, I change the target.src value to be

another Image element, going from a picture of a chicken to a picture of feathers. Moreover, I don't stop

the animation, so the ball only stops when it hits the ground. As I indicated earlier, I don't have the

slingshot slings return to their original position, as I wanted to see the position to plan my next attempt.

Table 4-5 shows the functions calling and being called in the slingshot application. This table is quite

similar to the one for the cannonball applications.

Table 4-5. Functions in the Slingshot 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.

findball Invoked by action of addEventListener in

init for the mousedown event

drawall

distsq Called by findball

moveit Invoked by action of addEventListener in

init for the mousemove event

drawall

finish Invoked by action of the addEventListener in

init for the mouseup event

drawall