Cannonball and Slingshot

  • Jeannie Meyer


In this chapter, you learned how to create two ballistics applications. It is important to understand how they are the same and how they are different. The programming techniques and HTML5 features include
  • programmer-defined objects

  • setInterval to set up a timing event for the animation, as done for the bouncing ball

  • building an array using the push method and using the array as a list of what to display

  • modifying arrays using the splice method

  • the use of trig functions with calculations to rotate the cannon and to resolve the horizontal and vertical velocities so as to simulate gravity

  • using a form for player input

  • handling mouse events (mousedown, mousemove, mouseup), with addEventListener to obtain player input

  • move drawing arcs, rectangles, lines and images on a canvas

The technique of programmer-defined objects and the use of an array of objects to display will come up again in later chapters. The next chapter focuses on a familiar game known as either memory or concentration. It will use a different timing event as well as the Date function, introduced in Chapter 1.


Vertical Displacement Mouse Button Picture Object Draw Method Ball Object 
These keywords were added by machine and not by the authors. This process is experimental and the keywords may be updated as the learning algorithm improves.


Unable to display preview. Download preview PDF.

Unable to display preview. Download preview PDF.

Copyright information

© by Jeanine Meyer 2010

Authors and Affiliations

  • Jeannie Meyer

There are no affiliations available

Personalised recommendations