​

let avatar;

let creature;

let flower;

let mask;

let boat;

let eyes = [];

let orbs = [];

let recalledOrbs = [];

let eyesNum = 2;

let orbsNum = 6;

let maskInUse = false;

let flowerInUse = false;

let creatureInteract = false;

let onBoard = false;

let orbsInUse = false;

let response;

let sceneNum = 0;

let inventory = [];

let mic;

let end = false;

​

//Scene Images

let scene1;

let scene2;

let scene3;

let scene4;

let scene5;

​

//Object Images

let orbImg;

let inventImg;

let inventBoxImg;

let flowerImg;

let creatureImg;

let maskImg;

let avaImg;

let boatImg;

let eyeImg;

let textFrameImg;

​

//Sound

let music;

let collectSound;

let useSound;

let wailing;

​

/*-----------------------------------------------------------------------------------------*/

​

function preload() {

  scene1 = loadImage('assets/scene1.jpg');

  scene2= loadImage('assets/scene2.jpg');

  scene3= loadImage('assets/scene3.jpg');

  scene4= loadImage('assets/scene4.jpg');

  scene5= loadImage('assets/scene5.jpg');

  orbImg = loadImage('assets/orb.png');

  inventImg = loadImage('assets/inventory_icon.png');

  inventBoxImg = loadImage('assets/inventory_box.png');

  flowerImg = loadImage('assets/flower.png');

  creatureImg = loadImage('assets/creature.png');

  maskImg = loadImage('assets/mask.png');

  avaImg = loadImage('assets/avatar.png');

  boatImg = loadImage('assets/boat.png');

  eyeImg = loadImage('assets/eye.png');

  textFrameImg = loadImage('assets/textframe.png');

  music = loadSound('assets/background music.mp3');

  collectSound = loadSound('assets/collect.wav');

  useSound = loadSound('assets/use.wav');

  wailing = loadSound('assets/wailing.wav');

}

​

/*-----------------------------------------------------------------------------------------*/

​

function setup() {

  createCanvas(600, 400);

  for (let i = 0; i < eyesNum; i++) {

    eyes[i] = new Eye(i * 200 +200, 150);

  }

  for (let i = 0; i < orbsNum; i++) {

    orbs[i] = new Orb(i*100 + 100, 330);

  }

  for (let i = 0; i < orbsNum; i++) {

    recalledOrbs[i] = new Orb2(i*100 + 50, 300);

  }

  boat = new Boat();

  avatar = new Avatar();

  flower = new Flower(); 

  mask = new Mask();

  creature = new Creature();

  mic = new p5.AudioIn();

  mic.start();

  music.play();

  music.loop();

  music.setVolume(0.15);

}

​

/*-----------------------------------------------------------------------------------------*/

​

function draw() {

  switchScene();

  displayInventoryBox();

  //Creature

  if (sceneNum > 0) { //Let creature appear and stay from scene 2

    creature.body();

    creature.interaction();

    creature.talk();

    creature.followPlayer();

  }

  //Avatar

  avatar.emitLight(); //Emit light from the avatar's body when player scream

  avatar.body();

  avatar.moveSpeed(); //Turn speed back to normal after scene 2

  avatar.move();

  avatar.talk();

  //Boat

  if (sceneNum >= 3) {

    boat.body();

    if (onBoard == false) {

      boat.interaction();

    }

    if (onBoard == true) {

      boat.move();

    }

  }

  //Flower

  flower.body();

  flower.interaction();

  //Mask

  if (sceneNum > 0) { //Let mask appear and stay from scene 2

    mask.body();

    mask.interaction();

  }  

  //Glass Orbs

  if (sceneNum >= 2) { //Let orbs appear on scene 3 to 5

    for (let i = 0; i < orbsNum; i++) {

      orbs[i].body();

      orbs[i].collect(); //Let users collect orbs when they are close to orbs

    }

  }

  if (sceneNum == 4) {

    if (orbsInUse == true && end == false) {

      voiceVol = mic.getLevel(); //Player's voice volume

      for (let i = 0; i < orbsNum; i++) {

        recalledOrbs[i] = new Orb2(i*100 + 50, 300 - voiceVol*600); //Orbs appear then fly when player scream

        recalledOrbs[i].body();

        if (300 - voiceVol*600 < 0 && end == false) {

          end = true;

        }

      }

    }

  }

}

​

/*-----------------------------------------------------------------------------------------*/

//Player's avatar

​

class Avatar { 

  constructor() {

    this.x = 40;

    this.y = 350;

    this.w = 50;

    this.h = 50;

    this.speed = 5;

  }

