HTML and CSS Reference
In-Depth Information
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
