Final Project

This game is about “Trowing out flammable objects” like cigarettes, sparklers, fireworks, lanterns, heaters, and etc. With this game, I would be able to inform people to throw away caution objects, instead of leaving them in the forest.

*Systems & Keys

For this game, I have two scoring systems. One system is adding points(+)when the user successfully throws out an item while another system is deducting points(-) when the user throws out an item that is not dangerous.

Right arrow, Left arrow, ENTER (detailed instructions in the program)

*Goal

Score at least 5 points by throwing out flammable objects

*Attention

If you score lower than -5, Fail page will pop up. If you fail, you can’t start again because you CAN NOT undo wildfire 🙁 But you can start again if you success by pressing ENTER key 🙂

sketch copy
//Final Project

var introPage; //Click page
var introScreen; //click screen 
var item_counter = 0;
var item_interval = 13; // items amount decreases as the user earns more point
var item_startPage; // How page
var item_finishPage; // Congrats page
var item_finishFailPage;  //fail page
var item_startScreen; // How page illustration 
var item_finishScreen; //Congrats page illustration
var item_finishFailScreen; //Fail page illustration
var weapons = [];  //dangerous items array
var nonWeaps = []; //non-weapons array
var dropping_weapons = [] 
var dropping_nonWeaps = []
var trashcan; // trash can image
var backg;
var rate = 2; // speed of items falling
var item_score = 0; // score of throwing out items
var x = 0;
var height = 540;
var y = height - 100;

//trash can keys
var moveRight = false;
var moveLeft = false;

function preload() { // preloads images of dangerous weapons
    var Weapons = [
      "https://i.imgur.com/nu43pvX.png", //lantern
      "https://i.imgur.com/iftAnZO.png", //cigarette
      "https://i.imgur.com/JWyEvWW.png", //firework
      "https://i.imgur.com/RDVdcYb.png"]; //sparklers
    for (var i = 0; i < Weapons.length; i++){
      weapons.push(loadImage(Weapons[i]));
    }
    var NonWeaps = [
      "https://i.imgur.com/y3uSh1k.png", //leaf
      "https://i.imgur.com/RVbYaC6.png", //branch
      "https://i.imgur.com/2UQizyS.png"]; //acorn
    for (var i = 0; i < NonWeaps.length; i++){
      nonWeaps.push(loadImage(NonWeaps[i]));
    }
}

function item_setup () {
  createCanvas(450, 440);
  item_score = 0;
  item_startPage = false; 
  item_finishPage = false;
  trashcan = loadImage("https://i.imgur.com/JpPvsJn.png"); //trash can image
  item_startScreen = loadImage("https://i.imgur.com/in44Atu.png"); // How page of the game
  backg = loadImage("https://i.imgur.com/m6iJCVQ.png"); // forest background
  item_finishScreen = loadImage("https://i.imgur.com/UJUGvtS.png"); // congrats page of the game
  item_finishFailScreen = loadImage("https://i.imgur.com/JZkuboH.png");  //Fail page of the game
  item_counter = 0; // counts the number of trash caught in the trash can
  item_interval = 50;
}

function item_keyPressed() { 
  item_startPage =false;
  if (key === RIGHT){
    moveRight = true;
  } else if(key === LEFT){
    moveLeft = true;
  }
  if (item_startPage) {  // starts the game after pressing any key
      item_startPage = false;
  } else if (keyCode == ENTER) { // returns back to home screen 
      setup();
  }
}

function item_draw() { // draws other functions that is needed for game page
    if (item_startPage == true) {
      push();
      scale(1/4);
      image(item_startScreen, 0, 0);
      pop();
    } else {
      scale(0.35);
      image(backg, 0, 0);
      scale(1/0.4);
      drawTrashCan(); // draw trash can
      drawItems(); // draw dangerous items
      drawNonWeaps();    
      item_drawScore(); // number of items thrown out
      item_update(); // drops items continuously
    }
    if (item_finishPage == true) { // appears the finish page as the game ends
      push();
      scale(0.28);
      image(item_finishScreen,0,0);
      pop();
    }
    if (item_finishFailPage == true){
      push();
      scale(0.28);
      image(item_finishFailScreen,0,0);
      pop();
    }
}

function ScoreMax() { // if score of 5(maximum) is reached, shows congratulation page
    max = 5;          
    if(item_score >= max){
      item_finishPage = true;
    }
}

function ScoreMin(){  // if score of -5(minimum) is reached, shows Fail page
    min = -5;
    if(item_score <= min){
      item_finishFailPage = true;
    }
}