  body() {

    push();

    imageMode(CENTER);

    image(avaImg, this.x, this.y, this.w, this.h);

    //ellipse(this.x, this.y, this.w, this.h);

    if (maskInUse == true) { //Equip mask when player click on mask in inventory box

      image(maskImg, this.x, this.y -5, mask.w, mask.h);

      //ellipse(this.x, this.y - 5, mask.w, mask.h);

    }

    pop();

  }

  //Player's movement control

  moveSpeed() {

    if (sceneNum > 1) {

      this.speed = 5;

      creature.speed = 3;

    }

    if (sceneNum >= 3 && onBoard == true) {

      this.speed = 1;

      creature.speed = 1;

    } 

  }

  move() {

    if(keyIsDown(39)) { //Let player move forward when they press right arrow key

      this.x+=this.speed; //Player's speed

      if (this.x > width && sceneNum == 0 && inventory[0] == flower) { //Player can move on to the second scene if they have the flower

        this.x = 40;

        sceneNum++;

      } 

      if (this.x > width && sceneNum == 0 && inventory[0] != flower) { //Player is stuck on the first scene if they don't have the flower

      this.x = width;

        displayText(300, "Make sure to collect all objects.");

      } 

      if (this.x > width && sceneNum == 1 && flowerInUse == false) { //Player is stuck on the second scene if they don't give the flower to the creature

        this.x = width;

        displayText(300, "I may have forgotten to do something.");

      }

      if (this.x > 400 && sceneNum == 3 && onBoard == false) { //Player can't move on to the final scene if they're not on the board

        this.x = 375;

        creature.x = 330;

      }

      if (this.x > width && sceneNum == 3 && onBoard == true) { //Player can move on to the final scene when they're on the board

        sceneNum++;

        boat.x = 0;

        creature.x = 10;

        this.x = 135;

      }

      if (sceneNum == 4 && onBoard == true && boat.x >= 210 && end == false) { //Stop player and creature together with boat in the middle of the river

        this.x = 345;

        creature.x = 220;

      }

      if (end == true) { //Continue moving after releasing orbs

        this.speed = 1;

        creature.speed = 1;

        boat.speed = 1;

      }

    }   

    if(keyIsDown(37) && end == false) { //Let player move backward when they press left arrow key

      this.x-=this.speed; //Player's speed

      if (this.x < 0) { //Stop player from going back to previous scene

        this.x = 0;

      }

      if (boat.x < 0 && sceneNum > 3 && onBoard == true) { //Stop player and creature from moving back to previous scene when they're on the boat in scene 5

        this.x = 135;

        creature.x = 10;

      }

      if (boat.x <= 400 && sceneNum == 3 && onBoard == true) { //Stop player and creature from moving out of the boat in scene 4 once they've boarded

        this.x = 535;

        creature.x = 410;

      }

    }

  }

  //Avatar emits light when player scream in scene 1

  emitLight() { 

    if (sceneNum == 0) {

      voiceReaction(this.x, this.y);

    }

  }

  talk() {

    if (sceneNum == 0 && this.x < 100) {

      displayText (400, "---PRESS RIGHT ARROW TO MOVE FORWARD---\n---PRESS LEFT ARROW TO MOVE BACKWARD---")

    }

    if (sceneNum == 0 && this.x > 100 && this.x < 300) {

      displayText (400, "It's so dark here. I can't see the way out. \n---TRY TO SCREAM OUT LOUD---")

    }

    if (sceneNum == 1 && this.x < 250) {

      displayText(500, "Being watched scares me. I can feel my energy being drained. \nLet's get out of here.")

    }

    if (sceneNum == 2 && this.x < 200) { //Display response when player is near the orbs

      displayText(500, "These orbs remind be of some forgotten memories.");

    }

    if (sceneNum == 3 && maskInUse ==true && this.x > creature.x - 50 && this.x < creature.x + creature.w + 50) {

      displayText(500, "My new friend seems calm now. I can take off my mask.\n---CLICK ON THE MASK IN INVENTORY TO UNEQUIP---")

    }

    if (sceneNum == 4 && boat.x == 210 && orbsInUse == false) {

      displayText(500, "We can't move. Let's get rid of deadweight.\n---CLICK ON THE ORB IN INVENTORY---");

    }

    if (sceneNum == 4 && boat.x == 210 && orbsInUse == true) {

      displayText(400, "Bye bye...\n---SCREAM OUT LOUD TO SEND THE ORBS AWAY---");

    }

    if (sceneNum == 4 && end == true) {

      displayText(400, "Would you like to play again?\n---PRESS R TO RESTART---")

    }

  }

}

