Week 2 Lab Sheet — Canvas & the Dice Game

Web Games Development · Canvas 2D · ~150 minutes

Student name

Student ID

Date

Objectives

Create a canvas and get its 2D context with getContext('2d').
Draw rectangles and circles with strokeRect, fillRect and arc.
Set colours with fillStyle, strokeStyle and lineWidth.
Produce random integers with Math.random() and Math.floor().
Respond to a button click with an onclick handler.
Read and write form fields with document.f.name.value.
Model game state with variables (the Craps point and first turn).

Instructions

Create a folder named Week2 on your PC. Create each file below in your editor, writing the code shown under each step. Save (Ctrl+S) and refresh the browser after each change. Tick each checkpoint as you go.

Files

1. singleDie.html Objectives 1, 2, 3, 4

Week2\singleDie.html

[Obj 1] Create the file and add this scaffold code.

<!DOCTYPE html>
<html lang="en">
<head><title>Throwing 1 die</title></head>
<body>
  <canvas id="canvas" width="400" height="300"></canvas>

  <script>
    var ctx = document.getElementById("canvas").getContext("2d");
    // TODO: draw the die face and dots
  </script>
</body>
</html>

[Obj 2, 3] Fill with fillRect and outline with strokeRect.

ctx.fillStyle = "#f9f9f9";
ctx.fillRect(50, 50, 100, 100);
ctx.lineWidth = 5;
ctx.strokeStyle = "#333";
ctx.strokeRect(50, 50, 100, 100);

[Obj 2, 3] Add a dot() helper that draws one dot with arc().

function dot(x, y) {
  ctx.beginPath();
  ctx.fillStyle = "#009966";
  ctx.arc(x, y, 6, 0, Math.PI * 2, true);
  ctx.fill();
}

[Obj 4] Add the random roll and draw the dots for that number.

var ch = 1 + Math.floor(Math.random() * 6);
var cx = 100, cy = 100, d = 25;
if (ch === 1 || ch === 3 || ch === 5) { dot(cx, cy); }
if (ch >= 2) { dot(cx - d, cy - d); dot(cx + d, cy + d); }
if (ch >= 4) { dot(cx + d, cy - d); dot(cx - d, cy + d); }
if (ch === 6) { dot(cx - d, cy); dot(cx + d, cy); }

Checkpoint: singleDie.html draws a die face.

2. twoDie.html Objectives 2, 3, 4, 5

Week2\twoDie.html

[Obj 5] Create the file and add this scaffold code.

<!DOCTYPE html>
<html lang="en">
<head><title>Throwing dice</title></head>
<body>
  <canvas id="canvas" width="400" height="300"></canvas>
  <br />
  <button onclick="throwdice()">Throw dice</button>

  <script>
    var ctx = document.getElementById("canvas").getContext("2d");
    function throwdice() {
      // TODO: roll two dice and draw them
    }
    function drawface(n, dx) {
      // TODO: draw the die outline and dots
    }
  </script>
</body>
</html>

[Obj 4] Roll and draw two dice.

function throwdice() {
  var ch1 = 1 + Math.floor(Math.random() * 6);
  var ch2 = 1 + Math.floor(Math.random() * 6);
  drawface(ch1, 50);
  drawface(ch2, 200);
}

[Obj 2, 3] Add the die outline in drawface(n, dx).

ctx.fillStyle = "#f9f9f9";
ctx.fillRect(dx, 50, 100, 100);
ctx.strokeStyle = "#333";
ctx.strokeRect(dx, 50, 100, 100);

[Obj 2, 3] Add the dots in drawface(n, dx).

var cx = dx + 50, cy = 100, d = 25;
function dot(x, y) {
  ctx.beginPath();
  ctx.fillStyle = "#009966";
  ctx.arc(x, y, 6, 0, Math.PI * 2, true);
  ctx.fill();
}
if (n === 1 || n === 3 || n === 5) { dot(cx, cy); }
if (n >= 2) { dot(cx - d, cy - d); dot(cx + d, cy + d); }
if (n >= 4) { dot(cx + d, cy - d); dot(cx - d, cy + d); }
if (n === 6) { dot(cx - d, cy); dot(cx + d, cy); }

Checkpoint: twoDie.html rolls two dice on a click.

3. diceGame.html Objectives 5, 6, 7

Week2\diceGame.html

[Obj 5, 6] Create the file and add this scaffold code.

<!DOCTYPE html>
<html lang="en">
<head><title>Craps game</title></head>
<body>
  <canvas id="canvas" width="400" height="300"></canvas>
  <br />
  <button onclick="throwdice()">Throw dice</button>
  <form name="f">
    Stage: <input name="stage" value="First Throw" />
    Point: <input name="pv" value="  " />
    Outcome: <input name="outcome" value="   " />
  </form>
  <script>
    var ctx = document.getElementById("canvas").getContext("2d");
    // TODO: add the game state variables
    // TODO: draw the dice and apply the Craps rules
  </script>
</body>
</html>

[Obj 7] Add the game state variables.
```
var firstturn = true;
var point;
```

[Obj 2, 3] Add drawface(n, dx) to draw one die.

function drawface(n, dx) {
  ctx.fillStyle = "#f9f9f9";
  ctx.fillRect(dx, 50, 100, 100);
  ctx.strokeStyle = "#333";
  ctx.strokeRect(dx, 50, 100, 100);
  var cx = dx + 50, cy = 100, d = 25;
  function dot(x, y) {
    ctx.beginPath();
    ctx.fillStyle = "#009966";
    ctx.arc(x, y, 6, 0, Math.PI * 2, true);
    ctx.fill();
  }
  if (n === 1 || n === 3 || n === 5) { dot(cx, cy); }
  if (n >= 2) { dot(cx - d, cy - d); dot(cx + d, cy + d); }
  if (n >= 4) { dot(cx + d, cy - d); dot(cx - d, cy + d); }
  if (n === 6) { dot(cx - d, cy); dot(cx + d, cy); }
}

[Obj 4, 6, 7] Add throwdice() to roll, draw and apply the Craps rules.

function throwdice() {
  var ch1 = 1 + Math.floor(Math.random() * 6);
  var ch2 = 1 + Math.floor(Math.random() * 6);
  drawface(ch1, 50);
  drawface(ch2, 200);
  var sum = ch1 + ch2;
  if (firstturn) {
    if (sum === 7 || sum === 11) { document.f.outcome.value = "You win!"; }
    else if (sum === 2 || sum === 3 || sum === 12) { document.f.outcome.value = "You lose!"; }
    else { point = sum; document.f.pv.value = point; firstturn = false; }
  } else {
    if (sum === point) { document.f.outcome.value = "You win!"; firstturn = true; }
    else if (sum === 7) { document.f.outcome.value = "You lose!"; firstturn = true; }
  }
}

Checkpoint: diceGame.html plays Craps and reports the outcome.

Marking rubric

Criterion	Points	Score
Canvas and 2D context created	2
Rectangles and circles drawn with correct colours	2
Random integers 1-6 used for the dice	2
Button click handler works	2
Form fields read and written correctly	3
Craps rules modelled with game state	3
Runs with no console errors, named correctly	1
Total	15

Common errors

Forgetting to get the context before drawing.
Drawing the same face twice because dx was not changed.
Forgetting return false in the form submit handler.
Comparing with = instead of ===.

Progress and quiz scores are also tracked on the Week 2 lab page in the class website.