The Essential Guide to HTML5

DICE GAME

<br/>

<button onClick="throwdice();">Throw dice </button>

<form name="f"> Start a form named f

Stage: <input name="stage" value="First Throw"/> With the text Stage: right before

it, set up an input field named

stage

Point: <input name="pv" value=" "/> With the text Point: right before it,

set up an input field named pv

Outcome: <input name="outcome" value=" "/> With the text Outcome: right

before it, set up an input field

named outcome

</form> Close the form

</body> Close body

</html> Close html

Making the application your own

Making this application your own is not as straightforward as with the favorite sites application, because

the rules of craps are the rules of craps. However, there are many things you can do. Change the size and

color of the dice faces, using fillRect and setting fillStyle to different colors. Change the color and

size of the whole canvas. Change the text for the outcomes to something more colorful. You also can

implement other games using standard or specially made dice.

You can look ahead to the next chapter and learn about drawing images on the canvas instead of drawing

each die face using arcs and rectangles. HTML5 provides a way to bring in external image files. The

drawback to this approach is that you do have to keep track of these separate files.

You can develop coding for keeping score. For a gambling game, you can start the player with a fixed

amount of money, say 100 of whatever the currency unit is, and deduct some amount, say 10, for playing

a game, and add some amount, say 20, if and only if the player wins. You can add this bankroll information

as part of the form element in the body:

<form name="f" id="f">

Stage: <input name="stage" value="First Throw"/>

Point: <input name="pv" value=" "/>

Outcome: <input name="outcome" value=" "/>

Bank roll: <input name="bank" value="100"/>

</form>