​

/*-----------------------------------------------------------------------------------------*/

//Creature - NPC

​

class Creature {

  constructor() {

    this.x = 400;

    this.y = 275;

    this.w = 70;

    this.h = 100;

    this.speed = 3;

  }

  body() {

    image(creatureImg, this.x, this.y, this.w, this.h);

    if (flowerInUse == true) {

      image(flowerImg, this.x + 25, this.y + 40, 20, 20);

    }

  }

  //Interaction when player is near creature

  interaction() { 

    if (avatar.x > this.x - 50 && avatar.x < this.x + this.w + 50) { //Check if player's avatar is close to the creature

      if (sceneNum == 1 && maskInUse == false) { //Display response when player is near the creature and not wearing a mask

        displayText(500, "The poor thing seems scared of me. Let's try the mask.\n---CLICK ON THE MASK IN INVENTORY TO EQUIP---");

      } else if (sceneNum == 1 && maskInUse == true && flowerInUse == false) { //Display response when player is near the creature and wearing a mask

          displayText(300, "---PRESS F TO TALK TO THE CREATURE---");

        }

    }

  }

  talk() {

    if (creatureInteract == true && flowerInUse == false) { //Let player talk to the creature

      wailing.play(); //Creature's noise

      displayText(500, "You're lost too... Here's a flower for you. Wanna join me?\n---CLICK ON THE FLOWER IN INVENTORY---")

    }

  }

  followPlayer() {

    if (flowerInUse == true) {

      wailing.stop();//Lower creature's noise volume to 0 here.

      if (keyIsDown(39)) { //Move creature forward with the player

        this.x+=this.speed; //Creature's speed

        if (this.x > width && avatar.x > width && sceneNum < 3) { //Player can move on the third scene if they gave the flower to the creature

          this.x = 0;

          sceneNum++;

          avatar.x = 40;

        }

      }

      if (keyIsDown(37) && end == false) { //Move creature backward with the player

        this.x-=this.speed; //Creature's speed

        if (this.x < 0) { //Stop player and creature from going back to previous scene

          this.x = 0;

        }

      }

    }

  }

}

​

/*-----------------------------------------------------------------------------------------*/

//Flower - Interactive Collectible Object

​

class Flower {

  constructor() {

    this.x = 400;

    this.y = 350;

    this.w = 30;

    this.h = 30;

  }

  body() {

    push();

    if (flowerInUse == true && this.w > 0) {

      tint(50, 21, 55, 180);

    }

    imageMode(CENTER);

    image(flowerImg, this.x, this.y, this.w, this.h);

    pop();

    //ellipse(this.x, this.y, this.w, this.h);

  }

  //Interaction when player is near flower

  interaction() { //Check if player's avatar is close to the flower

    if (avatar.x > this.x - this.w/2 - avatar.w/2 && avatar.x < this.x  + this.w/2 + avatar.w/2 && avatar.y > this.y - this.w/2 - avatar.w/2 && avatar.y < this.y  + this.w/2 + avatar.w/2) { //Display response when player is near the flower

      displayText(400, "A flower shining in the dark. How strange! \n---PRESS F TO PICK UP---");

      if (keyIsDown(70)) { //Let player pick up the flower and add to inventory box

        collectSound.play();

        this.x = 110; //Move flower to inventory box

        this.y = 50; //Move flower to inventory box

        inventory.push(flower); //Add flower to inventory array

        console.log(inventory);

      }

    }

  }

}

​

/*-----------------------------------------------------------------------------------------*/

//Mask - Interactive Collectible Object

​

class Mask {

  constructor() {

    this.x = 300;

    this.y = 350;

    this.w = 20;

    this.h = 20;

  }

  body() {

    push();

    if (maskInUse == true && this.w > 0) {

      tint(50, 21, 55, 180);

    }

    imageMode(CENTER);

    image(maskImg, this.x, this.y, this.w, this.h);

    pop();

  }

  //Interaction when player is near mask

  interaction() {

    if (avatar.x > this.x - this.w/2 - avatar.w/2 && avatar.x < this.x  + this.w/2 + avatar.w/2 && avatar.y > this.y - this.w/2 - avatar.w/2 && avatar.y < this.y  + this.w/2 + avatar.w/2 && inventory[1] != mask) { //Display response when player is near the mask

      displayText(300, "What a funny looking mask! \n---PRESS F TO PICK UP---");

      if (keyIsDown(70)) { //Let player pick up the mask and add to inventory box

        collectSound.play();

        this.x = 145; //Move mask to inventory box

        this.y = 50; //Move mask to inventory box

        inventory.push(mask); //Add mask to inventory array

        console.log(inventory);

      }

    }

  }

}

