CANNONBALL AND SL INGSHOT
When other browsers, such as Internet Explorer, support HTML5, this code will need to be checked and,
possibly, modified.
if ( ev.layerX || ev.layerX==0) {
mx= ev.layerX;
my = ev.layerY;
}
else if (ev.offsetX || ev.offsetX==0 ) {
mx = ev.offsetX;
my = ev.offsetY;
}
This works because if ev.layerX does not exist, its value will be interpreted as false. If ev.layerX does
exist but has value 0, its value will also be interpreted as false, but ev.layerX==0 will be true.
Think of this code as saying: is there a good ev.layerX value? If so, let's use it. Otherwise, let's try
ev.offsetX. If neither of these work, mx and my will not get set and I should add another else clause to
tell the player that the code doesn't work in his browser.
Now, the next step is to determine if the (mx,my) point is on the ball. I am repeating myself, but it is
important to understand that the ball is now the equivalent of ink or paint on canvas and we cant go any
further without determining whether the (mx,my) point is on top of the ball. How do we do this? We can
calculate how far (mx,my) is from the center of the ball and see if thats less than the radius of the ball.
There is a standard formula for distance in the plane. My code is a slight variation on this idea. It makes
the determination by calculating the square of the distance and comparing it to the square of the ball's
radius. I do this to avoid computing the square root.
If the mouse click was on the ball, that is, within a radius distance of the center of the ball, this function
sets the global variable inmotion to true. The findball function ends with a call to drawall().
Whenever the mouse moves, theres a call to the moveit function where we check whether inmotion is
true. If it isn't, nothing happens. If it is, the same code as before is used to get the mouse coordinates and
the ball's center, and the bx,by values for the slingshot are set to the mouse coordinates. This has the
effect of dragging the ball and stretching the slingshot strings.
When the mouse button is released, we call the finish function, which doesn't do anything if inmotion is
not true. When would this happen? If the player is moving the mouse around not on the ball and pressing
and releasing the button.
If inmotion is true, the function immediately sets it to false and does the calculations to determine the
flight of the ball, generating the information that in the earlier cannonball application was entered by the
player using a form. The information is the angle with the horizontal and the distance of the ball to the
straight part of the slingshot. This is the angle formed by (bx,by) to (s1x, s1y), and the horizontal and
the distance from (bx,by) to (s1x, s1y), more precisely, the square of the distance.
I use Math.atan2 to do these calculations: calculating an angle from change in x and change in y. This is
a variant of the arctangent function.
I use the distsq function to determine the square of the distance from (bx,by) to (s1x, s1y). I want to
make the velocity dependent on this value. Pulling the strings back farther would mean a faster flight. I did
some experiments and decided that using the square and dividing by 700 produced a nice arc.