The Essential Guide to HTML5

CHAPTER 3

This set of applications demonstrates substantial programming but it
s 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, I
ll 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 doesn
t 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. We
ll 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 we
ll

make the input boxes change color, as Figure 3-3 shows.

HTML5, CSS, and JavaScript features ......................................................................................................

Let
s take a look at the specific features of HTML5, CSS, and JavaScript we need to implement the

bouncing ball applications. We
ll 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. Here
s 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,