Bouncing Ball - The Essential Guide to HTML5 - page 70

This set of applications demonstrates substantial programming but its not really a game, though people
enjoy seeing heads or other images bouncing in a box. Think about how to make it a game. You can also
use ideas learned here to draw something besides a ball bouncing around in a box. The box can have
different dimensions and the walls can be much fancier. The next chapter builds on this one and describes
how to build simulations of a cannonball and a slingshot.
Critical requirements
It is important for this application and, indeed, for all programming, to define the requirements before you
begin writing any code. The application requires things I demonstrated in previous chapters: drawing
shapes on a canvas element and using a form. For this example, we will actually use the form fields for
input. In the dice game described in Chapter 2, they were used strictly for output.
In Chapter 1, the HTML document made use of external image files. In Chapter 2, we drew the faces of the
dice entirely with coding. In this chapter, Ill demonstrate both: a bouncing circle drawn with code and a
bouncing image from an image file.
To accomplish this, we need some code that will be able to do something—right now, it doesnt matter
what—at fixed intervals of time. The intervals need to be short enough that the result looks like motion.
In this case, the something-to-be-done is to reposition the ball. In addition, the code needs to determine if
the ball would hit any wall. Now, there isn't a ball and there aren't any walls. It is all virtual, so it is all
coding. Well write code to perform a calculation on the virtual position of the ball versus the virtual
position of each of the walls. If there is a virtual hit, the code adjusts the horizontal or vertical
displacement values so the ball bounces off the wall.
To calculate the repositioning, we use either the initial values or any new values typed into the input fields
of the form. However, the goal is to produce a robust system that will not act on bad input from the player.
Bad input would be an entry that wasn't a number or a number outside of the specified range. We could just
not act on the bad input. However, we want to give feedback to the player that the input was bad, so well
make the input boxes change color, as Figure 3-3 shows.
HTML5, CSS, JavaScript features
Lets take a look at the specific features of HTML5, CSS, and JavaScript we need to implement the
bouncing ball applications. Well build on material covered in previous chapters, specifically the general
structure of an HTML document, using a canvas element, programmer-defined and built-in functions, and
a form element.
Drawing a ball, image, and gradient
As described in Chapter 2, drawing anything on the canvas, such as a circle to represent the ball, requires
including the canvas element in the body section of the HTML document. Next we need to define a variable,
ctx , and add code that sets up the value of this variable so we can use JavaScript. Heres the statement
to implement this:
ctx = document.getElementById('canvas').getContext('2d');
As we saw in Chapter 2, a circle is created by drawing an arc as part of a path. The following lines of code
start the path, set the color for the fill, specify the arc, and then use the fill method to draw a closed,