HTML and CSS Reference
In-Depth Information
Chapter 2
Dice Game
In this chapter, we will cover
•
drawing on canvas
•
random processing
•
game logic
•
form output
Introduction
Among the most important new features in HTML5 is the
canvas
. This element provides a way for
developers to make line drawings, include images, and position text in a totally free-form fashion, a
significant improvement over the older HTML. Although you could do some fancy formatting in the earlier
versions, layouts tended to be boxy and pages less dynamic. How do you draw on the canvas? You use a
scripting language, usually JavaScript. I will show you how to draw on canvas and Ill explain the important
features of JavaScript that well need to build an implementation of the dice game called craps: how to
define a function, how to invoke what is termed
pseudo-random behavior
, how to implement the logic of
this particular game, and how to display information to a player. Before we go any further, though, you
need to understand the basics of the game.
The game of craps has the following rules:
The player throws a pair of dice. The sum of the two top faces is what matters so a 1 and a 3 is the
same as 2 and 2. The sum of two 6-sided dice can be any number from 2 to 12. If the player throws
a 7 or 11 on the first throw, the player wins. If the player throws a 2, 3, or 12, the player loses. For
any other result (4, 5, 6, 8, 9, 10), this result is recorded as what is called the player's point and a
follow-up throw is required. On follow-up throws, a throw of 7 loses and a throw of the player's point
wins. For anything else, the game continues with the follow-up throw rules.
Lets see what our game play might look like. Figure 2-1 shows the result of a throw of two ones at the start
of the game.
