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.
48
draw2 called by drawface in 2 faces for 2 and 3 draw4 called by drawface in 3 places for 4, 5 and 6 draw2mid called by drawface in 1 place for 6
Table 2-4. The Complete Two-Dice Application
Code Explanation
<html> Opening html tag
<head> Opening head tag
<title>Throwing dice</title> Full title element
<script> Opening script tag
var cwidth = 400; Variable holding the width of the canvas var cheight = 300; Variable holding the height of the canvas; also
used to erase the canvas to prepare for redrawing
var dicex = 50; Variable holding the horizontal position of the single die; also used to erase the canvas to prepare for redrawing
var dicey = 50; Variable holding the vertical position of the single die
var dicewidth = 100; Variable holding the width of a die face var diceheight = 100; Variable holding the height of a die face var dotrad = 6; Variable holding the radius of a dot
var ctx; Variable holding the canvas context, used in all the draw commands
var dx; Variable used for horizontal positioning and changed for each of the two die faces
g
49
Code Explanation var dy; Variable used for vertical positioning. It is the
same for both die faces.
function throwdice() { Start of the throwdice function var ch =
1+Math.floor(Math.random()*6);
Declare the variable ch and then set it with a random value.
dx = dicex; Set dx for the first die face.
dy = dicey; Set dy for the second die face.
drawface(ch); Invoke drawface with ch as the number of dots.
dx = dicex + 150; Adjust dx for the second die face.
ch=1 + Math.floor(Math.random()*6); Reset ch with a random value.
drawface(ch); Invoke drawface with ch as the number of dots.
} Close throwdice function.
function drawface(n) { Start of the function definition for the drawface function, whose argument is the number of dots.
ctx = document.getElementById('canvas') .getContext('2d');
Obtain the object that is used to draw on the canvas.
ctx.lineWidth = 5; Set the line width to 5.
ctx.clearRect(dx,dy,dicewidth,diceheight); Clear the space where the die face may have been drawn. This has no effect the very first time.
ctx.strokeRect(dx,dy,dicewidth,diceheight) Draw the outline of the die face.
var dotx; Variable to hold horizontal position.
var doty; Variable to hold vertical position.
50
Code Explanation
ctx.fillStyle = "#009966"; Set color.
switch(n) { Start switch using the number of dots.
case 1: If it is 1
draw1(); Call the draw1 function break; Break out of the switch
Case 2: If it is 2
draw2(); Call the draw2 function break; Break out of the switch
Case 3: If it is 3
draw2(); First call draw2 and then
draw1(); Call draw1
break; Break out of the switch
Case 4: If it is 4
draw4(); Call the draw4 function break; Break out of the switch
Case 5: If it is 5
draw4(); Call the draw4 function and then draw1(); Call the draw1 function
break; Break out of the switch
Case 6: If it is 6
draw4(); Call the draw4 function and then
51
Code Explanation
draw2mid(); Call the draw2mid function
break; Break out of the switch (not strictly necessary)
} Close switch statement
} Close drawface function
function draw1() { Start of definition of draw1
var dotx; Variable to be used for the horizontal position for drawing the single dot
var doty; Variable to be used for the vertical position for drawing the single dot
ctx.beginPath(); Start a path
dotx = dx + .5*dicewidth; Set the center of this dot to be at the center of the die face (using dx) horizontally and
doty = dy + .5*diceheight; … (using dy) vertically ctx.arc(dotx,doty,dotrad,
0,Math.PI*2,true);
Construct a circle (it is drawn with the fill command)
ctx.closePath(); Close the path
ctx.fill(); Draw the path, that is, the circle
} Close draw1
function draw2() { Start of draw2 function
var dotx; Variable to be used for the horizontal position for drawing the two dots.
var doty; Variable to be used for the vertical position for drawing the two dots
ctx.beginPath(); Start a path
52
Code Explanation dotx = dx + 3*dotrad; Set the center of this dot to be 3 radius lengths
over from the upper corner of the die face, horizontally and
doty = dy + 3*dotrad; … vertically ctx.arc(dotx,doty,dotrad,0,Math
.PI*2,true);
Construct the first dot
dotx = dx+dicewidth-3*dotrad; Set the center of this dot to be 3 radius lengths in from the lower corner of the die face, horizontally and
doty = dy+diceheight-3*dotrad; … vertically ctx.arc(dotx,doty,dotrad,0,Math.
PI*2,true);
Construct the second dot
ctx.closePath(); Close the path
ctx.fill(); Draw both dots
} Close draw2
function draw4() { Start of draw4 function
var dotx; Variable to be used for the horizontal position for drawing the dots
var doty; Variable to be used for the vertical position for drawing the dots
ctx.beginPath(); Begin path
dotx = dx + 3*dotrad; Position the first dot inside the upper left corner, horizontally and
doty = dy + 3*dotrad; …vertically ctx.arc(dotx,doty,dotrad,0,Math.
PI*2,true);
Construct the circle
53
Code Explanation dotx = dx+dicewidth-3*dotrad; Position the second dot to be inside the lower
right corner, horizontally and
doty = dy+diceheight-3*dotrad; … vertically ctx.arc(dotx,doty,dotrad,0,Math.
PI*2,true);
Construct dots
ctx.closePath(); Close path
ctx.fill(); Draw 2 dots
ctx.beginPath(); Begin path
dotx = dx + 3*dotrad; Position this dot inside the lower left corner, horizontally and
doty = dy + diceheight-3*dotrad;
//no change
… vertically (note that this is the same y value just used)
ctx.arc(dotx,doty,dotrad,0,Math.
PI*2,true);
Construct circle
dotx = dx+dicewidth-3*dotrad; Position this dot just inside the upper left corner, horizontally and
doty = dy+ 3*dotrad; … vertically ctx.arc(dotx,doty,dotrad,0,Math.
PI*2,true);
Construct circle
ctx.closePath(); Close path
ctx.fill(); Draw 2 dots
} Close draw4 function
function draw2mid() { Start draw2mid function
var dotx; Variable to be used for the horizontal position for drawing the two dots
54
Code Explanation var doty; Variable to be used for the vertical position for
drawing the two dots
ctx.beginPath(); Begin path
dotx = dx + 3*dotrad; Position the dots to be just inside horizontally doty = dy + .5*diceheight; and midway vertically
ctx.arc(dotx,doty,dotrad,0,Math.
PI*2,true);
Construct circle
dotx = dx+dicewidth-3*dotrad; Position this dot to be just inside the right border
doty = dy + .5*diceheight;
//no change
Position y midway
ctx.arc(dotx,doty,dotrad,0,Math.
PI*2,true);
Construct circle
ctx.closePath(); Close path
ctx.fill(); Draw dots
} Close draw2mid function
</script> Close script element
</head> Close head element
<body> Starting body tag
<canvas id="canvas" width="400" height="300"> Canvas tag start Your browser doesn't support the HTML5
element canvas.
Set up canvas and provide notice if browser doesnt accept canvas element
</canvas> Close canvas tag
<br/> Line break
55
Code Explanation
<button onClick="throwdice();">Throw dice </button>
Button element (note attribute onClick setting to invoke throwdice)
</body> Close body tag
</html> Close html tag