The Essential Guide to HTML5

BOUNCING BALL

Code Explanation

<form name="f" id="f" onSubmit=

"return change();">

Start of form. Give name and id (may need for some

browsers). Set up action on submit button.

Horizontal velocity <input name="hv"

id="hv" value="4" type="number"

min="-10" max="10" />

Label an input field for horizontal velocity

Line break

Vertical velocity <input name=

"vv" id="vv" value="8" type="number"

min="-10" max="10"/>

Label an input field for vertical velocity

Submit button
Close form
Close body
Close html

The application that uses an image as the ball and the gradient-filled walls is very similar. Table 3-3 shows

all the code—but I just comment the code that is different. I
m not being lazy; the idea is to let you see how

each application is built on the previous one.

Table 3-3. The Second Application, with an Image as the Ball and Gradient-Filled Walls

Code Explanation