Activity 3.3 Designing with Functions: Stepwise Refinement

Introduction

Designing with Functions

Breaking Down Problems Step by Step

What Is Stepwise Refinement?

Stepwise refinement is the process of starting with a broad goal and gradually dividing it into smaller, more manageable tasks.

Each step adds more detail until your program is complete and ready to run.

Why Use Stepwise Refinement?

Organization: Plan before coding. Avoid writing everything in one big block of code.
Focus: Build and test one small part at a time.
Reusability: Each function can be reused or replaced later.
Debugging: When something breaks, you know exactly where to look.

Example of Refinement

Suppose we want to build a simple dice game. Instead of writing the whole game at once, we can break it down:

Roll a single die
Roll two dice and calculate the total
Apply the game rules for a round
Repeat rounds until the game ends

Each step becomes a function. Together, they form a complete game.

Our Goal

We'll design a simplified version of the dice game Craps using stepwise refinement.

Each function will handle one small, focused task to make the code easier to test and read.

'F' → Fullscreen

Objectives

Apply stepwise refinement to design a small game.
Use parameters and return values to control program flow.
Refactor working code into clean, reusable functions.

Activity Tasks

Create a new JavaScript file named 3-3-CrapsGame.
Build and run after each step. Do not skip ahead.

Task 1: Roll a Single Die (print only)

Implement rollDie() that prints the die result.
Call it several times from the bottom of your file to verify randomness.

1
function rollDie() {
2
  let die = Math.floor(Math.random() * 6) + 1;
3
  console.log("Rolled: " + die);
4
}
5

6
console.log("--- CRAPS ---");
7
// Call several times to verify randomness
8
rollDie();
9
rollDie();
10
rollDie();

Task 2: Return Instead of Print

Modify rollDie() so it returns the value instead of printing it.
In your top-level code, call rollDie() twice and print both results.

1
function rollDie() {
2
  let die = Math.floor(Math.random() * 6) + 1;
3
  console.log("Rolled: " + die);
4
  return Math.floor(Math.random() * 6) + 1;
5
}
6

7
console.log("--- CRAPS ---");
8

9
rollDie();
10
rollDie();
11
rollDie();
12

13
let d1 = rollDie();
14
let d2 = rollDie();
15

16
console.log("You rolled: " + d1 + " and " + d2);

Task 3: Roll Two Dice

Create rollDice() that calls rollDie() twice, prints the breakdown, and returns the total.
Test rollDice() by calling it and printing the total.

1
function rollDie() {
2
  return Math.floor(Math.random() * 6) + 1;
3
}
4

5
function rollDice() {
6
  let die1 = rollDie();
7
  let die2 = rollDie();
8
  let total = die1 + die2;
9

10
  console.log("You rolled " + die1 + " + " + die2 + " = " + total);
11
  return total;
12
}
13

14
console.log("--- CRAPS ---");
15
let total = rollDice();
16
console.log("Total: " + total);

Task 4: Come-Out Roll Rules

Write evaluateComeOutRoll(roll) to print the outcome and return whether the round is over (true or false).
If the round continues, store the roll in a point variable.

1
function rollDie() {
2
  return Math.floor(Math.random() * 6) + 1;
3
}
4

5
function rollDice() {
6 collapsed lines
6
  let d1 = rollDie();
7
  let d2 = rollDie();
8
  let total = d1 + d2;
9

10
  console.log("You rolled " + d1 + " + " + d2 + " = " + total);
11
  return total;
12
}
13

14
function evaluateComeOutRoll(roll) {
15
  if (roll == 7 || roll == 11) {
16
    console.log("Rolled a " + roll + "! You win!");
17
    return true;
18
  }
19
  else if (roll == 2 || roll == 3 || roll == 12) {
20
    console.log("Rolled a " + roll + ". You lose.");
21
    return true;
22
  }
23
  else {
24
    console.log("Rolled a " + roll + ".");
25
    return false;
26
  }
27
}
28

29
console.log("--- CRAPS ---");
30

31
let point = 0;
32

33
let roll = rollDice();
34
let roundOver = evaluateComeOutRoll(roll);
35

36
if (!roundOver) {
37
  point = roll;
38
  console.log("The point is now " + point + ".");
39
  // Next step: loop while not over and resolve the point.
40
}

Task 5: Resolve the Point

Add evaluatePointRoll(roll, point) and use a while loop to keep rolling until the player wins or loses.
Print a final message when the game is over.

1
function rollDie() {
2
  return Math.floor(Math.random() * 6) + 1;
3
}
4

5
function rollDice() {
6 collapsed lines
6
  let d1 = rollDie();
7
  let d2 = rollDie();
8
  let total = d1 + d2;
9

10
  console.log("You rolled " + d1 + " + " + d2 + " = " + total);
11
  return total;
12
}
13

14
function evaluateComeOutRoll(roll) {
12 collapsed lines
15
  if (roll == 7 || roll == 11) {
16
    console.log("Rolled a " + roll + "! You win!");
17
    return true;
18
  }
19
  else if (roll == 2 || roll == 3 || roll == 12) {
20
    console.log("Rolled a " + roll + ". You lose.");
21
    return true;
22
  }
23
  else {
24
    console.log("Rolled a " + roll + ".");
25
    return false;
26
  }
27
}
28

29
// Step 5: resolve after point is set
30
function evaluatePointRoll(roll, point) {
31
  if (roll == point) {
32
    console.log("Rolled a " + roll + "! You win!");
33
    return true;
34
  }
35
  else if (roll == 7) {
36
    console.log("Rolled a 7. You lose.");
37
    return true;
38
  }
39
  else {
40
    console.log("Rolled a " + roll + ". Still shooting for " + point + ".");
41
    return false;
42
  }
43
}
44

45
console.log("--- CRAPS ---");
46

47
let point = 0;
48
let gameOver = false;
49

50
// Come-out roll
51
let roll = rollDice();
52
gameOver = evaluateComeOutRoll(roll);
53

54
if (!gameOver) {
55
  point = roll;
56
  console.log("The point is now " + point + ".");
57

58
  // Keep rolling until win (hit point) or lose (7)
59
  while (!gameOver) {
60
    roll = rollDice();
61
    gameOver = evaluatePointRoll(roll, point);
62
  }
63
}
64

65
console.log("Thanks for playing!");

Sample Output

--- CRAPS ---
You rolled 4 + 3 = 7
Rolled a 7! You win!
Thanks for playing!

Reflection Questions

Which function did you write first, and why was that a good starting point?
How did return values help you control the game flow?
After refactoring, what does your top-level code focus on now?

Submission

Submit your completed .js file and reflection answers to the appropriate dropbox.