Throwing a single die

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

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.

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