​

/*-----------------------------------------------------------------------------------------*/

//Eyes - Obstacle

​

class Eye {

  constructor(x, y) {

    this.x = x;

    this.y = y;

    this.w = 100;

    this.h = 30;

  }

  body() {

    push();

    imageMode(CENTER);

    image(eyeImg, this.x, this.y, this.w, this.h);

    pop();

  }

  checkProximity() { //Slow down player's speed when they're being watched by the eyes

    if (avatar.x < this.x + this.w/2 && avatar.x > this.x - this.w/2) { //check player's proximity to the eyes

      avatar.speed = 1;

      creature.speed = 0.5;

      }

    }

}

​

/*-----------------------------------------------------------------------------------------*/

//Glass Orbs - Interactive Collectible Object

​

class Orb {

  constructor(a, b) {

    this.x = a;

    this.y = b;

    this.w = 15;

    this.h = 15;

  }

  body() {

    push();

    if (orbsInUse == true && this.w > 0) {

      tint(50, 21, 55, 130);

    }

    imageMode(CENTER);

    image(orbImg, this.x, this.y, this.w, this.h);

    pop();

  }

  //Interaction when player is near the orb

  collect() {

    if (avatar.x > this.x - this.w/2 - avatar.w/2 && avatar.x < this.x  + this.w/2 + avatar.w/2 && avatar.y > this.y - this.w/2 - avatar.w/2 && avatar.y < this.y  + this.w/2 + avatar.w/2) { //Display response when player is near the orbs

      collectSound.play();

      this.x = 175; //Move orb to inventory box

      this.y = 50; //Move orb to inventory box    

    }

  }

}

​

/*-----------------------------------------------------------------------------------------*/

//Glass Orbs V2 - Interactive Collectible Object (For Final Scene)

​

class Orb2 {

  constructor(a, b) {

    this.x = a;

    this.y = b;

    this.w = 15;

    this.h = 15;

  }

  body() {

    push();

    imageMode(CENTER);

    image(orbImg, this.x, this.y, this.w, this.h);

    pop();

  }

}

​

/*-----------------------------------------------------------------------------------------*/

//Boat - Interactive Object

​

class Boat {

  constructor(){

    this.x = 400;

    this.y = 280;

    this.w = 180;

    this.h = 100;

    this.speed = 1;

  }

  body() {

    image(boatImg, this.x, this.y, this.w, this.h);

  }

  //Interaction when player is near the boat

  interaction() {

    if (avatar.x > this.x - this.w/2 - avatar.w/2 && avatar.x < this.x  + this.w/2 + avatar.w/2 && avatar.y > this.y - this.w/2 - avatar.w/2 && avatar.y < this.y  + this.w/2 + avatar.w/2 && onBoard == false) { //Display response when player is near the boat

      displayText(300, "A boat! Maybe we can use this. \nPress F to board the boat.");

      if (keyIsDown(70)) { //Let player board the boat

        onBoard = true;

        collectSound.play();

        avatar.x = 535; //Move avatar to boat

        avatar.y = 280; //Move avatar to boat

        creature.x = 410; //Move creature to boat

        creature.y = 205; //Move creature to boat

      }

    }

  }

  move() {

    if (onBoard == true) {

      if (keyIsDown(39)) { //Move boat forward

        this.x+=this.speed;

      }

      if (keyIsDown(37) && this.x >= 0 && end == false) { //Move boat backward

        this.x--;

        if (sceneNum == 3 && this.x < 400) { //Stop boat from moving on to land

          this.x = 400;

        }

      }

      if (sceneNum == 4 && this.x > 210 && end == false) { //Stop boat from moving until player let go of the orbs

        this.x = 210;

      }

    }

  }

}

/*-----------------------------------------------------------------------------------------*/

//Change the scene

​

function switchScene() { 

  switch(sceneNum) {

    case 0: //Scene 1

      image(scene1, 0, 0); //Scene 1 background

      break;

    case 1: //Scene 2

      image(scene2, 0, 0); //Scene 2 background

​

      //Eyes

      if (sceneNum == 1) {

        for (let i = 0; i < eyesNum; i++) {

          eyes[i].body();

          eyes[i].checkProximity();

        }

      }

      break;

    case 2: //Scene 3

      image(scene3, 0, 0); //Scene 3 background

      //Glass Orbs

      break;

    case 3: //Scene 4

      image(scene4, 0, 0); //Scene 4 background

      break;

    case 4: //Scene 5

      image(scene5, 0, 0); //Scene 5 background

      break;

  }

}

