class GameButton {

  //initializing the state of the button

  constructor(label) {

    this.label = label;

    this.x = 0;

    this.y = 0;

    this.width = 105;

    this.height = 30;

    this.visible = false;

  }

  //method to show button at specified coordinates

  show(x, y) {

    this.x = x;

    this.y = y;

    this.visible = true;

    fill("white");

    noStroke();

    rect(this.x, this.y, this.width, this.height);

    fill("black");

    textSize(13);

    textAlign(CENTER, CENTER);

    text(this.label, this.x + this.width / 2, this.y + this.height / 2);

    fill("white") //so trhat the text itself is white

    textSize(15); //so that the text itself has a size of 15

  }

  //method to hide button

  hide() {

    this.visible = false;

  }

​

  //method to identify if mouse is hovering over button

  isMouseOver() {

    return (

      this.visible &&

      mouseX > this.x &&

      mouseX < this.x + this.width &&

      mouseY > this.y &&

      mouseY < this.y + this.height

    );

  }

}

​

// Declaring all variables

let enterButton;

let suppliesButton;

let weaponButton;

let nightButton;

let morningButton;

let riverButton;

let forestButton;

let fishButton; 

let riverspiritsButton;

let next1Button;

let insideButton;

let outsideButton;

let trapButton;

let next2Button;

let forestspiritsButton;

let firefliesButton;

let playButton; 

let quitButton;

let screen = 0;

let village;

let weaponsvssupplies;

let rivervsforest;

let returnimage;

let pathtomountain;

let mountain;

let morningvsnight;

let firefliesvsforestspirits;

let dragon;

let fishvswaterspirits;

let music;

​

//Using the preload function to load all the image and the music

function preload() {

  village = loadImage("village.avif");

  weaponsvssupplies = loadImage("weapons vs supplies.jpg");

  rivervsforest = loadImage("river vs forest.jpeg");

  returnimage = loadImage("return.jpeg");

  pathtomountain = loadImage("path to mountain.jpeg");

  mountain = loadImage("mountain.jpeg");

  morningvsnight = loadImage("morning vs night.jpeg");

  firefliesvsforestspirits = loadImage("fireflies vs forest spirits.jpeg");

  dragon = loadImage("dragon.jpeg");

  fishvswaterspirits = loadImage("fish.jpeg");

  music = loadSound("Dragon-Castle(chosic.com).mp3");

}

​

function setup() {

  createCanvas(600, 500);

  fill("white")

  textAlign(CENTER);

  textSize(15);

  music.loop(); //so that music loops

​

  // Creating all buttons

  enterButton = new GameButton("Enter EverLand");

  suppliesButton = new GameButton("Supplies");

  weaponButton = new GameButton("Weapon");

  nightButton = new GameButton("Night");

  morningButton = new GameButton("Morning");

  riverButton = new GameButton("River");

  forestButton = new GameButton("Forest");

  fishButton = new GameButton("Fish");

  riverspiritsButton = new GameButton("River Spirits");

  next1Button = new GameButton("Next");

  insideButton = new GameButton("Inside");

  outsideButton = new GameButton("Outside");

  trapButton = new GameButton("Trap");

  next2Button = new GameButton("Next");

  forestspiritsButton = new GameButton("Forest Spirits");

  firefliesButton = new GameButton("Fireflies");

  playButton = new GameButton("Play Again");

  quitButton = new GameButton("Quit");

}

​

