let flower;

let wall;

let lantern;

let stage;

let street;

let table;

let tea;

let pot;

let painting_1;

let painting_2;

​

let opera;

​

let arrow;

​

let notice;

​

let quiz;

​

let scene1 = true;

let scene2 = false;

let scene3 = false;

let scene4 = false;

let scene5 = false;

let scene6 = false;

​

let button_1; // yes button for challenge

let button_2; // no button for challenge

let button_3; // first choice

let button_4; // second choice

let button_5; // next button in challenge

​

// this hid these three buttons initially

let button_3_x = -12000;

let button_4_x = -12000;

let button_5_x = -12000;

​

// the stage at the theater is a class

class Stage {

  constructor() {}

​

  drawStage() {

    noStroke();

​

    //drawing the floor and the carpet

    fill("rgb(195,75,47)");

    quad(200, 150, 840, 150, 800, 420, 160, 420);

    stroke(0);

    strokeWeight(3);

    noStroke();

    fill("rgb(113,21,0)");

    rect(160, 420, 640, 30);

    noStroke();

    quad(840, 150, 843, 160, 800, 450, 800, 420);

    fill("rgb(75,147,122)");

    quad(300, 200, 720, 200, 690, 370, 270, 370);

    noFill();

​

    //this is drawing the flower on the carpet

    flower.resize(150, 0);

    push();

    tint(255, 180);

    translate(425, 370);

    rotate(180);

    image(flower, 0, 0);

    pop();

​

    //the wall

    fill(255, 178, 0);

    rect(200, 0, 640, 150);

    wall.resize(300, 0);

    image(wall, 220, -60);

​

    //the character

    character.resize(250, 0);

    image(character, 460, 50);

​

    // pillars

    push();

    fill("rgb(195,75,47)");

    rect(160, 450, 25, 65);

    rect(775, 450, 25, 65);

    pop();

  }

}

​

// the fence before the stage is also a class

class Fence {

  constructor(x, y) {

    this.x = x;

    this.y = y;

  }

​

  drawFence() {

    noStroke();

    fill("rgb(113,21,0)");

    circle(this.x, this.y, 10);

    rect(this.x - 5, this.y + 5, 10, 80);

    rect(this.x + 5, this.y + 5, 105, 5);

    rect(this.x + 5, this.y + 30, 30, 5);

    rect(this.x + 5, this.y + 50, 30, 5);

    push();

    noFill();

    stroke("rgb(113,21,0)");

    strokeWeight(4);

    rect(this.x + 35, this.y + 27, 40, 30);

    pop();

    rect(this.x + 43, this.y + 10, 5, 15);

    rect(this.x + 63, this.y + 10, 5, 15);

    rect(this.x + 43, this.y + 58, 5, 27);

    rect(this.x + 63, this.y + 58, 5, 27);

    rect(this.x + 76, this.y + 30, 35, 5);

    rect(this.x + 76, this.y + 50, 35, 5);

  }

}

​

function preload() {

  character = loadImage("character.png");

  flower = loadImage("flower.png");

  wall = loadImage("wall.png");

  lantern = loadImage("lantern.png");

  street = loadImage("street.png");

  table = loadImage("Wood.jpg");

  tea = loadImage("tea.png");

  pot = loadImage("pot.png");

  painting_1 = loadImage("painting 1.jpg");

  painting_2 = loadImage("painting 2.png");

​

  arrow = loadImage("arrow.png");

​

  opera = loadSound("opera.mp3");

​

  notice = loadFont("Gold Lines Trial.otf");

​

  quiz = loadImage("quiz.png");

}

​

function setup() {

  createCanvas(1100, 600);

  angleMode(DEGREES);

  background(220);

​

  stage_obj = new Stage();

}

​

let angle = 0;

let lan_speed = 0.3; //speed of lanterns swing

​

let fence = [];

let fence_x = 165;

​

let character_x = 0; // the initial pos of the character

