Throwing two dice

In document Using Games to Learn HTML5 and JavaScript (Page 63-71)

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

In document Using Games to Learn HTML5 and JavaScript (Page 63-71)