function draw() {

  //calling the function that displays the screen based on the screen assignment which happens when the mouse is pressed

  if (screen === 0) {

    showStartScreen();

  } else if (screen === 1) {

    showBirthdayScreen();

  } else if (screen === 11) {

    showSuppliesScreen();

  } else if (screen === 12) {

    showWeaponScreen();

  } else if (screen === 111 || screen === 121) {

    showNightScreen();

  } else if (screen === 112 || screen === 122) {

    showMorningScreen();

  } else if (screen === 1111 || screen === 1121 || screen === 1211 || screen === 1221) {

    showRiverScreen();

  } else if (screen === 1112 || screen === 1122 || screen === 1212 || screen === 1222) {

    showForestScreen();

  } else if (screen === 11000 || screen === 12000 || screen === 21000 || screen === 22000) {

    showNextScreen();

  } else if (screen === 5000) {

    showDragonCaveScreen();

  } else if (screen === 5001) {

    showInsideScreen();

  } else if (screen === 5002) {

    showOutsideScreen();

  } else if (screen === 5003) {

    showTrapScreen();

  } else if (screen === 262626) {

    showFinalScreen();

  }

}

​

//function to hide all buttons which i will use when switching screens so that the previous buttons don't appear on the screen

function hideAllButtons() {

  enterButton.hide();

  suppliesButton.hide();

  weaponButton.hide();

  nightButton.hide();

  morningButton.hide();

  riverButton.hide();

  forestButton.hide();

  fishButton.hide();

  riverspiritsButton.hide();

  next1Button.hide();

  insideButton.hide();

  outsideButton.hide();

  trapButton.hide();

  next2Button.hide();

  forestspiritsButton.hide();

  firefliesButton.hide();

  playButton.hide();

  quitButton.hide();

}

​

//assigns screen with next number based on the previous screen and the button pressed and also hides all buttons so that they aren't layered on top of one another

function mousePressed() {

  if (screen === 0 && enterButton.isMouseOver()) {

    screen = 1;

    hideAllButtons();

  } else if (screen === 1) {

    if (suppliesButton.isMouseOver()) {

      screen = 11;

      hideAllButtons();

    }else if (weaponButton.isMouseOver()) {

      screen = 12;

      hideAllButtons();

    }

  } else if (screen === 11 || screen === 12) {

    if (nightButton.isMouseOver()) {

      screen = screen * 10 + 1;

      hideAllButtons();

    }else if (morningButton.isMouseOver()) {

      screen = screen * 10 + 2;

      hideAllButtons();

    }

  }else if (screen === 111 || screen === 112 || screen === 121 || screen === 122) {

    if (riverButton.isMouseOver()) {

      screen = screen * 10 + 1;

      hideAllButtons();

    } else if (forestButton.isMouseOver()) {

      screen = screen * 10 + 2;

      hideAllButtons();

    }

  } else if (screen === 1111 || screen === 1121 || screen === 1211 || screen === 1221) {

    if (fishButton.isMouseOver()) {

      screen = 11000;

      hideAllButtons();

    } else if (riverspiritsButton.isMouseOver()) {

      screen = 12000;

      hideAllButtons();

    }

  } else if (screen === 1112 || screen === 1122 || screen === 1212 || screen === 1222) {

    if (firefliesButton.isMouseOver()) {

      screen = 21000;

      hideAllButtons();

    } else if (forestspiritsButton.isMouseOver()) {

      screen = 22000;

      hideAllButtons();

    }

  } else if (screen === 11000 || screen === 12000 || screen === 21000 || screen === 22000) {

    if (next1Button.isMouseOver()) {

      screen = 5000;

      hideAllButtons();

    }

  } else if (screen === 5000) {

    if (insideButton.isMouseOver()) {

      screen = 5001;

      hideAllButtons();

    } else if (outsideButton.isMouseOver()) {

      screen = 5002;

      hideAllButtons();

    } else if (trapButton.isMouseOver()) {

      screen = 5003;

      hideAllButtons();

    }

  } else if (screen === 5001 || screen === 5002 || screen === 5003) {

    if (next2Button.isMouseOver()) {

      screen = 262626;

      hideAllButtons();

    }

  } else if (screen === 262626) {

    if (playButton.isMouseOver()) {

      restartGame();

    } else if (quitButton.isMouseOver()) {

      quitGame();

    }

  }

}

​

//the following functions are responsible for displaying the screens and the buttons

