p5.js Web Editor | MIDTERM_Aliya FINAL VERSION

xxxxxxxxxx
let gameState = 0;
let speed = 1.5;
let trash = [];
let score = 0;
let soundFiles = [];
let MAX = 2;
let timer = 30;
let triggerTime;
​
function preload() {
  gameBG = loadImage("gameBG.png");
  menuBG = loadImage("menuBG.png");
  myFont = loadFont("SpecialElite-Regular.ttf");
  paper = loadImage("assets/paper.png");
  pizza_box = loadImage("assets/pizza_box.png");
  letter = loadImage("assets/letter.png");
  binImg = loadImage("assets/trashbins.png");
  can = loadImage("assets/can.png");
  chocolate_wrap = loadImage("assets/chocolate_wrap.png");
  lid=loadImage("assets/lid.png")
  banana = loadImage("assets/banana.png");
  apple = loadImage("assets/apple.png");
  pBottle = loadImage("assets/pbottle.png");
  glass = loadImage("assets/tbottle.png");
  note = loadImage("assets/note.png");
  cup = loadImage("assets/coffee_cup.png");
  soundBG = loadSound("sounds/BGsound.mp3");
  click=loadSound("sounds/click.wav");
  correct=loadSound("sounds/yay.mp3");
  youghurt=loadImage("assets/youghurt.png");
  cereal=loadImage("assets/cereal.png")
}
​
function setup() {
    soundBG.loop();
    soundBG.setVolume(0.5);
  createCanvas(600, 600);
  
  triggerTime = 300; 
​
  for (i = 0; i < 1; i++) {
    trash.push(
      new Item(
        random(100, width - 100),
        0,
        50,
        50,
        floor(random(1, 4)),
        floor(random(1, 5))
      )
    );
  }
  bin = new Bin(0, 0, width, height);
}
​
function draw() {
  background(menuBG);
  textFont(myFont);
  textSize(40);
​
  fill(243, 247, 101);
  rect(width, height / 10, width / 2 - 260, height / 5 + 10);
​
  fill(229, 235, 52);
  rect(0, 10, width, height / 4);
  fill(0);
  text("Welcome to CLEAN & GREEN", width / 2 - 260, height / 5 - 20);
  textSize(20);
  text("please read the instructions before starting the game", width/2-280, height/5+10)
​
  textSize(30);
​
  //menu
  fill(229, 235, 52);
  push();
  rect(width / 2 - 120, height / 2 - 80, 240, 95, 25);
  fill(0);
  text("PLAY", width / 2 - 35, height / 2 - 20);
  pop();
​
  push();
  rect(width / 2 - 120, height / 2 + 20, 240, 95, 25);
  fill(0);
  text("INSTRUCTIONS", width / 2 - 105, height / 2 + 80);
  pop();
​
  textSize(50);
  fill(255);
​
  textSize(26);
​
  //play
  if (gameState == 1) {
    background(gameBG);
    fill(0);
    textSize(20);
    text("0:" + timer, 50, 50);
    text("score: " + score, 50, 70);
    textSize(15);
    text("Right Click to return to MENU", 350, 30);
​
    //to generate new items from the array at the top of the screen
    if (trash.length < 1) {
      trash.push(
        new Item(
          random(100, width - 100),
          -10,
          50,
          50,
          floor(random(1, 4)),
          floor(random(1, 5))
        )
      );
    }
​
    //to display new item from the array
    for (i = 0; i < trash.length; i++) {
      trash[i].display();
      trash[i].moveDown();
      
​
      if (trash[i].y > height-150) {
        checkTrash();
        //inserts value back into the array 
        trash.splice(i,1);
        
      }
​
      
    }
    //to show trash bins
    bin.show();
​
    //timer 
    if (frameCount % 60 == 0 && timer > 0) {
      timer--;
    }
    if (timer == 0) {
      gameState = 3;
    } 
  } 
​
  //adterr clicking the Right button, it returns back to menu
  if (mouseButton == RIGHT) {
    gameState = 0;
  }
  // instructions
  if (gameState == 2) {
    background(88, 191, 84);
​
    fill(229, 235, 52);
    image(note, 50, 100, width - 60, 400);
    fill(243,247,10);
    textSize(15);
    text("Right Click to return to MENU", 350, 30);
    fill(23, 102, 20);
    textSize(20);
    text("   1. Trash will fall from the top of the screen.",
      60,
      height / 2 - 60
    );
    text("   2. Use RIGHT, LEFT arrow keys to place it", 60, height / 2 - 30);
    text("        into the correct bin.", 60, height / 2);
    text("   3. Use DOWN arrow to speed up", 60, height / 2 + 30);
    text("   4. You'll be given 30 seconds to sort out", 60, height / 2 + 60);
    text("      as much trash as you can.", 60, height / 2 + 90);
    fill(243, 247, 10)
    textSize(25)
    text(" Learn and Enjoy!", width / 2 - 100, height / 2 + 250);
​
    if (mouseButton == RIGHT) {
      gameState = 0;
    }
  }
​
  // exit
  if (gameState == 3) {
    background(245, 114, 66);
    textSize(50);
    text("GAME OVER", width / 2 - 150, height / 2);
    textSize(30);
    text("Your final score is: " + score, width / 2 - 200, height / 2 + 50);
    textSize(25);
    textSize(15);
    text("Right Click to return to MENU", 350, 30);
  }
}
​
function mouseClicked() {
  if (gameState == 0) {
    if (mouseX < 415 && mouseX > 191) {
      if (mouseY < 309 && mouseY > 221) {
        click.play()
        reset();
        gameState = 1;
      }
​
      if (mouseY < 411 && mouseY > 321) {
        click.play()
        gameState = 2;
      }
    }
  }
}
​
//checks if the trash is placed into the correct bin
function checkTrash() {
  if (trash[0].x <= width / 3 && trash[0].randomImg == 3) {
    score += 100;
    print("correct Waste");
    correct.play();
    
  } else if (
    trash[0].x > width / 3 &&
    trash[0].x <= (2 * width) / 3 &&
    trash[0].randomImg == 1
  ) {
    print("correct Paper");
    score += 100;
    correct.play();
    
  } 
    else if (trash[0].x > (2 * width) / 3 && trash[0].randomImg == 2) {
    correct.play();
    print("correct Cans");
    score += 100;
    
   } 
    else if(trash[0].x < 84 && trash[0].x > 197 && trash[0].x > 364 && trash[0].x < 247 && trash[0].x > 414 && trash[0].x < 532) {
  score -= 100;
}
  else {
    print("incorrect bin");
    if (score>0){
    score -= 100;
    }
  }
}
​
function keyPressed() {
  if (keyCode == RIGHT_ARROW) {
    trash[0].moveRight();
  } else if (keyCode == LEFT_ARROW) {
    trash[0].moveLeft();
  } else if (key == " ") {
    speed = 0;
  } else if (keyCode == DOWN_ARROW && trash.length > 0) {
  
    trash[0].pressDown();
  }
  return false;
}
​
class Item {
  constructor(posX, posY, w, h, itemType, itemNum) {
    this.x = posX;
    this.y = posY;
    this.w = w;
    this.h = h;
    this.num = itemNum;
    this.randomImg = itemType;
    this.speed = random(1.5, 3);
    this.gravity = true;
  }
​
  display() {
    
    push();
    imageMode(CENTER);
    //to display paper trash
    if (this.randomImg == 1 && this.num == 1) {
      image(paper, this.x, this.y, this.w, this.h);
    }
    if (this.randomImg == 1 && this.num == 2) {
      image(letter, this.x, this.y, this.w, this.h);
    }
    if (this.randomImg == 1 && this.num == 3) {
      image(pizza_box, this.x, this.y, 80, 100);
    }
    
    if (this.randomImg == 1 && this.num == 4) {
      image(cereal, this.x, this.y, 60, 80);
    }
    
    
    
    //to display plastic trash
    if (this.randomImg == 2 && this.num == 1) {
      image(can, this.x, this.y, 40, 30);
    }
​
    if (this.randomImg == 2 && this.num == 2) {
      image(pBottle, this.x, this.y, 60, 50);
    }
    
    if (this.randomImg == 2 && this.num == 3) {
      image(lid, this.x, this.y, 70, 50);
    }
    
    if (this.randomImg == 2 && this.num == 4) {
      image(youghurt, this.x, this.y, 60, 60);
    }
​
    //to display general trash
    if (this.randomImg == 3 && this.num == 1) {
      image(apple, this.x, this.y, 30, 40);
    }
    if (this.randomImg == 3 && this.num == 2) {
      image(banana, this.x, this.y, this.w, this.h);
    }
    if (this.randomImg == 3 && this.num == 3) {
      image(glass, this.x, this.y, 70, 50);
    }
    
    if (this.randomImg == 3 && this.num == 4) {
      image(chocolate_wrap, this.x, this.y, 90, 40);
      
    }
    pop();
    
  }
​
  moveDown() {
    if (this.gravity == true) {
      this.y += this.speed;
    }
  }
​
  moveRight() {
    if (this.x < width - this.w - this.speed) {
      this.x += 50;
    }
  }
  moveLeft() {
    if (this.x > 0 + this.w - this.speed) {
      this.x -= 50;
    }
  }
​
  //speeds down the fall of the objects
  pressDown() {
    if (this.gravity == true) {
      this.y += speed * 45;
    }
  }
}
​
//to reset the game
function reset() {
  score = 0;
  gameState = 0;
  timer=30;
}
​
class Bin {
  constructor(xLoc, yLoc, w, h) {
    this.x = xLoc;
    this.y = yLoc;
    this.w = w;
    this.h = h;
  }
​
  show() {
    image(binImg, this.x, this.y, this.w, this.h);
  }
}
Cookies

Sketch Files

Console

Preview
