xxxxxxxxxx
361
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
);
}
}