//ANGEL DESIGNS A DRESS - TITLE

// 3 LEVELS - IN GAME 

//Reference - https://youtu.be/OMoVcohRgZA // for making the objects disappear just like the snake game. 

// Reference = Xin Xin's video tutorial for - classes & objects, Array of objects, Switch case statement, keyIsDown, keyIsPressed, splice.

​

//Game interactions = mouse press to play and pause music for game, mouse and key press to interact during game levels.

​

​

let mainchar;

let angel;

let fabric;

let fcuts;

let scenenum = 0;

let scenetries = 0;

let fabricsCollected = 0;

let fabricCuts = 0;

let fps = 60;

let sec = 0;

let frame = 0;

let sceneObjects = [];

let cutObjects = [];

let angelfont; //Font used: Xanh Mono from Google Fonts. 

// Font link: https://fonts.google.com/specimen/Xanh+Mono

var song;

​

function preload() {

​

  angelfont = loadFont('font/angelfont.ttf');

  mainchar = loadImage('scenes/Angel1.png');

  mainchar2 = loadImage('scenes/angel2.png');

  newfabric1 = loadImage('scenes/newfabric1.png');

  newfabric2 = loadImage('scenes/newfabric2.png');

  newfabric3 = loadImage('scenes/newfabric3.png');

  newfabric4 = loadImage('scenes/newfabric4.png');

  newfabric5 = loadImage('scenes/newfabric5.png');

  newfabric6 = loadImage('scenes/newfabric6.png');

  newfabric7 = loadImage('scenes/newfabric7.png');

  newfabric8 = loadImage('scenes/newfabric8.png');

  newfabric9 = loadImage('scenes/newfabric9.png');

  newfabric10 = loadImage('scenes/newfabric10.png');

  newfabric11 = loadImage('scenes/newfabric11.png');

  newfabric12 = loadImage('scenes/newfabric12.png');

  pmap = loadImage('scenes/map.png');

  sewingstudio = loadImage('scenes/sewingstudio.png');

  thread = loadImage('scenes/thread.png');

  patternmaster= loadImage('scenes/patternm.png');

  measuringtape= loadImage('scenes/mt.png');

  needles= loadImage('scenes/needles.png');

  dress= loadImage('scenes/dress.png');

 dress2= loadImage('scenes/dress2.png');

//array for collecting fabrics

  fabricArray = [newfabric1, newfabric2, newfabric3, newfabric4, newfabric5, newfabric6, newfabric7, newfabric8, newfabric9, newfabric10, newfabric11, newfabric12];

  //array for cutting & making fabrics

  cutArray = [thread, patternmaster,measuringtape,  needles, newfabric5, newfabric6, newfabric7, newfabric8, newfabric9, newfabric10, newfabric11, newfabric12];

  //background for london scene

  londonelements = loadImage('scenes/londonelements.png');

  londonsky = loadImage('scenes/londonsky.png');

  // background music for game = https://www.zapsplat.com/sound-effect-category/game-music-and-loops/

  song = loadSound("music/bgmusic.mp3");

  song.loop();

}

​

//mouse-press to play music 

function mousePressed() {

  if (song.isPlaying()) {

    // .isPlaying() returns a boolean

    song.pause(); // .play() will resume from .pause() position

​

  } else {

    song.play();

​

  }

}

​

function setup() {

  createCanvas(600, 470);

  angel = new mainCharacter(300, 350, 90, 80);

  angel2 = new mainCharacter(300, 350, 90, 90);

  frameRate(fps); //framerate per second.

  fabricLocation();

  cutLocation();

  textFont(angelfont);

}

//Splice function = adding into the array. Xin Xin's video tutorial = https://youtu.be/jhqZerkWkXc

​

//randomly appearing fabrics which are to be collected in scene1.

function getRandomFromFabricArray() { // get a random fabric from the array

  var randomIndex = Math.floor(Math.random() * fabricArray.length);

  return fabricArray.splice(randomIndex, 1)[0];

}

