The Essential Guide to HTML5

DICE GAME ctx.beginPath(); Begin path dotx = dicex + 3*dotrad; Position the first dot inside the upper left corner, horizontally ...

CHAPTER 2 function draw2mid() { Start draw2mid function var dotx; Variable to be used for the horizontal position for drawing th ...

DICE GAME If you like, you can put comments in your code. Comments are pieces of text that are ignored by the browser but are th ...

CHAPTER 2 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 ...

DICE GAME Code Explanation var dy; Variable used for vertical positioning. It is the same for both die faces. function throwdice ...

CHAPTER 2 Code Explanation ctx.fillStyle = "#009966"; Set color. switch(n) { Start switch using the number of dots. case 1: If i ...

DICE GAME Code Explanation draw2mid(); Call the draw2mid function break; Break out of the switch (not strictly necessary) } Clos ...

CHAPTER 2 Code Explanation dotx = dx + 3*dotrad; Set the center of this dot to be 3 radius lengths over from the upper corner of ...

DICE GAME Code Explanation dotx = dx+dicewidth-3*dotrad; Position the second dot to be inside the lower right corner, horizontal ...

CHAPTER 2 Code Explanation var doty; Variable to be used for the vertical position for drawing the two dots ctx.beginPath(); Beg ...

DICE GAME Code Explanation <button onClick="throwdice();">Throw
dice </button> Button element (note attribute onCli ...

CHAPTER 2 var ctx; var dx; var dy; var firstturn = true; Global variable, initialized to the value true var point; Global variab ...

DICE GAME case 11: .. or 11 document.f.outcome.value="You win!"; Display You win! break; Exit the switch case 2: For 2, case 3: ...

CHAPTER 2 document.f.stage.value="Back to first throw."; Display Back to first throw document.f.pv.value=" "; Clear the point va ...

DICE GAME switch(n) { case 1: draw1(); break; case 2: draw2(); break; case 3: draw2(); draw1(); break; case 4: draw4(); break; c ...

CHAPTER 2 } } function draw1() { var dotx; var doty; ctx.beginPath(); dotx = dx + .5*dicewidth; doty = dy + .5*diceheight; ctx.a ...

DICE GAME ctx.closePath(); ctx.fill(); } function draw4() { var dotx; var doty; ctx.beginPath(); dotx = dx + 3*dotrad; doty = dy ...

CHAPTER 2 ctx.closePath(); ctx.fill(); } function draw2mid() { var dotx; var doty; ctx.beginPath(); dotx = dx + 3*dotrad; doty = ...

DICE GAME <br/> <button onClick="throwdice();">Throw dice </button> <form name="f"> Start a form named f ...

CHAPTER 2 JavaScript (and other programming languages) distinguish between numbers and strings of characters representing number ...