function item_drawScore() { // score on top left of the screen
  textSize(15);
  fill(25,30,37);
  text(("Your score: " + this.item_score), 10, 30);
}

function makeNonWeap(xposs, yposs, imagee) {
  var non = {
    "x": xposs,
    "y": yposs,
    "img": imagee,
    }
  return non;
}

function makeItem(xx, yy, image) {
  var item = {
    "x": xx,
    "y": yy,
    "img": image,
    }
  return item;
}

function drawNonWeaps() { 
    for (var i = 0; i < dropping_nonWeaps.length; i++){
      var non = dropping_nonWeaps[i];
      image(non.img, non.x, non.y,50,50);
    }
}

function drawItems() { 
    for (var i = 0; i < dropping_weapons.length; i++){
      var item = dropping_weapons[i];
      image(item.img, item.x, item.y,50,50);
    }
}

function drawTrashCan() { // renders the trash can
  image(trashcan, this.x, this.y-90,120,180);
}

function updateNonWeapY() { // updates the varying dropping of the non weapons
  for (var i = 0; i < dropping_nonWeaps.length; i++){
    var non = dropping_nonWeaps[i];
    non.y += rate;
    if (non.y > height) { 
      dropping_nonWeaps.splice(i, 1);
    }
  }
}

function updateItemY() { 
  for (var i = 0; i < dropping_weapons.length; i++){
    var item = dropping_weapons[i];
    item.y += rate;
    if (item.y > height) { 
      dropping_weapons.splice(i, 1);
    }
  }
}

function itemHitsTrashCan(item) { // moment when dangerous items hit the trash can
  var hit = this.x < item.x + 10 & item.x < this.x + 80 - 20 & item.y > this.y - 110; 
  return hit;
}

function nonWeapHitsTrashCan(non) { // moment when non-weapon items hit the trash can
  var hitt = this.x < non.x + 10 & non.x < this.x + 80 - 20 & non.y > this.y - 110;
  return hitt;
}

function updateNonWeapHit() { // the non-weapons disappear when it hits the trash can
  for (var i = 0; i < dropping_nonWeaps.length; i++){
    var non = dropping_nonWeaps[i];
    if(nonWeapHitsTrashCan(non)) {
      dropping_nonWeaps.splice(i, 1);
      item_score -= 1; //score decreases 
    }
  }
}

function updateItemHit() { // dangerous items disappear when it hits the trash can
  for (var i = 0; i < dropping_weapons.length; i++){
    var item = dropping_weapons[i];
    if(itemHitsTrashCan(item)) {
      dropping_weapons.splice(i, 1);
      item_score++; //score increases
      item_interval += 1; 
    }
  }  
}

function item_update() { // update random items from the top
  if(item_counter % item_interval == 0){
    var new_item = makeItem(random(10, 440), -80, random(weapons)); 
    dropping_weapons.push(new_item);
    var new_non = makeNonWeap(random(9,430),-80, random(nonWeaps));
    dropping_nonWeaps.push(new_non);
    item_counter = item_counter % item_interval; 
  }
  if(keyIsDown(RIGHT_ARROW) & this.x < width - 10){  // right arrow moving the trash can
     this.x += rate;
   }
  if (keyIsDown(LEFT_ARROW) & this.x > -10){ // left arrow moving the trash can
     this.x -= rate;
  }
  item_counter++;
  updateItemY();
  updateNonWeapY();
  updateItemHit();
  updateNonWeapHit();
  ScoreMax();
  ScoreMin();
}

function setup() {
  createCanvas(450, 450);
  introPage = true; // intro page is "true" here because it should start with this
  score = 0; //initial score
  introScreen = loadImage("https://i.imgur.com/EWQ38kD.png"); // home screen
  item_setup(); // calls the item setup function to combine
}

function keyPressed(){
  if (item_startPage | item_finishPage){
    item_keyPressed();
  } else if(item_finishPage & key == ENTER){  //going back to start page
    setup();
  }
}

function draw() {
  if (introPage == true) { // draws the intro page
    push();
    scale(1/4);
    image(introScreen, 0, 0);
    pop();
  } else {
    item_draw(); // game page
  }
}

function mouseClicked() {
  var xx = mouseX;
  var yy = mouseY;
  if (introPage) {
    if (0 < xx & xx < width & 0 < yy & yy < height) { //click any part of the screen
      item_startPage = true; // start page shows up
      introPage = false; 
    }
  }
}

Leave a Reply