'Welcome to "NO WAY OUT", a puzzle game where you must find clues and use logic to solve puzzles and escape the room. Click on objects in the room to discover which are puzzles, and which can help you escape. An indicator next to the door will determine your progress, once a puzzle is solved, a chime will play and an indicator will turn green indicating your progress. Once all the puzzles have been solved, all indicator lights will turn on and the door will be open for you to escape. Goodluck!';

​

function preload() {

  /// loading in all neccessary assets

​

  //fonts

  font1A = loadFont("assets/Philosopher-Regular.ttf");

  font1B = loadFont("assets/Philosopher-Bold.ttf");

​

  //backgrounds

  startBG = loadImage("background/startBG.png");

  gameBG = loadImage("background/gameBG.png");

​

  //zoom backgrounds

  plant_zoom = loadImage("background/plant_zoom.png");

  clock_zoom = loadImage("background/clock_zoom.png");

  painting_zoom = loadImage("background/painting_zoom.png");

  books_zoom = loadImage("background/books_zoom.png");

​

  //sounds

  mainMusic = loadSound("sounds/maintrack.mp3");

  door_locked = loadSound("sounds/locked_door.mp3");

  puzzle_solved = loadSound("sounds/correct_answer.mp3");

  puzzle_failed = loadSound("sounds/wrong_answer.mp3");

​

  //buttons

  start_button = loadImage("buttons/start_button.png");

  rules_button = loadImage("buttons/rules_button.png");

  back_button = loadImage("buttons/back_button.png");

  play_again = loadImage("buttons/play_again.png")

​

  //objects //dont actually need to load them here

​

  // exit_door = loadImage("objects/exit_door.png");

  // plant_pot = loadImage("objects/plant_pot.png");

  // clock = loadImage("objects/clock.png");

  // books = loadImage("objects/books.png");

  indicator = loadImage("objects/indicator.png");

  // painting = loadImage("objects/painting.png");

}

​

function setup() {

  createCanvas(1280, 780);

  textAlign(CENTER);

  rectMode(CENTER);

  mainMusic.loop();

  mainMusic.amp(0.7);

​

  /////buttons setup/////

​

  //start button

  startButton = createImg("buttons/start_button.png", "start button");

  startButton.position(width / 2 - start_button.width / 2, 400);

  startButton.mousePressed(start);

  startButton.hide();

​

  //rules button

  rulesButton = createImg("buttons/rules_button.png", "rules button");

  rulesButton.position(width / 2 - rules_button.width / 2, 600);

  rulesButton.mousePressed(forward);

  rulesButton.hide();

​

  //back button

  backButton = createImg("buttons/back_button.png", "back button");

  backButton.position(0, height - back_button.height);

  backButton.mousePressed(rules_back);

  backButton.hide();

​

  //back to gameScreen button

  backToGameButton = createImg("buttons/back_button.png", "back button");

  backToGameButton.position(0, height - back_button.height);

  backToGameButton.mousePressed(start);

  backToGameButton.hide();

​

  /////object buttons setup/////

​

  //plant

  plantPot = createImg("objects/plant_pot.png", "plant pot");

  plantPot.position(50, 80);

  plantPot.mousePressed(plantZoom);

  plantPot.hide();

​

  //door

  exitDoor = createImg("objects/exit_door.png", "exit door");

  exitDoor.position(250, 250);

  exitDoor.mousePressed(door_knock);

  exitDoor.hide();

  openDoor = createImg("objects/open_door.png", "open door");

  openDoor.position(250, 250);

  openDoor.mousePressed(endGame);

  openDoor.hide();

​

  //painting

  paintingButton = createImg("objects/painting.png", "painting button");

  paintingButton.position(520, 80);

  paintingButton.mousePressed(paintingZoom);

  paintingButton.hide();

​

  //clock

  clockButton = createImg("objects/clock.png", "clock button");

  clockButton.position(840, 80);

  clockButton.mousePressed(clockZoom);

  clockButton.hide();

​

  //books

  booksButton = createImg("objects/books.png", "books button");

  booksButton.position(1020, 430);

  booksButton.mousePressed(booksZoom);

  booksButton.hide();

​

  // books riddle (answer = fire)

  answerInput = createInput();

  answerInput.position(width / 2 + 100, 500);

  answerInput.size(300, 60);

  answerInput.hide();

​

  submitButton = createButton("Submit");

  submitButton.position(width / 2 + 100, 580);

  submitButton.mousePressed(checkAnswer);

  submitButton.hide();

  //differences for painting puzzle

  difference1 = createImg("objects/difference.png", "")

  difference1.position(790,355);

  difference1.mousePressed(difference1_found)

  difference1.hide();

  show_difference1 = createImg("objects/difference_found.png", "")

  show_difference1.position(790,355);

  show_difference1.hide();

  difference2 = createImg("objects/difference.png", "")

  difference2.position(800,290);

  difference2.mousePressed(difference2_found)

  difference2.hide();

  show_difference2 = createImg("objects/difference_found.png", "")

  show_difference2.position(800,290);

  show_difference2.hide();

  difference3 = createImg("objects/difference.png", "")

  difference3.position(800,120);

  difference3.mousePressed(difference3_found)

  difference3.hide();

  show_difference3 = createImg("objects/difference_found.png", "")

  show_difference3.position(800,120);

  show_difference3.hide();

  difference4 = createImg("objects/difference.png", "")

  difference4.position(770,height-150);

  difference4.mousePressed(difference4_found)

  difference4.hide();

  show_difference4 = createImg("objects/difference_found.png", "")

  show_difference4.position(770,height-150);

  show_difference4.hide();

  // start over button

  playAgain = createImg("buttons/play_again.png", "play again");

  playAgain.position(width / 2 - play_again.width / 2, 400);

  playAgain.mousePressed(startOver);

  playAgain.hide();

}

