For this assignment, I worked with Sumru Deniz to create a small choice-based game using conditional statements. We created three questions and four possible endings. The same two buttons are reused throughout the game, but what they do changes depending on which question the player is currently seeing.

We used boolean variables such as showQ1, showQ2, and showQ3 to keep track of which question should appear. The main interaction happens inside mouseClicked(). For example, when Question 1 is showing and the player clicks the left button, we change:

showQ1 = false;
showQ2 = true;

This means Question 1 disappears and Question 2 becomes active.

One problem we ran into was caused by putting all of our button conditions inside the same mouseClicked() function. Our buttons are always in the same positions. At first, when we clicked the left button on Question 1, the program changed showQ2 to true, but it then continued checking the rest of the conditions during the same click. Since the left button for Question 2 was also in exactly the same location, the program immediately triggered the next condition and skipped Question 2, going directly to the ending.

To solve this problem, we added another set of boolean variables:

let saveQ2 = false;
let leaveQ2 = false;
let option1Q3 = false;
let option2Q3 = false;

These variables start as false. When Question 2 is first activated, showQ2 becomes true, but saveQ2 and leaveQ2 are still false. This prevents the same mouse click from immediately activating an ending.

Then, when Question 2 is actually drawn, we change:

saveQ2 = true;
leaveQ2 = true;

Now the program is ready for the next click. For example, the ending can only happen when both conditions are true:

if (showQ2 == true && saveQ2 == true) {
  showQ2 = false;
  endingImg1 = true;
}

This was probably the most important thing I learned from this project. At first, I thought about an if statement simply as checking whether the mouse was in a certain location. But because we reused the same buttons for different questions, the mouse position alone was not enough. The program also needed to know which stage of the game the player was currently in and whether that stage was ready to accept another click.

Finally, we added four images for the different endings. We loaded them with loadImage() inside preload() and created another boolean for each ending:

let endingImg1 = false;
let endingImg2 = false;
let endingImg3 = false;
let endingImg4 = false;

When the player reaches an ending, we change the corresponding boolean to true, and draw() displays that image. This allowed us to turn a relatively simple system of two buttons into a branching story with multiple questions and four different outcomes.

Question: Adding Images

Another problem we had was adding images for the endings. At first, I tried using preload() and loadImage():

let img;

function preload() {
  img = loadImage('endingImg1.jpg');
}

Even though the image was uploaded correctly and the filename was exactly the same, it still did not work. When I tried to use image(img, 0, 0), I kept getting an error saying that img was undefined. I checked the filename and changed the image several times, but nothing fixed it.