Cannonball and Slingshot - The Essential Guide to HTML5 - page 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
arrays.
Arrays and programmer-defined objects
HTML5 lets you draw on a canvas, but once something is drawn, its as if paint or ink were laid down; the
thing drawn doesnt retain its individual identity. HTML5 is not like Flash in which objects are positioned on
a Stage and can be individually moved and rotated. However, we can still produce the same effects,
including rotation of individual objects.
Because these applications have a somewhat more complicated display, I decided to develop a more
systematic approach to drawing and redrawing different things on the canvas. To that end, I created an
array called everything that holds the list of objects to be drawn on the canvas. Think of an array as a
set, or more accurately, a sequence of items. In previous chapters, we discussed variables set up to hold
values such as numbers or character strings. An array is another type of value. My everything array will
serve as a to-do list of what needs to be drawn on the canvas.