//randomly appearing fabrics which are to be collected in scene2.

function getRandomFromCutArray() { // get a random cut from the array

  var randomIndex = Math.floor(Math.random() * cutArray.length);

  return cutArray.splice(randomIndex, 1)[0];

}

//randomly appearing fabrics location in scene1.

function fabricLocation() { // get random fabric

  /*floor function = takes the whole number - for example - 9.9,it will round off the figure to nearest whole number. And here is the Reference for it = https://github.com/EQuimper/CodeChallenge/blob/master/javascript/FreeCodeCamps/Basic%20JavaScript/Generate%20Random%20Whole%20Numbers%20with%20JavaScript.md*/

  let x = floor(random(50, width - 50));

  let y = floor(random(50, height - 50));

  fabric = new sceneObject(x, y, 30, 30, getRandomFromFabricArray(false));

​

}

//randomly appearing fabrics location in scene2.

function cutLocation() { // get random cut

  let x = floor(random(50, width - 50));

  let y = floor(random(50, height - 50));

  fcuts = new sceneObject(x, y, 30, 30, getRandomFromCutArray(true));

​

}

​

function draw() {

  background(255);

  //switch cases used to jump to next scenes.

​

  switch (scenenum) {

//INTRO-Game

    case 0:

      push();

      background(0);

​

      fill(255);

      textAlign(CENTER);

      textSize(20);

      text('Shivanjali Verma', width / 2, height / 2);

      text('presents', width / 2, height / 2 + 20);

      textSize(40);

      text('ANGEL DESIGNS A DRESS', width / 2, height / 2 + 100);

      textSize(16);

      text('Press MOUSE to proceed', width / 2, height / 2 + 200);

      // }

      if (mouseIsPressed) {

        console.log('key is pressed')

        scenenum+=1;

      }

      pop();

      break;

​

    case 1:

//My introduction about the game scenes.

      push();

      background(0);

      let s = `Hello! I am Angel. I'm a fashion design student at the University of Portsmouth, UK. My day-to-day life involves going to class, and my assignments are creating dresses! Whenever I need to make new dresses, I visit London to buy fabrics from different shops.

​

Help me collect fabrics & items to sew, by using your KEYBOARD KEYS to make me travel around London, so I can collect fabrics to design my outfits. You will need to collect 10 fabrics before I can go back to my university. Keep an eye out - the fabrics may be hidden across London. Good luck!`;

      fill(255);

      textSize(14);

      textLeading(26);

      textAlign(CENTER);

      translate(-150, -130);

      text(s, width / 2, height / 3, 300, 600);

      textSize(14);

      textAlign(CENTER);

      text('Press ANY KEY to proceed', width / 2, height / 2 + 330);

      if (keyIsPressed) {

        scenenum++;

      }

      pop();

      break;

//Scene 1 collect fabric swatches 

    case 2:

      push();

      console.log('scene 2');

      image(londonsky, 0, 0, 600, 470);

      image(londonelements, 0, 0, 600, 500);

      angel.angel(mainchar); //calling from maincharacter class

      angel.move(); //calling from maincharacter class

      if (angel.eat(fabric)) {

        console.log('EATEN');

        fabricLocation(); //calling function above

        fabricsCollected++; //increasing the collected fabrics

      }

      fill(0);

      textSize(20);

      textAlign(LEFT);

      text(`Fabrics: ${fabricsCollected} / 10`, 20, 20);

      fabric.body();

      if (fabricsCollected == 1) {

        scenenum++;

      }

      pop();

      break;

​

    case 3:

      push();

      background(0)

      let ss = `Level 2! Drag your mouse to take Angel from the Portsmouth train station to her university building, so she can cut, sew and make her garment! If you leave the mouse, or stray from the path, you will be back where you started. Good luck!`;

      fill(255);

      textSize(18);

      textLeading(26);

      textAlign(CENTER);

      translate(-150, 0);

      text(ss, width / 2, height / 3, 300, 600);

      textSize(16);

      textAlign(CENTER);

      text('Press MOUSE to proceed', width / 2, height / 2 + 200);

      if (mouseIsPressed) {

        scenenum++;

      }

      pop();

      break;

​

    case 4:

      //game level 2 = drag the main char to the location.

      push();

      image(pmap, 0, 0, 600, 470);

      console.log(`x,y : ${mouseX}, ${mouseY}`);

      angel2.angel(mainchar2);

      angel2.drag(scenetries);

      pop();

      break;

​

    case 5:

      //level 3 breif 

      push();

      background(0);

      let sss = `Level 3! Use your keyboard keys to move Angel around her studio, and look for fabrics, pattern master (scale), purple thread, needles to cut. Good luck!`;

      fill(255);

      textSize(18);

      textLeading(26);

      textAlign(CENTER);

      translate(-150, 0);

      text(sss, width / 2, height / 3, 300, 600);

      textSize(16);

      textAlign(CENTER);

      text('Press ANY KEY to proceed', width / 2, height / 2 + 200);

      if (keyIsPressed) {

        scenenum++;

      }

      pop();

      break;

​

    case 6:

      push();

      console.log('scene 2');

//angel2 is the second image of main char.

      image(sewingstudio, 0, 0, 600, 470);

      angel2.angel(mainchar2); //calling from maincharacter class

      angel2.move(); //calling from maincharacter class

​

      if (angel2.eat(fcuts)) {

        console.log('EATEN');

        cutLocation(); //calling the cut location, to put location of items

        fabricCuts++; //fabrics collected or say items collected

      }

      fill(0);

      textSize(20);

      textAlign(LEFT);

      text(`Cuts: ${fabricCuts} / 10`, 20, 20);

      fcuts.body();

      if (fabricCuts == 1) {

        scenenum++;

      }

      pop();

      break;

 case 7:

      //angels designs 

      push();

​

      // background(200,255,80);

      let final = `WOW, YOU GOT THERE! WELL DONE, YOU MADE IT TO THE END!`;

      fill(255);

      textSize(18);

      textLeading(26);

      textAlign(CENTER);

      translate(-150, 0);

      text(final, width / 2, height / 3, 300, 600);

      textSize(16);

      text('PRESS ENTER', width / 2, height / 2 + 200);

      textAlign(LEFT);

      image(dress,0,0,400,600);

      image(dress2,400,0,400,600);

      if (keyIsDown(13)) {

        scenenum++;

      }

      pop();

      break;

    case 8:

      //end game ...congrats. Game starts in a few seconds.

      push();

      frame++;

      sec = frame / fps;

      console.log(`sec: ${sec}`);

      background(10)

      let ssss = `Congrats! You've finished the game and designed some beautiful garments with Angel. Good luck on your future!`;

      fill(255);

      textSize(18);

      textLeading(26);

      textAlign(CENTER);

      translate(-150, 0);

      text(ssss, width / 2, height / 3, 300, 600);

      textSize(16);

      textAlign(LEFT);

      text('Wait for 10 seconds to play again...', width / 2, height / 2 + 200);

      if (sec > 10) {

        scenenum=0;

      }

      pop();

      break;

  }

}

