p5.js Web Editor | FINAL MIDTERM

xxxxxxxxxx
let currentPage = "landing";
let clickOrder = 0; // tracks the order in which clues are clicked
​
// tracks if a clue page was visited
let visitedClues = {
  clue1: false,
  clue2: false,
  clue3: false,
  clue4: false,
};
​
// Preload images
function preload() {
  backgroundMusic = loadSound("music.mp3");
  clickSound = loadSound("soundeffect.mp3");
​
  landing1 = loadImage("landingpage1.png");
  landing2 = loadImage("landingpage2.png");
  instructions1 = loadImage("instructions1.png");
  instructions2 = loadImage("instructions2.png");
  room = loadImage("room.png");
  clue1 = loadImage("clue1.png");
  clue2 = loadImage("clue2.png");
  clue3 = loadImage("clue3.png");
  clue4 = loadImage("clue4.png");
  password = loadImage("password.png");
}
​
// Variables for password input
let passwordInput;
let submitButton;
let passwordCorrect = false;
let restartButton;
​
function setup() {
  createCanvas(800, 500);
  currentImage = landing1; // Default to landing1 as the starting image
  backgroundMusic.loop();
​
  // Clickable class, coordinates for clickable areas in game
  play = new Clickable(344, 340, 126, 60);
  play2 = new Clickable(363, 446, 95, 40);
  clock = new Clickable(550, 110, 40, 45);
  computer = new Clickable(285, 326, 60, 60);
  cupboard = new Clickable(470, 260, 200, 125);
  books = new Clickable(650, 395, 60, 50);
  painting = new Clickable(150, 138, 215, 85);
​
  //BackButton class
  back1 = new BackButton(20, 20, 100, 40);
  back2 = new BackButton(20, 20, 100, 40);
  back3 = new BackButton(20, 20, 100, 40);
  back4 = new BackButton(20, 20, 100, 40);
  backPassword = new BackButton(20, 20, 100, 40);
​
  // create password input field and submit button (hidden by default)
  passwordInput = createInput("");
  passwordInput.position(350, 379);
  passwordInput.hide();
​
  submitButton = createButton("Submit");
  submitButton.position(460, 379);
  submitButton.mousePressed(checkPassword);
  submitButton.hide();
​
  // Create restart button (hidden by default)
  restartButton = createButton("Start New Session");
  restartButton.position(350, 430);
  restartButton.mousePressed(restartGame);
  restartButton.hide();
}
​
​
function draw() {
  background(255);
​
 
  handlePageHoverEffects();
​
​
  image(currentImage, 0, 0, width, height);
​
  // Draws page content based on current page
  if (currentPage === "landing") {
    drawLandingPage();
  } else if (currentPage === "instructions") {
    drawInstructionsPage();
  } else if (currentPage === "game") {
    drawGamePage();
  } else if (currentPage === "clue1") {
    drawClue1Page();
  } else if (currentPage === "clue2") {
    drawClue2Page();
  } else if (currentPage === "clue3") {
    drawClue3Page();
  } else if (currentPage === "clue4") {
    drawClue4Page();
  } else if (currentPage === "password") {
    drawPasswordPage();
  } else if (currentPage === "escaped") {
    drawEscapedPage();
  }
}
​
​
function mousePressed() {
  clickSound.play();
​
  if (currentPage === "landing" && play.isClicked(mouseX, mouseY)) {
    currentPage = "instructions"; // switches to instructions page when clicked
  }
​
  if (currentPage === "instructions" && play2.isClicked(mouseX, mouseY)) {
    currentPage = "game"; // switches to game page when clicked
  }
​
  if (currentPage === "game") {
    // checks for valid order before allowing to open next clue page
    if (clickOrder === 0 && clock.isClicked(mouseX, mouseY)) {
      currentPage = "clue1";
      clickOrder = 1; // clock clicked first
      visitedClues.clue1 = true; // mark clue1 as visited
    } else if (clickOrder === 1 && computer.isClicked(mouseX, mouseY)) {
      currentPage = "clue2";
      clickOrder = 2; // computer clicked second
      visitedClues.clue2 = true; // mark clue2 as visited
    } else if (clickOrder === 2 && cupboard.isClicked(mouseX, mouseY)) {
      currentPage = "clue3";
      clickOrder = 3; // cupboard clicked third
      visitedClues.clue3 = true; // mark clue3 as visited
    } else if (clickOrder === 3 && books.isClicked(mouseX, mouseY)) {
      currentPage = "clue4";
      clickOrder = 4; // books clicked fourth
      visitedClues.clue4 = true; // mark clue4 as visited
    } else if (clickOrder === 4 && painting.isClicked(mouseX, mouseY)) {
      currentPage = "password"; // move to password page after painting
    }
​
    // allows reopening the clue pages
    if (visitedClues.clue1 && clock.isClicked(mouseX, mouseY)) {
      currentPage = "clue1"; // revisits clue1 if already visited
    }
    if (visitedClues.clue2 && computer.isClicked(mouseX, mouseY)) {
      currentPage = "clue2"; // revisits clue2 if already visited
    }
    if (visitedClues.clue3 && cupboard.isClicked(mouseX, mouseY)) {
      currentPage = "clue3"; // revisits clue3 if already visited
    }
    if (visitedClues.clue4 && books.isClicked(mouseX, mouseY)) {
      currentPage = "clue4"; // revisits clue4 if already visited
    }
  }
​
  // handle back button clicks
  if (currentPage === "clue1" && back1.isClicked(mouseX, mouseY)) {
    currentPage = "game"; //back to game page
  }
​
  if (currentPage === "clue2" && back2.isClicked(mouseX, mouseY)) {
    currentPage = "game"; //back to game page
  }
​
  if (currentPage === "clue3" && back3.isClicked(mouseX, mouseY)) {
    currentPage = "game"; //back to game page
  }
​
  if (currentPage === "clue4" && back4.isClicked(mouseX, mouseY)) {
    currentPage = "game"; //back to game page
  }
​
  if (currentPage === "password" && backPassword.isClicked(mouseX, mouseY)) {
    currentPage = "game"; //back to game page
​
    passwordInput.hide();
    submitButton.hide();
  }
}
​
// hover effect 
function handlePageHoverEffects() {
  if (currentPage === "landing") {
    
    // hover for Landing image (switches to landing2 on hover)
    if (mouseX >= 346 && mouseX <= 468 && mouseY >= 337 && mouseY <= 403) {
      currentImage = landing2; // switch to landing2 on hover
    } else {
      currentImage = landing1; // switch back to landing1 otherwise
    }
  } else if (currentPage === "instructions") {
    // hover for Instructions image (switches to instructions2 on hover)
    if (mouseX >= 366 && mouseX <= 450 && mouseY >= 443 && mouseY <= 485) {
      currentImage = instructions2; // switch to instructions2 on hover
    } else {
      currentImage = instructions1; //switch to instructions1 otherwise
    }
  }
}
​
// draws the content for each page
function drawLandingPage() {
  play.display(""); // displays play button
}
​
function drawInstructionsPage() {
  play2.display(""); // displays startGame button
}
​
function drawGamePage() {
  image(room, 0, 0, width, height);
  
  //displays clickable areas/class
  clock.display();
  computer.display();
  cupboard.display();
  books.display();
  painting.display();
}
​
function drawClue1Page() {
  image(clue1, 0, 0, width, height);
  back1.display("Back"); //back button
}
​
function drawClue2Page() {
  image(clue2, 0, 0, width, height);
  back2.display("Back"); //back button
}
​
function drawClue3Page() {
  image(clue3, 0, 0, width, height);
  back3.display("Back"); //back button
}
​
function drawClue4Page() {
  image(clue4, 0, 0, width, height);
  back4.display("Back"); //back button
}
​
function drawPasswordPage() {
  image(password, 0, 0, width, height);
  backPassword.display("Back"); //back button
​
  // shows the password input and submit button
  if (!passwordCorrect) {
    passwordInput.show();
    submitButton.show();
  } else {
    passwordInput.hide();
    submitButton.hide();
  }
}
​
function drawEscapedPage() {
  background(0, 0, 0); 
  textSize(32);
  textAlign(CENTER, CENTER);
  fill(255);
  text("Congratulations! You escaped!", width / 2, height / 2);
  restartButton.show();
  passwordInput.hide();
  submitButton.hide();
}
​
// checks password input
function checkPassword() {
  let enteredPassword = passwordInput.value();
​
  if (enteredPassword === "4930") {
    passwordCorrect = true;
    currentPage = "escaped"; 
  } else {
    alert("Incorrect password. Try again!");
  }
}
​
// restarts the game for a new session
function restartGame() {
  // reset all necessary variables
  passwordCorrect = false; // password not correct anymore
  currentPage = "landing"; // back to landing page
  clickOrder = 0; // resets click order to the beginning
  visitedClues = {
    // resets visited clues to false
    clue1: false,
    clue2: false,
    clue3: false,
    clue4: false,
  };
​
  restartButton.hide(); 
  passwordInput.hide(); 
  submitButton.hide(); 
​
  // resets the password input field
  passwordInput.value("");
}
​
// BackButton class for back buttons
class BackButton {
  constructor(x, y, w, h) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.hovered = false; // To track if the mouse is hovering over the button
  }
​
  display(label) {
    // change appearance when hovered
    this.hovered =
      mouseX > this.x &&
      mouseX < this.x + this.w &&
      mouseY > this.y &&
      mouseY < this.y + this.h;
​
    if (this.hovered) {
      fill(200, 200, 200); 
    } else {
      fill(169, 169, 169); 
    }
    noStroke(); 
    rect(this.x, this.y, this.w, this.h, 10); 
​
    // text inside button
    fill(0);
    textSize(16);
    textAlign(CENTER, CENTER);
    text(label, this.x + this.w / 2, this.y + this.h / 2); 
  }
​
  isClicked(mx, my) {
    // checks if mouse is within the button's bounds
    return (
      mx > this.x && mx < this.x + this.w && my > this.y && my < this.y + this.h
    );
  }
}
​
// Clickable areas class
class Clickable {
  constructor(x, y, w, h) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
  }
​
  display(label) {
    noFill(); 
    noStroke(); 
    rect(this.x, this.y, this.w, this.h); 
  }
​
  //checks if mouse click is within the rectangle
  isClicked(mx, my) {
    return (
      mx > this.x && mx < this.x + this.w && my > this.y && my < this.y + this.h
    );
  }
}
​
Cookies

Sketch Files

Console

Preview