​

////button functionality

​

function forward() {

  state++;

}

​

function rules_back() {

  state--;

}

​

function start() {

  state = GAME_SCREEN;

}

​

function plantZoom() {

  state = PLANT_ZOOM;

}

​

function difference1_found() {

  difference1.hide();

  show_difference1.show();

  diff1 = true;

}

function difference2_found() {

  difference2.hide();

  show_difference2.show();

  diff2 = true;

}

function difference3_found() {

  difference3.hide();

  show_difference3.show();

  diff3 = true;

}

function difference4_found() {

  difference4.hide();

  show_difference4.show();

  diff4 = true;

}

​

function paintingZoom() {

  state = PAINTING_ZOOM;

}

​

function clockZoom() {

  state = CLOCK_ZOOM;

}

​

function booksZoom() {

  state = BOOKS_ZOOM;

}

​

function endGame() {

  state = GAME_OVER;

}

​

function startOver() {

  state = INTRO_SCREEN;

}

​

//// state machine design ////

let state = 0;

​

//main screens

const INTRO_SCREEN = 0;

const RULES_SCREEN = 1;

const GAME_SCREEN = 2;

​

//zoom-ins

const PLANT_ZOOM = 3;

const PAINTING_ZOOM = 4;

const CLOCK_ZOOM = 5;

const BOOKS_ZOOM = 6;

​

//game over

​

const GAME_OVER = 7;

​

// booleans for puzzles and open door

let puzzle1solved = false;

let puzzle2solved = false;

let diff1 = false;

let diff2 = false;

let diff3 = false;

let diff4 = false;

​

//state machine using if conditions and the infinite draw function loop

function draw() {

  if (state == INTRO_SCREEN) {

    introScreen();

  } else if (state == RULES_SCREEN) {

    rulesScreen();

  } else if (state == GAME_SCREEN) {

    mainMusic.amp(0.4);

    gameScreen();

  } else if (state == PLANT_ZOOM) {

    showPlant();

  } else if (state == PAINTING_ZOOM) {

    showPainting();

  } else if (state == CLOCK_ZOOM) {

    showClock();

  } else if (state == BOOKS_ZOOM) {

    showBooks();

  } else if (state == GAME_OVER) {

    gameOverScreen();

  }

}

​

function introScreen() {

  //show or hide buttons

  startButton.show();

  rulesButton.show();

  backButton.hide();

  backToGameButton.hide();

  playAgain.hide();

​

  //hide objects

  exitDoor.hide();

  openDoor.hide();

  //reinitialize booleans

  puzzle1solved = false;

  puzzle2solved = false;

  soundPlayed = false;

  diff1 = false;

  diff2 = false;

  diff3 = false;

  diff4 = false;

​

  //main

  image(startBG, 0, 0);

  push();

  fill(20);

  stroke(200);

  strokeWeight(5);

  textFont(font1B, 190);

  text("NO WAY OUT", width / 2, 290);

  pop();

}

​