​

/*-----------------------------------------------------------------------------------------*/

//Display inventory box that houses collected object

​

function displayInventoryBox() { 

  image(inventBoxImg, 50, 25); //Inventory box

  push();

  imageMode(CENTER);

  image(inventImg, 50, 50); //Inventory icon

  pop();

}

​

/*-----------------------------------------------------------------------------------------*/

//Use voice volume as light

​

function voiceReaction(x, y) { 

  voiceVol = mic.getLevel(); //Player's voice volume

  push();

  blendMode(SOFT_LIGHT);

  ellipse(x, y, voiceVol*300, voiceVol*300); //Light

  pop();

}

​

/*-----------------------------------------------------------------------------------------*/

//Let player use click on objects in inventory to use

​

function mousePressed() {

  //Respond to click on mask in inventory box

  if (sceneNum > 0 && mask.x == 145 && mask.y == 50 && mouseX < mask.x + mask.w/2 && mouseX > mask.x - mask.w/2 && mouseY < mask.y + mask.w/2 && mouseY > mask.y - mask.w/2){ //Let player click on mask in inventory box to equip

    if (maskInUse == false) { //Click to equip mask

      useSound.play();

      maskInUse = true;

    } else if (maskInUse == true) { //Click again to remove mask

      useSound.play();

      maskInUse = false;

    }

  }

  //Respond to click on flower in inventory box 

  if (avatar.x > creature.x - 50 && avatar.x < creature.x + creature.w + 50 && creatureInteract == true && sceneNum == 1 && flower.x == 110 && flower.y == 50 && mouseX < flower.x + flower.w/2 && mouseX > flower.x - flower.w/2 && mouseY < flower.y + flower.w/2 && mouseY > flower.y - flower.w/2){ //Let player click on flower in inventory box to give to creature

    if (flowerInUse == false) { //Click to give flower to creature

      useSound.play();

      flowerInUse = true;

    }

  }

  //Respond to click on orbs in inventory box 

  for (i = 0; i < orbs.length; i++) {

    if (onBoard == true && sceneNum == 4 && boat.x == 210 && mouseX < orbs[i].x + orbs[i].w/2 && mouseX > orbs[i].x - orbs[i].w/2 && mouseY < orbs[i].y + orbs[i].w/2 && mouseY > orbs[i].y - orbs[i].w/2){ //Let player click on orbs in inventory box to throw away

      if (orbsInUse == false) { //Click to get orbs out of inventory box

        useSound.play();

        orbsInUse = true;

      }

    }

  }

}

​

/*-----------------------------------------------------------------------------------------*/

//Display Text

​

function displayText(textBoxW, response) {

  push(); //Start center rectMode

  //rectMode(CENTER);

  imageMode(CENTER);

  image(textFrameImg, width/2, height/2, textBoxW, 50);

  //rect(width/2, height/2, textBoxW, 50); //Response text box appears

  fill(82, 0, 204);

  textFont('COURIER');

  textAlign(CENTER);

  text(response, width/2, height/2);

  pop(); //Stop center rectMode

}

​

/*-----------------------------------------------------------------------------------------*/

//Let player press F to interact with creature

​

function keyPressed() {

  if (avatar.x > creature.x - 50 && avatar.x < creature.x + creature.w + 50 && maskInUse == true && creatureInteract == false && keyCode == 70) { 

    collectSound.play();

    creatureInteract = true;

  }

}

​

/*-----------------------------------------------------------------------------------------*/

//Let player press R to restart the game at the end

​

function keyReleased() {

  if (keyCode == 82 && end == true) {

    collectSound.play();

    sceneNum = 0;

    maskInUse = false;

    flowerInUse = false;

    creatureInteract = false;

    onBoard = false;

    orbsInUse = false;

    end = false;

    inventory.splice(0, inventory.length);  

    avatar.x = 40;

    avatar.y = 350;

    avatar.speed = 5;

    flower.x = 400;

    flower.y = 350;

    flower.w = 30;

    flower.h = 30;

    boat.x = 400;

    boat.y = 280;

    mask.x = 300;

    mask.y = 350;

    creature.x = 400;

    creature.y = 275;

    for (let i = 0; i < orbsNum; i++) { //Recreate the orbs again

      orbs[i] = new Orb(i*100 + 100, 330);

    }

  }

}