The purpose of this first application is to display a random die face on the canvas, with circles laid out in the standard way.
For any application, there are generally many approaches that would work. I realized that I could get double duty out of some of the coding, because the pattern for the 3 die face could be made by combining the 2 and 1 patterns. Similarly, the pattern for 5 is a combination of 4 and 1. The pattern for 6 is a combination of the one for 4 and something unique. I could have put all the coding into the init function or used a single drawface function. In any case, this made sense to me and I programmed and debugged it fairly fast. Table 2-1 lists all the functions and indicates what calls what. Table 2-2 shows the complete code, explaining what each line does.
Table 2-1. Functions in the Singe Die Throw Application
Function Invoked By / Called By Calls
Init invoked by action of the onLoad in the <body> tag drawface
drawface called by init draw1, draw2, draw4,
draw6, draw2mid draw1 called by drawface in 3 places for 1, 3 and 5
q
41 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-2. The Complete Code for the Throwing a Single Die Application
Code Explanation
<html> Opening html tag
<head> Opening head tag
<title>Throwing 1 die</title> Full title element
<script> Opening script tag
var cwidth = 400; Variable holding the width of the canvas; also used to erase the canvas to prepare for redrawing 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
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
function init() { Start of the function definition for the init function, which is invoked onLoad of the document
42
var ch = 1+Math.floor(Math.
random()*6);
Declare and set the value of the ch variable to randomly be the number 1, 2, 3, 4, 5, or 6
drawface(ch); Invoke the drawface function with the parameter ch
} End function definition
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(dicex,dicey,dicewidth,
diceheight);
Clear the space where the die face may have been drawn. This has no effect the very first time.
ctx.strokeRect(dicex,dicey,dicewidth, diceheight)
Draw the outline of the die face
ctx.fillStyle = "#009966"; Set the color for the circles. I used a graphics program to determine this value. You can do this, or experiment.
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
43 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 draw2mid(); Call the draw2mid function
break; Break out of the switch (not strictly necessary)
} Close the switch statement
} Close the drawface function
function draw1() { Start of the 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 = dicex + .5*dicewidth; Set the center of this dot to be at the center of the die face horizontally and
doty = dicey + .5*diceheight; … vertically
ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true); Construct a circle (which is drawn with the fill command)
44
ctx.closePath(); Close the path
ctx.fill(); Draw the path, that is, fill 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
dotx = dicex + 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 = dicey + 3*dotrad; … vertically
ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true); Construct the first dot
dotx = dicex+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 = dicey+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
45
ctx.beginPath(); Begin path
dotx = dicex + 3*dotrad; Position the first dot inside the upper left corner, horizontally and
doty = dicey + 3*dotrad; …vertically ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true); Construct the circle
dotx = dicex+dicewidth-3*dotrad; Position the second dot to be inside the lower right corner, horizontally and
doty = dicey+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 = dicex + 3*dotrad; Position this dot inside the lower left corner, horizontally and
doty = dicey + diceheight-3*dotrad; … vertically. (note that this is the same y value just used)
ctx.arc(dotx,doty,dotrad,0,Math.
PI*2,true);
Construct circle
dotx = dicex+dicewidth-3*dotrad; Position this dot just inside the upper left corner, horizontally and
doty = dicey+ 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
46
function draw2mid() { Start draw2mid 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(); Begin path
dotx = dicex + 3*dotrad; Position the dots to be just inside horizontally doty = dicey + .5*diceheight; And midway vertically
ctx.arc(dotx,doty,dotrad,0,Math.
PI*2,true);
Construct circle
dotx = dicex+dicewidth-3*dotrad; Position this dot to be just inside the right border doty = dicey + .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 onLoad="init();"> Starting body tag, with onLoad attribute set to invoke the init() function
<canvas id="canvas" width="400"
height="300">
Your browser doesn't support the HTML5 element canvas.
</canvas>
Set up canvas and provide notice if browser doesnt accept canvas element
</body>
</html>
Close body and close html elements.
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.