p5.js Web Editor | Midterm Project

xxxxxxxxxx
//global variables
let width = 600;
let height = 500;
let NUM_ROWS = 10;
let NUM_COLS = 10;
let TILE_WIDTH;
let TILE_HEIGHT;
let SCORE = 0;
let SLIDE = 0;
let SHIELD = false;
let TIMESTART;
let COUNTDOWN = 20;
let WIN = false;
let game;
let cover, bg1, bg2;
let startColor = 255;
let speedAnimate = 1;
​
function preload() {
  cover = loadImage("cover.png");
  bg1 = loadImage("background1.jpg");
  bg2 = loadImage("background2.jpg");
  inst1 = loadImage("instructions1.png");
  inst2 = loadImage("instructions2.png");
  gameover = loadImage("gameover.jpg");
  music1 = loadSound("bg_music1.m4a");
  music2 = loadSound("bg_music2.m4a");
}
​
function setup() {
  TILE_WIDTH = width / NUM_COLS;
  TILE_HEIGHT = height / NUM_ROWS;
  createCanvas(width, height);
  game = new Game();
}
​
function draw() {
  if (SLIDE == 0) {
    image(cover, 0, 0, width, height);
    fill(255);
    textFont("Impact");
    textSize(15);
    text("Press Spacebar to continue", 10, height - 15);
    
  } else if (SLIDE == 1) {
    image(inst1, 0, 0, width, height);
    fill(255);
    textFont("Impact");
    textSize(15);
    text("Press Spacebar to continue", 10, height - 15);
    game.Play = true;
    
  } else if (game.Play) {
    if (frameCount % 7 == 0) {
      game.display();
    }
  } else {
    if (WIN) {
      // Player Wins at end of Level 3
      noStroke();
      if (startColor > height + 255 || startColor < 255) {
        speedAnimate *= -1;
      } //reversing direction if goes beyond screen
      startColor += speedAnimate;
      let numRectangles = 22;
      let rectHeight = height / numRectangles;
      for (let y = 0; y < height; y += rectHeight) {
        let pinkShade = startColor - y; //calculates  pink shade based on the distance from the top of the canvas.
        let red = 255 - pinkShade; // Adjust red color to create gradient
        fill(red, 191, 210);
        rect(0, y, width * 2, rectHeight);
      }
      music1.stop();
      music2.stop();
      fill(255);
      textSize(48);
      text("YOU WON!", width / 2 - 100, height / 2);
      textFont("Impact");
      textSize(15);
      text("Press Spacebar to restart", 10, height - 15);
    } 
    else {
      // Game over at any level
      music1.stop();
      music2.stop();
      image(gameover, 0, 0, width, height);
      fill('rgb(52,168,52)');
      textSize(30);
      text("Score: " + SCORE, width / 2 - 55, height / 2 + 80);
      fill(255);
      textFont("Impact");
      textSize(15);
      text("Press Spacebar to restart", 10, height - 15);
    }
  }
}
​
class Game {
  constructor() {
    this.w = width;
    this.h = height;
    this.basket = new Basket();
    this.Play = true;
    this.villains = [];
    this.powerups = [];
    this.heroes1 = [];
    this.heroes2 = [];
    this.logos = [];
  }
​
  display() {
    if (SCORE >= 3 && SLIDE == 2) {
      SCORE = 0;
      this.villains = [];
      this.powerups = [];
      this.heroes1 = [];
      SLIDE = 3;
      TIMESTART = millis();
    }
​
    if (SLIDE == 3) {
      music1.stop();
      image(inst2, 0, 0, width, height);
      fill(255);
      textFont("Impact");
      textSize(15);
      text("Press Spacebar to continue", 10, height - 15);
    }
​
    if (SCORE >= 5 && SLIDE == 4) {
      SCORE = 0;
      this.villains = [];
      this.powerups = [];
      this.heroes2 = [];
      SLIDE = 5;
    }
​
    if (SLIDE == 5) {
      music2.stop();
      WIN = true;
      this.Play = false;
    }
​
    // LEVEL 1
    if (SLIDE == 2) {
      image(bg1, 0, 0, this.w, this.h);
      if (music1.isPlaying() == false){
        music1.play(); }
​
      if (frameCount % 3 == 0) { //adds character every 3 frames
        this.heroes1.push(new Heroes1());
      }
      for (let hero of this.heroes1) {
        hero.display();
        if (hero.y >= height + 40) {
          // Removes character once it exits the screen
          this.heroes1.splice(this.heroes1.indexOf(hero), 1);
        }
      }
      if (frameCount % 5 == 0) {
        this.villains.push(new Villain(1));
      }
      for (let villain of this.villains) {
        villain.display();
        if (villain.y >= height + 40) {
          this.villains.splice(this.villains.indexOf(villain), 1);
        }
      }
​
      if (this.powerups.length < 2) {
        this.powerups.push(new PowerUp(1));
      }
      for (let powerup of this.powerups) {
        powerup.display();
        if (powerup.y >= height + 40) {
          this.powerups.splice(this.powerups.indexOf(powerup), 1);
        }
      }
​
      textSize(30);
      text("LEVEL 1", width / 2 - 60, 45);
      textSize(25);
      text("Aim: 3", width - 100, 80);
      textSize(25);
      text("SCORE: " + SCORE, width - 120, 45);
​
      let COUNTDOWN = 20 - (millis() - TIMESTART) / 1000;
      if (COUNTDOWN <= 0) {
        this.Play = false;
      }
      text("Time: " + floor(COUNTDOWN), 20, 45);
​
      this.basket.display();
      this.basket.update();
    }
​
    // LEVEL 2
    if (SLIDE == 4) {
      if (music2.isPlaying() == false){
        music2.play(); }
      image(bg2, 0, 0, this.w, this.h);
​
      if (frameCount % 2 == 0) {
        this.heroes2.push(new Heroes2());
      }
      for (let hero of this.heroes2) {
        hero.display();
        if (hero.y >= height + 40) {
          this.heroes2.splice(this.heroes2.indexOf(hero), 1);
        }
      }
​
      if (frameCount % 4 == 0) {
        this.villains.push(new Villain(2));
      }
      for (let villain of this.villains) {
        villain.display();
        if (villain.y >= height + 40) {
          this.villains.splice(this.villains.indexOf(villain), 1);
        }
      }
​
      if (this.powerups.length < 2) {
        this.powerups.push(new PowerUp(2));
      }
      for (let powerup of this.powerups) {
        powerup.display();
        if (powerup.y >= height + 40) {
          this.powerups.splice(this.powerups.indexOf(powerup), 1);
        }
      }
​
      textSize(32);
      text("LEVEL 2", width / 2 - 75, 45);
      fill(0, 0, 0);
      textSize(30);
      text("Aim: 5", width - 100, 80);
      textSize(25);
      text("SCORE: " + SCORE, width - 120, 45);
​
      //timer
      fill(255, 255, 255);
      let COUNTDOWN = 15 - (millis() - TIMESTART) / 1000;
      if (COUNTDOWN <= 0) {
        this.Play = false;
      }
      text("Time: " + floor(COUNTDOWN), 20, 45);
​
      this.basket.display();
      this.basket.update();
    }
  }
}
​
class Basket {
  constructor() {
    this.col_num = floor(NUM_COLS / 2);
    this.x = this.col_num * TILE_WIDTH - 15;
    this.y = (NUM_ROWS - 1) * TILE_HEIGHT;
    this.img = loadImage("basket.png");
    this.w = TILE_WIDTH + 20;
    this.h = TILE_HEIGHT + 20;
    this.speed = 10;
  }
​
  display() {
    this.update();
    image(this.img, this.x, this.y, this.w, this.h);
  }
​
  update() {
      //calculate the target x-coordinate based on the column number
    let targetX = this.col_num * TILE_WIDTH - 15;
    if (this.x < targetX) {
      this.x += this.speed;
    } else if (this.x > targetX) {
      this.x -= this.speed;
    }
  }
​
  moveLeft() {
    //ensure it stays within the grid
    this.col_num = constrain(this.col_num - 1, 0, NUM_COLS - 1);
  }
​
  moveRight() {
    this.col_num = constrain(this.col_num + 1, 0, NUM_COLS - 1);
  }
}
​
class Element {
  constructor() {
    this.w = TILE_WIDTH - 10;
    this.h = TILE_HEIGHT - 10;
    this.y = -TILE_HEIGHT;
    this.col_num = floor(random(0, 10));
    this.x = this.col_num * TILE_WIDTH;
  }
​
  display() {
    this.update();
    image(this.img, this.x, this.y, this.w, this.h);
  }
​
  update() {
    this.y += TILE_HEIGHT - 40; // sets speed
    this.catch();
  }
​
  catch() {
    if (this.x - 15 == game.basket.x && this.y == game.basket.y) {
      SCORE += 1;
    }
  }
}
​
class Heroes1 extends Element {
  constructor() {
    super();
    this.hero1 = loadImage("tanjiro.png");
    this.hero2 = loadImage("nezuko.png");
    this.hero1_images = [this.hero1, this.hero2];
    this.img = random(this.hero1_images);
  }
}
​
class Villain extends Element {
  constructor(type) {
    super();
    if (type == 1) {
      this.img = loadImage("muzan.png");
    } else if (type == 2) {
      this.img = loadImage("ozai.png");
    }
  }
​
  catch() {
    if (this.x - 15 == game.basket.x && this.y == game.basket.y) {
      if (!SHIELD) {
        game.Play = false;
      } else {
        SHIELD = false;
      }
    }
  }
}
​
class PowerUp extends Element {
  constructor(type) {
    super();
    if (type == 1) {
      this.img = loadImage("sun.png");
    } else if (type == 2) {
      this.img = loadImage("lightning.png");
    }
  }
​
  catch() {
    if (this.x - 15 == game.basket.x && this.y == game.basket.y) {
      SHIELD = true; // Activates shield
    }
  }
}
​
class Heroes2 extends Element {
  constructor() {
    super();
    this.hero1 = loadImage("aang.png");
    this.hero2 = loadImage("zuko.png");
    this.heroes2_images = [this.hero1, this.hero2];
    this.img = random(this.heroes2_images);
  }
​
  update() {
    this.y += TILE_HEIGHT - 30; // Increases speed by 10 from the previous level
    this.catch();
  }
}
​
​
function keyPressed() {
  if (keyCode == 32) {
    // ASCII value for Spacebar
    if (SLIDE <= 1) {
      SLIDE += 1;
      TIMESTART = millis();
    } else if (SLIDE == 3 && game.Play) {
      SLIDE += 1;
      TIMESTART = millis();
    } else if ((SLIDE == 2 || SLIDE == 4) && !game.Play) {
      SCORE = 0;
      SLIDE = 0;
      COUNTDOWN = 20;
      game = new Game();
      WIN = false;
      TIMESTART = millis();
    } else if (SLIDE == 5 && !game.Play) {
      SCORE = 0;
      SLIDE = 0;
      COUNTDOWN = 20;
      game = new Game();
      TIMESTART = millis();
    }
  }
​
  if (keyCode == LEFT_ARROW) {
    game.basket.moveLeft();
  } else if (keyCode == RIGHT_ARROW) {
    game.basket.moveRight();
  }
}
​
Cookies

Sketch Files

Console

Preview