let character_speed = 1;

let character_dir = 0; // 0 left; 1 right

​

let questions = [

  "Read the Opera Today and Challenge Yourself Here!",

  "What's the name of the opera today?",

  "What is the real name of the Hegemon King?",

  "What is the last name of the King's Wife?",

  "Wow! You now know about Peking Opera!",

];

let question = 0;

let choices = [

  ["The Drunken Concubine", "The Hegemon-King Bids His Lady Farewell"],

  ["Zhang Fei", "Xiang Yu"],

  ["Zhang", "Yu"],

];

let choice = 0;

​

let opacity = 0;  // background opacity of the choices in challenge

​

function draw() {

  textAlign(LEFT);

​

  if (scene1 === true) {

    street.resize(width, height);

    image(street, 0, 0);

    textSize(42);

    fill("rgb(255,124,88)");

    textFont(notice);

    text("Peking Opera Village", 270, 220);

    textSize(20);

    text("Click the Arch above to enter the village!", 230, 550);

    noFill();

​

    //change the cursor to hand when clickable

    if (mouseX >= 296 && mouseX <= 485) {

      if (mouseY >= 336 && mouseY <= 510) {

        cursor(HAND);

      } else {

        cursor(ARROW);

      }

    } else {

      cursor(ARROW);

    }

  }

​

  //the scene 2 (insdie the theater)

  if (scene2 === true) {

    cursor(ARROW);

    background("rgb(221,196,152)");

    painting_1.resize(130, 0);

    image(painting_1, 45, -20);

    painting_2.resize(160, 0);

    image(painting_2, 890, 0);

    textSize(17);

    textFont(notice);

    text("Opera Today", 945, 55, 40, 40);

​

    // this draws the floor

    push();

    fill("rgb(118,75,62)");

    strokeWeight(1);

    stroke(0);

    translate(-100, 0);

    let floor_x = 0;

    let floor_y = 195;

    for (let n = 0; n < 8; n++) {

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

        rect(floor_x, floor_y, 150, 70);

        floor_x += 150;

      }

      floor_y += 70;

      floor_x = (n + 1) * 20;

    }

    pop();

​

    stage_obj.drawStage();

    // draw the entire fence before the stage

    if (fence.length === 0) {

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

        fence[i] = new Fence(fence_x, 335);

        fence_x += 105;

      }

    }

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

      fence[i].drawFence();

    }

    fill("rgb(113,21,0)");

    circle(797, 335, 10);

    rect(795, 340, 6, 80);

​

    lantern.resize(55, 0);

    // the left lantern

    push();

    translate(690, 0);

    rotate(angle);

    image(lantern, -25, 0);

    pop();

​

    // the right lantern

    push();

    translate(780, 0);

    rotate(angle);

    image(lantern, -25, 0);

    pop();

​

    // the swing effect of the lantern

    angle += lan_speed;

    if (angle >= 10) {

      lan_speed = -lan_speed;

    } else if (angle <= -10) {

      lan_speed = -lan_speed;

    }

​

    //draw the three tables and the tea and pot

    table.resize(200, 200);

    image(table, 720, 470);

    table.resize(200, 200);

    image(table, 400, 520);

    tea.resize(20, 0);

    image(tea, 420, 564);

    table.resize(200, 200);

    image(table, 80, 490);

    pot.resize(40, 0);

    push();

    rotate(-8);

    image(pot, 150, 562);

    pop();

​

    // button back to the home page

    arrow.resize(30, 30);

    image(arrow, 20, 320);

​

    // the board that the quiz questions are on

    quiz.resize(60, 60);

    image(quiz, 750, 490);

