HTML and CSS Reference
In-Depth Information
If you want to use more than two balls, you may want to consider using arrays. Subsequent chapters will
show you how to handle sets of objects.
You also can try writing code that slows the ball each time it hits a wall. This is a nice effect and does
simulate a real physical result. In each of the places in the code where the direction is changed by
changing the sign of the appropriate variable, add in a factor to decrease the absolute value. For example,
if I chose to decrease the value by 10%, I would write
if (nballx > boxboundx) {
ballvx =-ballvx *.9;
nballx = boxboundx;
}
This means that the incremental change in the vertical direction would go down to 90% of what it was.
Testing and uploading the application
The first and third applications are complete in the HTML documents. The second application requires the
image file to be present in the same folder. You can access files anywhere on the Web, but you need to
make sure you include the correct address. For example, if you upload the HTML document to a folder
called
mygames
and upload
pearl.jpg
to a subfolder of
mygames
named
images
, the line indicating this
must be
img.src = "images/pearl.jpg";
You must also use accurate file extensions, such as JPG, that indicate the correct file type. Some
browsers are forgiving but many are not. You can try to submit bad data and see the response using
different browsers.
Summary
In this chapter, you learned how to create an application with animation that changes based on input from
the user. We covered a number of programming and HTML5 features, including
•
setInterval
to set up a timing event for the animation
•
validation of form input
•
programmer-defined functions to reposition a circle or an image horizontally and vertically to
simulate a bouncing ball
•
tests to check for virtual collisions
•
drawing rectangles, images and circles, including gradients for the coloring
The next chapter describes the cannonball and slingshot games in which the player attempts to hit
targets. These applications use the same programming and HTML5 features we used to produce the
animation, but take them a step further. You will also see an example of animation in the rock-paper-
scissors implementation in Chapter 8.
