The Essential Guide to HTML5

(Greg DeLong) #1

DICE GAME


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.

Free download pdf