HTML and CSS Reference
In-Depth Information
Later examples show how to draw a slingshot (Chapter 4), polygons for the memory/concentration game
(Chapter 5), walls for a maze (Chapter 7), and the stick figure in Hangman (Chapter 9). Now lets get back
to what we need for the dice game.
Displaying text output using a form
It is possible to write text on the canvas (see Chapter 5), but for the craps application, I chose to use a
form
, an element in both the older and current versions of HTML. I don't use the form for input from the
player. I do use it for outputting information on the results of the throw of the dice. The HTML5
specification indicates new ways to set up forms, including checking or
validating
the type and range of
input. The application in the next chapter demonstrates validation.
I used the following HTML to produce the form for the dice game:
<form name="f">
Stage: <input name="stage" value="First Throw"/>
Point: <input name="pv" value=" "/>
Outcome: <input name="outcome" value=" "/>
</form>
The form starts with a
name
attribute. The text
Stage:
,
Point:
, and
Outcome:
appear next to the input
fields. The input tags—notice these are singleton tags—have both name and value fields. These names
will be used by the JavaScript code. You can put any HTML within a form and a form within any HTML.
Because the dice game uses the new
button
element, I just added the
form
element with the fields used
for displaying information to the player, without including an input element of type
submit
. Alternatively, I
could have used a standard form with a
submit
input field (eliminating the need for the new button
element) with the following code:
<form name="f" onSubmit="throwdice();">
Stage: <input type="text" name="stage" value="First Throw"/>
Point: <input type="text" name="pv" value=" "/>
Outcome: <input type="text" name="outcome" value=" "/>
<input type="submit" value="THROW DICE"/>
</form>
The input element of type
submit
produces a button on the screen. These are all the concepts we need to
build the craps application. We can now go ahead and code it.
Building the application and making it your own
You may have already tried using the HTML5, CSS, and JavaScript constructs described in this chapter in
small examples. Hint: please do. The only way to learn is to make your own examples. As a way to build up
to the craps application, we will now look at three applications:
•
throwing a single die and reloading to throw again
•
throwing two dice by using a button
•
the complete game of craps
