The Essential Guide to HTML5

CANNONBALL AND SL INGSHOT

• 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

you
ll 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, JavaScript features .............................................................................................................

Now let
s 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. Let
s 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, it
s as if paint or ink were laid down; the

thing drawn doesn
t 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.