The Essential Guide to HTML5: Using Games to Learn HTML5 and JavaScript

Chapter 4. Cannonball and Slingshot

• 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 you'll see produces the animation ...