The Essential Guide to HTML5

CHAPTER 4

The last step is to put in a call first to drawall() and then to setInterval to set up the timing event.

Again, finish does an analogous job to fire in the first and second applications. In the first application,

our player entered the horizontal and initial vertical values. In the second application, the player entered

an angle (in degrees) and a velocity out of the mouth of the cannon, and the program did the rest. In

slingshot, we did away with a form and numbers and provided a way for the player to pull back, or virtually

pull back, on a slingshot. The program had more to do, both in terms of responding to mouse events and

calculations.

Changing the list of items displayed using array splice

The last task to explain is the replacement of the target image with another picture. Since I wanted two

different effects, I used different approaches. For the second application, I wanted the ball to disappear

along with the original target and display what I set up in the variable htarget. What I do is keep track of

where the original target was placed on the everything array and remove it and substitute htarget.

Similarly, I remove the ball from the everything array. For the slingshot operation, I don't remove the

target but change its img property to be feathers. Please note that in the code, chicken and feathers

are Image objects. Each has a src property that points to a file.

var chicken = new Image();

chicken.src = "chicken.jpg";

var feathers = new Image();

feathers.src = "feathers.gif";

For both of these operations, I use the array method splice. It has two forms: you can just remove any

number of elements or you can remove and then insert elements. The general form of splice is

arrayname.splice(index where splice is to occur, number of iterms to be removed, new item(s) to be

added)

If more than one item is to be added, there are more arguments. In my code, I add a single item, which is

itself an array. My representation of objects in the everything array uses an array for each object. The

second argument of the array indicates if there is any rotation.

The following two lines of code do what I need: remove the target, stick in htarget with no rotation, and

then remove the ball.

everything.splice(targetindex,1,[htarget,false]);

everything.splice(ballindex,1);

By the way, if I simply wanted to remove the last item in an array, I could use the method pop. In this

situation, however, the target may be somewhere in the middle of the everything array, so I need to write

code to keep track of its index value.

Distance between points

There are two places in the slingshot program in which I use the distance between points or, more

accurately, the square of the distance. I need to find out if the mouse cursor is on top of the ball and I want

to make the initial velocity—the equivalent of the velocity out of the cannon— depending on the stretch,

so to speak, of the slingshot, the distance (bx,by) to (s1x, s1y). The formula for the distance between two

points x1,y1 and x2,y2 is the square root of the sum of the squares of (x1-x2) and (y1-y2). I decided to

avoid the computation of taking a square root by just computing the sum of the squares. This provides the

same test for the mouse cursor being on top of the ball. For the other task, I decided it was okay to use the