HTML and CSS Reference
In-Depth Information
Testing and uploading the application
These applications can be created without external image files, but using images for the target and the hit
target is fun, so you remember to include those files when you upload your project. You can choose your
own targets. Perhaps you feel kindly towards chickens!
Youll need to test that the program performs correctly in three situations: when the ball plops down to the
left of the target, when the ball hits the target, and when the ball sails over the target. Note that I
massaged the values so that the chicken needs to be hit in the middle, so it is possible for the ball to touch
the head or tail and not cause the feathers to appear.
You can vary the position of the cannon and its target and hit target, and the slingshot and the chicken
and the feathers, by changing the variables such as
startrockx,
and you can modify the gravity
variable. If you put the slingshot closer to the target, you can have more ways to hit the chicken: pulling
more to the left for a direct shot versus pulling down for more of a lob. Enjoy!
As I mentioned, you could use an animated gif for the hit target in either the cannonball or slingshot
applications. This would produce a nice effect.
Summary
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.