​

    //change the cursor to hand when clickable

    if (mouseX >= 28 && mouseX <= 48) {

      // back button

      if (mouseY >= 320 && mouseY <= 348) {

        cursor(HAND);

      }

    } else if (mouseX >= 200 && mouseX <= 838) {

      if (mouseY >= 0 && mouseY <= 418) {

        // stage

        cursor(HAND);

      }

      if (mouseX >= 755 && mouseX <= 805) {

        //paper on table

        if (mouseY >= 493 && mouseY <= 545) {

          cursor(HAND);

        }

      }

    } else if (mouseX >= 45 && mouseX <= 170) {

      //painting on the left

      if (mouseY >= 0 && mouseY <= 158) {

        cursor(HAND);

      }

    } else if (mouseX >= 900 && mouseX <= 1050) {

      // opera today

      if (mouseY >= 10 && mouseY <= 105) {

        cursor(HAND);

      }

    } else {

      cursor(ARROW);

    }

  }

​

  // scene 3, focus on stage

  if (scene3 === true) {

    cursor(HAND);

    // play the peking opera

    if (!opera.isPlaying()) {

      opera.setVolume(0.2);

      opera.play();

    }

    background("rgb(221,196,152)");

    noStroke();

​

    //drawing the floor and the carpet

    fill("rgb(195,75,47)");

    quad(200, 150, 840, 150, 800, 420, 160, 420);

    stroke(0);

    strokeWeight(3);

    noStroke();

    fill("rgb(113,21,0)");

    rect(160, 420, 640, 30);

    noStroke();

    quad(840, 150, 843, 160, 800, 450, 800, 420);

    fill("rgb(75,147,122)");

    quad(300, 200, 720, 200, 690, 370, 270, 370);

    noFill();

​

    //flower on the floor

    flower.resize(150, 0);

    push();

    tint(255, 180);

    translate(425, 370);

    rotate(180);

    image(flower, 0, 0);

    pop();

​

    //the character

    character.resize(250, 0);

    push();

    translate(460, 50);

​

    if (character_x <= -110) {

      scale(-1, 1);

    }

    if (character_x <= -230) {

      scale(-1, 1);

      character_x = 10;

    }

    image(character, character_x, 0);

    character_x -= character_speed;

    print(character_x);

    pop();

  }

​

  if (scene4 === true) {

    background("rgb(221,196,152)");

    image(painting_1, 350, 50, 270, 430);

  }

​

  if (scene5 === true) {

    textAlign(LEFT);

    background("rgb(221,196,152)");

    textFont("Helvetica");

    textSize(25);

    text("Today's Opera", 350, 50);

    text("The Hegemon-King Bids His Lady Farewell", 350, 75);

    textSize(20);

    text(

      "The opera tells the story of Xiang Yu, the self-styled Hegemon-King of Western Chu who battled for the unification of China with Liu Bang, the eventual founder of the Han dynasty.",

      350,

      110,

      400,

      200

    );

    text(

      "In the play, Xiang Yu is surrounded by Liu Bang's forces and on the verge of total defeat, so he calls forth his horse and begs it to run away for the sake of its own safety. The horse refuses, against his wishes. He then calls for the company of his wife Consort Yu. Realizing the dire situation that has befallen them, she begs to die alongside her master, but he strongly refuses this wish. Afterwards, as he is distracted, Yu commits suicide with Xiang Yu's sword.",

      350,

      270,

      400,

      300

    );

  }

