The Essential Guide to HTML5

(Greg DeLong) #1

DICE GAME


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

Free download pdf