function showStartScreen() {

  background(village);

  text("WELCOME TO EVERLAND\nThe tiny village surrounded by icy mountains, rivers and the greenest of forests.\n A village tucked away hidden from the rest of the world.\n The village where magic exists and the only visitor is a dragon that\ntaunts the villagers, steals their gold and children, and burns their crops.\n In the village lives a girl named Eden.\n A girl destined by prophecy to slay the dragon once she turned eighteen.", width / 2, height / 2 - 100);

  enterButton.show(width / 2-52.5, height / 2 + 100);

}

​

function showBirthdayScreen() {

  background(weaponsvssupplies);

  text("EDEN'S EIGHTEENTH BIRTHDAY\nEden has awaited this moment her entire life.\n Today she will complete the prophecy.\n Today she will slay the dragon that has long tormented her family and friends.\n Eden must prepare for her journey right after blowing out the candles.\n The question is:\n Will she take a backpack full of supplies and no weapon?\n Or will she travel light and take a weapon?", width / 2, height /2 -100);

  suppliesButton.show(width / 2 - 205, height / 2 + 100);

  weaponButton.show(width / 2 + 100, height / 2 + 100);

}

​

function showSuppliesScreen() {

  background(morningvsnight);

  text("CONGRATS YOU CHOSE THE SUPPLIES\nEden now has food and medicine in case she gets hungry or sick.\n Now you must decide:\n Will Eden get a good night's rest and travel in the morning?\n Or will she get a headstart and travel at night?", width / 2, height / 2 - 100);

  nightButton.show(width / 2 - 205, height / 2 + 100);

  morningButton.show(width / 2 + 100, height / 2 + 100);

}

​

function showWeaponScreen() {

  background(morningvsnight);

  text("CONGRATS YOU CHOSE THE WEAPON\nEden now has a sword and a shield to kill the dragon.\n Now you must decide:\n Will Eden get a good night's rest and travel in the morning?\n Or will she get a headstart and travel at night?", width / 2, height / 2 - 100);

  nightButton.show(width / 2 - 205, height / 2 + 100);

  morningButton.show(width / 2 + 100, height / 2 + 100);

}

​

function showNightScreen() {

  background(rivervsforest);

  text("CONGRATS YOU PICKED NIGHT!\nAfter saying goodbye to her friends and family,\n Eden waits till everyone goes to bed and then sneaks out at midnight.\n If she moves quickly,\n she can reach the dragon while it's still sleeping and kill it easily.\n As she leaves the village,\n she is now faced with another choice.\n Which path must she take?\n The path to the river?\n Or the path to the forest?",width / 2, height / 2 - 100);

  riverButton.show(width / 2 - 205, height / 2 + 100);

  forestButton.show(width / 2 + 100, height / 2 + 100);

}

​

function showMorningScreen() {

  background(rivervsforest);

  text("CONGRATS YOU PICKED MORNING!\nAfter saying goodbye to her friends and family Eden goes to bed early to rest.\n Waking up in the morning she is now faced with another decision..\n Which path must she take?\nThe path to the river or the path to the forest?",width / 2, height / 2 - 100);

  riverButton.show(width / 2 - 205, height / 2 + 100);

  forestButton.show(width / 2 + 100, height / 2 + 100);

}

​

function showRiverScreen() {

  background(fishvswaterspirits);

  if (screen === 1111 || screen === 1121){

    text("Eden follows the gentle flow of the river,\n encountering serene meadows and vibrant wildlife.\n She decides to make a sword using tree barks\n and the shards of glass she found scatterred on the grass.\n Along the way, she meets a wise old woman.\n Eden then asks the woman how she can reach the dragon.\n The woman answers giving Eden 2 choices either\nFollow the fish\nConsult the river spirits", width / 2, height / 2 - 100);

  }else if (screen === 1211 || screen === 1221){

    text("Eden follows the gentle flow of the river,\n encountering serene meadows and vibrant wildlife.\n Along the way, she meets a wise old woman\n who gives Eden some food and supplies.\n Eden then asks the woman how she can reach the dragon.\n The woman answers giving Eden 2 choices either\nFollow the fish\nConsult the river spirits", width / 2, height / 2 - 100);

  }

  riverspiritsButton.show(width/2-205, height/2+100);

  fishButton.show(width / 2 + 100, height / 2 + 100);

}

