97
98
• A slingshot. The parameters of flight are determined by the player dragging, then releasing a ball shape tethered to a stick drawing representing a slingshot. The speed is determined by the distance from the ball to a place on the slingshot. The angle is the angle from the horizontal of this part of the slingshot.
Figure 4-1 shows the simple (no cannon) application.
Figure 4-1. The ball lands on the ground.
Figure 4-2 shows the opening screen for the second application. The target is an Image and the rectangle representing the cannon can be rotated. Notice the controls refer to an angle and an initial velocity
99 Figure 4-2. Rotating cannon with image as target
Figure 4-3 shows the scene after a successful hit. Notice that the cannon is rotated and the original image for the target has been replaced with a new image.
Figure 4-3. After firing the cannon and hitting target
The opening screen of the slingshot application is shown in Figure 4-4. This application is similar to the cannon, but the parameters of flight are set by the player using a mouse to drag on the ball and the target is now a chicken.
100
Figure 4-4. Opening screen of the slingshot application
For the slingshot, I decided I wanted the ball to keep going until it hit the ground. However, if the chicken was hit, I wanted it to be replaced by feathers, as shown in Figure 4-5. Notice that the strings of the slingshot remain where they were when the mouse button was released and the ball took flight. I found I needed more time looking at the strings in order to plan my next shot. If you want, you can change the game so that the strings snap back to their original position or create a new-game button. In my example, the game is replayed by reloading the HTML file.
Figure 4-5. The ball lands on ground after hitting the chicken. Only feathers remain.
The programming for these applications uses many of the same techniques demonstrated in the bouncing ball applications. The repositioning of the ball in flight is only as different as it needs to be to simulate the effects of the vertical displacement changing because of gravity. The slingshot application provides a new way for the player to interact with the application, using drag and drop actions with the mouse.
The cannonball with cannon and the slingshot use drawing features for the cannon and slingshot and external image files for the original targets and hit targets. If you want to change the targets, youll need to find image files and upload them with the application. The complete applications are available at www.friendsofed.com/downloads.html.
Critical requirements
Our first requirement is to produce animation by setting up an event to occur at fixed intervals of time, and then setting up a function to handle the event by repositioning the ball and checking for collisions. We covered this in the previous chapter on the bouncing ball application. Whats new here is the calculation for simulating gravity. The calculation indicated by a simple physics model works out a new vertical displacement based on changing the vertical displacement by a constant amount and then computing the average of the old and new displacements to compute the new position.
• The horizontal displacement (held by variable dx) is the horizontal velocity (horvelocity) and does not change. In code: dx = horvelocity;
101
• The vertical velocity at the start of the interval is verticalvel1
• The vertical velocity at end of the interval is verticalvel1 plus the acceleration amount (gravity). In code: verticalvel2 = verticalvel1 + gravity;
• The vertical displacement for the interval (dy) is the average of verticalvel1 and verticalvel2. In code: dy = (verticalvel1 + verticalvel2)*.5;
This is a standard way of simulating gravity or any other constant acceleration.
Note: I made up my value for gravity to produce a pleasing arc. You can use a standard value, but youll need to do research to assign realistic values for the starting velocity out of the mouth of the cannon and for a slingshot. You also need to determine the mapping between pixels and distances.
The factor would be different for the cannonball and the slingshot.
The second version of the program must rotate the cannon based on either the initial values or the player's input for the velocity out of the mouth of the cannon and the cannon angle and calculate the horizontal and vertical values based on these values.
The third version of the program, the slingshot, must allow the player to press and hold the mouse button and drag the ball along with the strings of the slingshot, then let the mouse button up to release the ball.
The motion parameters are calculated based on the angle and the distance of the ball from the top of the slingshot.
Both the second and third versions of the program require a way to replace the target image with another image.
HTML5, CSS, and JavaScript features
Now lets look at the specific features of HTML5 and JavaScript that provide what we need to implement the ballistics simulation applications. Luckily, we can build on material covered in previous chapters, specifically the general structure of an HTML document, using a canvas element, programmer-defined and built-in functions, a form element, and variables. Lets start with programmer-defined objects and using