​

​

class mainCharacter {

  // main char - angel

  constructor(x, y, w, h) {

    this.x = x;

    this.y = y;

    this.w = w;

    this.h = h;

  }

  angel(mainchar) { //angel=maincharacter's image

    imageMode(CENTER);

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

  }

​

​

  move() { // move Angel using arrow keys

    if (keyIsDown(38)) {

      this.y -= 3;

    }

    if (keyIsDown(40)) {

      this.y += 3;

    }

    if (keyIsDown(37)) {

      this.x -= 3;

    }

    if (keyIsDown(39)) {

      this.x += 3;

    }

​

  }

​

  drag() { // function for dragging the character- game level 2 

    let start_x = 515;

    let start_y = 290;

    let end_x = 90;

    let end_y = 235;

    if (mouseIsPressed) { // if mouse is not pressed, return to start positions

      this.x = mouseX;

      this.y = mouseY;

    } else {

      this.x = start_x;

      this.y = start_y;

    }

    if (this.compare(this.x, end_x, this.y, end_y)) { // check if Angel is at the end point

      scenenum++;

    }

    if (!this.checkIfWithinBoundary(this.x, this.y)) { // check if Angel is on the blue path 

      this.x = start_x;

      this.y = start_y;

    }

  }

//method = for game level 2, google maps.

