The Essential Guide to HTML5

(Greg DeLong) #1

Chapter 4


Cannonball and Slingshot


In this chapter, you will learn techniques for



  • maintaining a list of objects to draw on the screen

  • rotating objects drawn on the screen

  • mouse drag and drop operations

  • calculations to simulate ballistic motion (effects of gravity) and collisions


Introduction .................................................................................................................................................


This chapter demonstrates another example of animation, in this case simulation of ballistics, also called
projectile motion. A ball or ball-like object maintains a constant horizontal (x) displacement, with the
vertical displacement changing as it would due to gravity. The resulting motion is an arc. The ball stops
when it (virtually) hits the ground or the target. The code youll see produces the animation using the same
technique demonstrated for the ball bouncing in a box. The code repositions the ball and redraws the
scene at fixed intervals. We will look at three examples.



  • A very simple ballistics simulation: a ball taking off and traveling in an arc before hitting a
    target or the ground. The parameters of flight are horizontal and initial vertical speeds, which
    are set by the player using form input fields. The ball simply stops when it hits the target or the
    ground.

  • An improved cannonball, with a rectangle representing the cannon tilted at an angle. The
    parameters of flight are the speed out of the cannon and the angle of the cannon. Again, these
    are set by the player using form input fields. The program calculates the initial horizontal and
    vertical displacement values.

Free download pdf