​

  if (scene6 === true) {

    cursor(ARROW);

    textAlign(CENTER);

    background("rgb(221,196,152)");

​

    textSize(42);

    text(questions[question], width / 2, 230);

​

    // only create these button once

    if (button_1 === undefined) {

      button_1 = createButton("Yes");

    }

​

    if (button_2 === undefined) {

      button_2 = createButton("No");

    }

​

    if (button_3 === undefined) {

      button_3 = createButton(choices[choice][0]);

    }

​

    if (button_4 === undefined) {

      button_4 = createButton(choices[choice][1]);

    }

    if (button_5 === undefined) {

      button_5 = createButton("Next");

    }

    button_5.size(80, 40);

    button_5.style("background-color", color(208, 219, 97, 0));

    button_5.position(button_5_x, 500);

​

    button_1.size(80, 40);

    button_2.size(80, 40);

    button_1.style("background-color", color(208, 219, 97));

    button_2.style("background-color", color(195, 75, 47));

    button_1.position(400, 350);

    button_2.position(600, 350);

​

    button_3.size(200, 40);

    button_4.size(200, 40);

    button_3.style("background-color", color(195, 75, 47, opacity));

    button_4.style("background-color", color(208, 219, 97, opacity));

    button_3.position(button_3_x, 350);

    button_4.position(button_4_x, 350);

​

    button_2.mousePressed(exitQuiz);

    button_1.mousePressed(quizQuestion);

    button_3.mousePressed(showAnswer);

    button_4.mousePressed(showAnswer);

    button_5.mousePressed(nextQuestion);

​

    if (question >= 4) {

      button_5.mousePressed(exitQuiz);

    }

  }

}

​

function mouseClicked() {

  // enter the village

  if (scene1 === true) {

    if (mouseX >= 296 && mouseX <= 485) {

      if (mouseY >= 336 && mouseY <= 510) {

        clear();

        scene1 = false;

        scene2 = true;

        return;

      }

    }

  }

  // the opera today

  if (scene4 === true) {

    clear();

    scene4 = false;

    scene2 = true;

    return;

  }

  // the painting on the left

  if (scene5 === true) {

    clear();

    scene5 = false;

    scene2 = true;

    return;

  }

  // the main theater scene

  if (scene2 === true) {

    if (mouseX >= 200 && mouseX <= 838) {

      if (mouseY >= 0 && mouseY <= 418) {

        clear();

        scene3 = true;

        scene2 = false;

        return;

      }

    }

    if (mouseX >= 45 && mouseX <= 170) {

      if (mouseY >= 0 && mouseY <= 158) {

        clear();

        scene4 = true;

        scene2 = false;

        return;

      }

    }

    if (mouseX >= 900 && mouseX <= 1050) {

      if (mouseY >= 10 && mouseY <= 105) {

        clear();

        scene5 = true;

        scene2 = false;

        return;

      }

    }

    if (mouseX >= 20 && mouseX <= 48) {

      if (mouseY >= 320 && mouseY <= 348) {

        clear();

        scene1 = true;

        scene2 = false;

        return;

      }

    }

​

    if (mouseX >= 755 && mouseX <= 805) {

      //paper on table

      if (mouseY >= 493 && mouseY <= 545) {

        clear();

        scene6 = true;

        scene2 = false;

        return;

      }

    }

  }

​

  // exit the playing scene of the opera on stage

  if (opera.isPlaying()) {

    clear();

    scene3 = false;

    scene2 = true;

    opera.stop();

    return;

  }

}

​

function quizQuestion() {

  question += 1;

  button_1.hide();

  button_2.hide();

  button_3_x = 300;

  button_4_x = 600;

}

​

function showAnswer() {

  opacity = 100;

  button_5_x = width / 2 - 30;

}

​

function nextQuestion() {

  question += 1;

  choice += 1;

  button_3.remove();

  button_3 = undefined;

  button_4.remove();

  button_4 = undefined;

  opacity = 0;

  button_5_x = -12000;

​

  if (question >= 4) {

    choice = 0;

    button_3_x = -12000;

    button_4_x = -12000;

    button_5_x = width / 2 - 30;

  }

}

​

// reset everything when the challenge is finished

function exitQuiz() {

  clear();

  scene6 = false;

  scene2 = true;

  button_1.remove();

  button_1 = undefined;

  button_2.remove();

  button_2 = undefined;

  button_3.remove();

  button_3 = undefined;

  button_4.remove();

  button_4 = undefined;

  button_5.remove();

  button_5 = undefined;

  question = 0;

​

  button_5_x = -12000;

  return;

}

​