​

function showForestScreen() {

  background(firefliesvsforestspirits);

  if (screen === 1112 || screen === 1122){

    text("Eden enters the Enchanted Forest,\n where the trees are ancient and the air is thick with magic.\n She meets a group of travelers who give her some weapons.\n Eden then asks them about how she can reach the dragon.\n The travelers give her 2 choices either\nFollow the fireflies\nConsult the forest spirits", width / 2, height / 2 - 100);

  }else if (screen === 1212 || screen === 1222){

    text("Eden enters the Enchanted Forest,\n where the trees are ancient and the air is thick with magic.\n She meets a group of travelers who give her some food and clothes.\n Eden then asks them about how she can reach the dragon.\n The travelers give her 2 choices either\nFollow the fireflies\nConsult the forest spirits", width / 2, height / 2 - 100);

  }

  forestspiritsButton.show(width / 2 - 205, height / 2 + 100);

  firefliesButton.show(width / 2 + 100, height / 2 + 100);

}

​

​

function showNextScreen() {

  background(pathtomountain);

    text("After hours of walking,\n Eden has now reached the mountain where the dragon resides.\n Using her supplies,\n she starts climbing to reach the dragon's cave.", width / 2, height / 2 - 100);

​

  next1Button.show(width / 2-52.5, height / 2 + 100);

}

​

function showDragonCaveScreen() {

  background(mountain);

  text("After hours of climbing Eden finally reaches the dragon's cave.\n Now she must decide how she will kill it.\n Will she:\nLure the monster outside\nConfront the monster inside\nSet a trap", width / 2, height / 2 - 100);

  outsideButton.show(width / 2 - 205, height / 2 + 100);

  insideButton.show(width / 2-52.5, height / 2 + 100);

  trapButton.show(width / 2 + 100, height / 2 + 100);

}

​

function showInsideScreen() {

  background(dragon);

  text("Eden charges into the cave, her heart pounding.\n In the darkness,\n she relies on her training and her small size\n to gain the upper hand and slay the dragon",width / 2, height / 2 - 100);

  next2Button.show(width / 2-52.5, height / 2 + 100);

}

​

function showOutsideScreen() {

  background(dragon);

  text("Eden uses her wits to draw the monster outside.\n Using the open space and her small size to her advantage,\n Eden is able to outmaneuver the beast and kill it.", width / 2, height / 2 - 100);

  next2Button.show(width / 2-52.5, height / 2 + 100);

}

​

function showTrapScreen() {

  background(dragon);

  text("Eden sets a cunning trap\n that ensnares the monster as it emerges from the cave.\n With the monster weakened,\n she uses her sword to deliver the final blow.", width / 2, height / 2 - 100);

 next2Button.show(width / 2-52.5, height / 2 + 100);

}

​

function showFinalScreen() {

  background(village);

  text("In the end,\n no matter the choices Eden made\n her bravery and determination lead her to victory.\n She slayed the monster and broke the curse over Everland.\nEden finally returns home\n and the villagers welcome her back with open arms,\n celebrating her as a hero.", width / 2, height / 2 - 100);

  playButton.show(width / 2 - 205, height / 2 + 100);

  quitButton.show(width / 2 + 100, height / 2 + 100);

}

//upon clicking on the play button this function is called and it restarts the game

function restartGame() {

  screen = 0;

  hideAllButtons();

  showStartScreen();

}

//upon clicking the quit button, this function is called and it termniates the program

function quitGame() {

  remove();

}

​