Dice Game - The Essential Guide to HTML5 - page 47

If you like, you can put comments in your code. Comments are pieces of text that are ignored by the
browser but are there to remind you and, perhaps, others who will look at this program later, what is going
on. One form of comment starts with two slashes on a line. Everything to the right of the slashes is
ignored. For larger comments, you use a slash and an asterisk to start the comment and an asterisk and a
slash to end it.

/*
This is a comment.
*/

This is a case of do as I say, not as I do. Since Im using tables to put comments on every line and you can
consider the whole chapter a comment, I haven't included comments in the code. You should, however.
HINT: when I was developing this code (and any code involving a random effect, I did not want to have to
do the initial testing with the random coding. So, right after the line

var ch = 1+Math.floor(Math.random()*6);
I put the line

ch = 1;

and tested it, then I changed it to
ch = 2;
and so on. I removed this line (or commented it out using // ) when I was done with this phase of testing.
This falls under general advice, to avoid having to play a game, in all its complexity, while developing it.

Throwing two dice
The next application makes use of a button to give the player something to do, rather than just reloading
the webpage, and it also simulates the throwing of a pair of dice. Before looking at the code, think about
what you can carry over from the first application. The answer is: most of it. This second application will
need to do something about the positioning of the two die faces, using two more variables for this, dx and
dy . It also needs to repeat the code using Math.random and calling drawface twice to produce both die
faces. And there needs to be a change in what invokes a throw. Table 2-3, which describes the functions
calling and being called is essentially the same as Table 2-1, except now theres a function called
throwdice, which is invoked by an action set up by the onClick attribute of the button tag. Table 2-4
contains the full HTML document for the application of throwing two dice.

Table 2-3. Functions in the Two-Dice Application

Function Invoked By / Called By Calls

throwdice

invoked by action of the onClick in the <button> tag

drawface

drawface called by init draw1, draw2, draw4,

draw6, draw2mid

draw1

called by drawface in 3 places for 1, 3 and 5