function rulesScreen() {

  //show or hide buttons

  startButton.hide();

  rulesButton.hide();

  backButton.show();

​

  //hide objects

  exitDoor.hide();

​

  image(startBG, 0, 0);

  push();

  fill(20);

  stroke(200);

  strokeWeight(5);

  textFont(font1B, 150);

  text("INSTRUCTIONS", width / 2, 290);

  pop();

  push();

  strokeWeight(20);

  stroke(200, 200, 200, 100);

  fill(125);

  rectMode(CENTER);

  rect(width / 2, 550, width - 100, 310);

  pop();

  textFont(font1A, 30);

  textWrap(WORD);

  text(instructions, width / 2, 450, width - 170);

}

​

function gameScreen() {

  //hide buttons

  startButton.hide();

  rulesButton.hide();

  backToGameButton.hide();

  answerInput.hide();

  submitButton.hide();

  difference1.hide();

  show_difference1.hide();

  difference2.hide();

  show_difference2.hide();

  difference3.hide();

  show_difference3.hide();

  difference4.hide();

  show_difference4.hide();

  openDoor.hide();

  //show all objects

  exitDoor.show();

  plantPot.show();

  clockButton.show();

  booksButton.show();

  paintingButton.show();

​

  //background and above door indicator

  image(gameBG, 0, 0);

  image(indicator, 257, 175);

  push();

  let indicator1 = new Indicator(310, 210);

  let indicator2 = new Indicator(380, 210);

​

​

  if (puzzle1solved == true) {

    indicator1.setCorrect();

  } else if (status == GAME_OVER) {

    indicator1.setFalse();

  }

  if (puzzle2solved == true) {

    indicator2.setCorrect();

  } else {

    indicator2.setFalse();

  }

  if ((puzzle1solved && puzzle2solved) == true) {

    exitDoor.hide();

    openDoor.show();

  }

  indicator1.display();

  indicator2.display();

  pop();

}

​

function gameOverScreen(){

  //hide all objects

  exitDoor.hide();

  openDoor.hide();

  plantPot.hide();

  clockButton.hide();

  booksButton.hide();

  paintingButton.hide();

  image(startBG, 0, 0)

  push();

  fill(50);

  textFont(font1B, 50)

  text("YOU HAVE ESCAPED! GAME OVER", width/2, 230)

  pop();

  playAgain.show();

}

​

function door_knock() {

  door_locked.play();

}

​

function hide_all_objects() {

  exitDoor.hide();

  plantPot.hide();

  clockButton.hide();

  booksButton.hide();

  paintingButton.hide();

}

​

// zoom in / show functions

function showPlant() {

  hide_all_objects();

  backToGameButton.show();

  image(plant_zoom, 0, 0);

}

​

// puzzle 1 - painting

let soundPlayed = false; // fixes infinite play of sound

​

function showPainting() {

  hide_all_objects();

  backToGameButton.show();

  image(painting_zoom, 0, 0);

  textFont(font1A, 40);

  push();

  fill(200);

  stroke(2);

  text("Find 4 Differences (on the right side).", width/2, 35)

  pop();

  difference1.show();

  difference2.show();

  difference3.show();

  difference4.show();

  if ((diff1 && diff2 && diff3 && diff4 && !soundPlayed) == true) {

    puzzle_solved.play();

    puzzle1solved = true;

    soundPlayed = true;

  }

}

​

​

function showClock() {

  hide_all_objects();

  backToGameButton.show();

  image(clock_zoom, 0, 0);

}

​

function showBooks() {

  hide_all_objects();

  answerInput.show();

  submitButton.show();

  backToGameButton.show();

  image(books_zoom, 0, 0);

}

​

function checkAnswer() {

  let userAnswer = answerInput.value();

  if (userAnswer.toLowerCase() === "fire") {

    console.log("Correct!");

    puzzle_solved.play();

    puzzle2solved = true;

  } else {

    console.log("Incorrect. Try again.");

    puzzle_failed.play();

  }

}

​

class Indicator {

  constructor(x, y) {

    this.x = x;

    this.y = y;

    this.radius = 15;

    this.isCorrect = false; // initial status is false (grey)

  }

​

  // sets the status to correct (green)

  setCorrect() {

    this.isCorrect = true;

  }

​

  // sets the status to false (grey)

  setFalse() {

    this.isCorrect = false;

  }

  // display the circle for indicator

  display() {

    stroke(3);

    strokeWeight(3);

    if (this.isCorrect) {

      fill(0, 255, 0); // green for correct

    } else {

      fill(150); // grey for false

    }

    ellipse(this.x, this.y, this.radius * 2, this.radius * 2);

  }

}

​