  checkIfWithinBoundary(x, y) { //check if Angel is within close proximity of the blue path on the map. I got these points by identifying the anchor points for the blue path.

    if (

      this.compare(this.x, 476, this.y, 290) ||

      this.compare(this.x, 465, this.y, 288) ||

      this.compare(this.x, 453, this.y, 286) ||

      this.compare(this.x, 439, this.y, 283) ||

      this.compare(this.x, 421, this.y, 282) ||

      this.compare(this.x, 403, this.y, 280) ||

      this.compare(this.x, 392, this.y, 272) ||

      this.compare(this.x, 386, this.y, 260) ||

      this.compare(this.x, 375, this.y, 261) ||

      this.compare(this.x, 362, this.y, 265) ||

      this.compare(this.x, 346, this.y, 268) ||

      this.compare(this.x, 330, this.y, 270) ||

      this.compare(this.x, 311, this.y, 270) ||

      this.compare(this.x, 292, this.y, 265) ||

      this.compare(this.x, 278, this.y, 258) ||

      this.compare(this.x, 265, this.y, 245) ||

      this.compare(this.x, 251, this.y, 241) ||

      this.compare(this.x, 238, this.y, 231) ||

      this.compare(this.x, 226, this.y, 223) ||

      this.compare(this.x, 216, this.y, 218) ||

      this.compare(this.x, 203, this.y, 208) ||

      this.compare(this.x, 190, this.y, 200) ||

      this.compare(this.x, 179, this.y, 193) ||

      this.compare(this.x, 168, this.y, 187) ||

      this.compare(this.x, 155, this.y, 182) ||

      this.compare(this.x, 147, this.y, 176) ||

      this.compare(this.x, 140, this.y, 179) ||

      this.compare(this.x, 135, this.y, 185) ||

      this.compare(this.x, 129, this.y, 190) ||

      this.compare(this.x, 122, this.y, 197) ||

      this.compare(this.x, 114, this.y, 207) ||

      this.compare(this.x, 156, this.y, 216) ||

      this.compare(this.x, 99, this.y, 226) ||

      this.compare(this.x, 91, this.y, 236) ||

      this.compare(this.x, 84, this.y, 242)

    ) {

      return true;

    } else {

      return false;

    }

  }

​

  compare(x1, x2, y1, y2, diff = 10) { //compare if Angel is close to a point (x2,y2)   game level 2

    //abs function = finds the difference between two, e.g 5-3 = 2

    //reference = https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/abs 

    if (abs(x1 - x2) <= diff && abs(y1 - y2) <= diff) {

      return true;

    } else {

      return false;

    }

  }

​

  eat(pos) { 

    // function to "eat" or collect the fabrics/ items. game level 1 and 3.

    let xx = this.x;

    let y = this.y;

    if (abs(xx - pos.x) <= 30 && abs(y - pos.y) <= 30) { //checks if Angel is within 30 pixels of the object, eating objects when come near the fabric's vicinity.

      return true;

    }

    return false;

  }

}

​

class sceneObject { // class for defining fabrics and other objects

​

  constructor(x, y, w, h, img) {

    this.x = x;

    this.y = y;

    this.w = w;

    this.h = h;

    this.img = img;

  }

​

  body() {

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

  }

}