p5.js Web Editor | Benny the Fish

xxxxxxxxxx
let mode = 0;
​
let BennyFish;
let BennyWhale;
let bennyWidth;
let bennyHeight;
let HeartIcon;
let FoodIcon;
let Bottleimg;
let Cansimg;
let Logo;
let LogoWhale;
let BackgroundBowl;
let BackgroundSea;
​
let Music;
let Bump;
let Crash;
let Grow;
let Live;
​
let logoWidth;
let x;
let y;
let speed = 5;
let lives = 3;
let score = 0;
let bottleSpeed;
​
let bottles = [];
let cans = [];
let bag = [];
let foods = [];
​
function preload() {
  BennyFish = loadImage("Media/BennyFish.png");
  BennyWhale = loadImage("Media/BennyWhale.png");
  Logo = loadImage("Media/Logo.PNG");
  BackgroundBowl = loadImage("Media/Bowl.jpg");
  BackgroundIntro = loadImage("Media/Empty.jpg");
  Bottleimg = loadImage("Media/Bottle.png");
  Cansimg = loadImage("Media/cans.png");
  FoodIcon = loadImage("Media/foodImg.png");
  HeartIcon = loadImage("Media/livesImg.png");
  BackgroundSea = loadImage("Media/Sea.jpg");
  LogoWhale = loadImage("Media/LogoWhale.png");
  //SOUNDS
  Music = loadSound("Media/Music.mp3");
  Bump = loadSound("Media/Bump.wav");
  Crash = loadSound("Media/Crash.wav");
  Grow = loadSound("Media/Grow.wav");
  Live = loadSound("Media/Live.wav");
}
​
function setup() {
  createCanvas(900, 500);
  imageMode(CENTER);
  rectMode(CENTER);
  angleMode(DEGREES);
​
  x = width / 2;
  y = height * 0.65;
​
  logoWidth = 450;
​
  resetSketch();
}
​
function draw() {
  let s;
​
  switch (mode) {
    case 0:
      intro();
      s = "Intro Screen";
      break;
    case 1:
      bowl();
      s = "Bowl";
      break;
    case 2:
      lose();
      s = "Lose";
      break;
    case 3:
      gameOver();
      s = "Game Over";
      break;
    case 4:
      sea();
      S = "Sea";
      break;
    case 6:
      win();
      S = "Win";
      break;
    case 7:
      level();
      S = "Level";
      break;
  }
​
  if (!Music.isPlaying()) {
    Music.play();
  }
  Music.setVolume(0.03);
}
​
class Bottle {
  constructor(x, y, c, w, h, s) {
    this.posX = x;
    this.posY = y;
    this.speed = s;
    this.bottleWidth = w;
    this.bottleHeight = h;
    this.bottleColor = c;
  }
​
  drawBottle() {
    noFill();
    rectMode(CENTER);
    noStroke();
    rect(this.posX, this.posY, this.bottleWidth, this.bottleHeight);
    image(Bottleimg, this.posX, this.posY, this.bottleWidth, this.bottleHeight);
  }
​
  moveBottle() {
    this.posX -= this.speed;
    if (this.posX < 0 - this.bottleWidth / 2) {
      this.posX = width + this.bottleWidth / 2;
      this.posY = random(0, width);
    }
    push();
    if (
      dist(x, y, this.posX, this.posY) < this.bottleWidth / 2 + 36 &&
      !Bump.isPlaying()
    ) {
      this.killBenny();
    }
    pop();
  }
​
  killBenny() {
    // WHEN BENNY TOUCHES VILLAINS
    lives -= 1; // LIVES COUNTER
    mode = 2;
    this.posX = width + 90;
    if (!Crash.isPlaying()) {
      Crash.play();
    }
  }
​
  clearArea() {
    if (dist(x, y, this.posX, this.posY) < 200) {
      this.posX = width + 40;
    }
  }
}
​
​
class Can {
  constructor(x, y, c, w, h, s) {
    this.posX = x;
    this.posY = y;
    this.speed = s;
    this.canWidth = w;
    this.canHeight = h;
    this.canColor = c;
  }
​
  drawCan() {
    noFill();
    rectMode(CENTER);
    noStroke();
    rect(this.posX, this.posY, this.canWidth, this.canHeight);
    image(Cansimg, this.posX, this.posY, this.canWidth, this.canHeight);
  }
​
  moveCan() {
    this.posX -= this.speed;
    if (this.posX < 0 - this.canWidth / 2) {
      this.posX = width + this.canWidth / 2;
      this.posY = random(0, width);
    }
    push();
    if (
      dist(x, y, this.posX, this.posY) < this.canWidth / 2 + 20 &&
      !Bump.isPlaying()
    ) {
      this.killBenny();
    }
    pop();
  }
​
  killBenny() {
    // WHEN BENNY TOUCHES VILLAINS
    lives -= 1; // LIVES COUNTER
    mode = 2;
    this.posX = width + 90;
    if (!Crash.isPlaying()) {
      Crash.play();
    }
  }
​
  clearArea() {
    if (dist(x, y, this.posX, this.posY) < 200) {
      this.posX = width + 40;
    }
  }
}
​
​
​
class Food {
  constructor(x, y) {
    this.posX = x;
    this.posY = y;
    this.opacity = 255;
  }
​
  drawFood() {
    noFill();
    ellipseMode(CENTER);
    fill(112, 74, 24, this.opacity);
    noStroke();
    circle(this.posX, this.posY, 17);
    circle(this.posX, this.posY + 12, 10);
    circle(this.posX + 10, this.posY + 7, 15);
  }
​
  appearFood() {
    this.opacity = 100;
    this.opacity += 20;
​
    if (this.opacity > 255) {
      this.posX = random(40, width - 40);
      this.posY = -10;
      this.opacity = 0;
    }
​
    if (this.posY > height + random(0, 500)) {
      this.posY = -10;
    }
    this.posY += 1;
  }
​
  eatFood() {
    if (dist(x, y, this.posX, this.posY) < bennyWidth / 2) {
      this.posX = random(0, width);
      this.posY = -100;
      score += 1;
​
      if (!Live.isPlaying()) {
        Live.play();
      }
      if (
        (!Grow.isPlaying() && score == 5 && bennyWidth < 75) ||
        (!Grow.isPlaying() && score == 10 && bennyWidth < 80) ||
        (!Grow.isPlaying() && score == 15 && bennyWidth < 90) ||
        (!Grow.isPlaying() && score == 20 && bennyWidth < 95) ||
        (!Grow.isPlaying() && score == 30 && bennyWidth < 97) ||
        (!Grow.isPlaying() && score == 35 && bennyWidth < 107) ||
        (!Grow.isPlaying() && score == 40 && bennyWidth < 115) ||
        (!Grow.isPlaying() && score == 45 && bennyWidth < 120)
      ) {
        Grow.play();
      }
    }
  }
}
​
function intro() {
  // AESTHETICS /////////////////////////////////////
​
  background(255);
​
  bennyWidth = 70;
  bennyHeight = 50;
  score = 0;
  lives = 3;
​
  image(BackgroundIntro, width / 2, height / 2, width, height);
  image(Logo, width / 2, height * 0.35, logoWidth, logoWidth);
  // AESTHETICS /////////////////////////////////////
​
  image(BennyFish, x, y, bennyWidth, bennyHeight);
​
  // INSTRUCTIONS /////////////////////////////////////
​
  push();
  textFont("Courier New");
  textSize(20);
  textAlign(CENTER);
  fill(0);
  text("use the keyboard arrows", width * 0.5, height * 0.8);
  text("to help Benny grow and reach the sea", width * 0.5, height * 0.85);
    text("look for food and avoid plastic!", width * 0.5, height * 0.93);
  pop();
​
  // INSTRUCTIONS /////////////////////////////////////
​
  x = width / 2;
  y = height * 0.65;
}
​
function bowl() {
  background(255);
  image(BackgroundBowl, width / 2, height / 2, width, height);
​
  image(BennyFish, x, y, bennyWidth, bennyHeight); // THIS IS WHERE I DRAW THE MAIN CHARACTER
​
  // BOUNDS //////////////////////////////////////////
  //LEFT BOUND
  if (x < bennyWidth / 2 + 4) {
    x += speed + 0.2;
    if (!Bump.isPlaying()) {
      Bump.play();
    }
  }
​
  //RIGHT BOUND
  if (x > width - (bennyWidth / 2 + 4)) {
    x -= speed + 0.2;
    if (!Bump.isPlaying()) {
      Bump.play();
    }
  }
​
  //UPPER BOUND
  if (y < bennyHeight / 2 + 4) {
    y += speed + 0.2;
    if (!Bump.isPlaying()) {
      Bump.play();
    }
  }
​
  //RIGHT BOUND
  if (y > height - (bennyHeight / 2 + 4)) {
    y -= speed + 0.2;
    if (!Bump.isPlaying()) {
      Bump.play();
    }
  }
  // BOUNDS //////////////////////////////////////////
​
  // CONTROLS ///////////////////////////////////////
  if (isKeyPressed == true) {
    if (keyCode == UP_ARROW) {
      y -= speed;
    }
​
    if (keyCode == DOWN_ARROW) {
      y += speed;
    }
​
    if (keyCode == LEFT_ARROW) {
      x -= speed;
    }
​
    if (keyCode == RIGHT_ARROW) {
      x += speed;
    }
  }
  // CONTROLS ///////////////////////////////////////
​
  // VILLAIN DRAW /////////////////////////////////////
  for (let i = 0; i < bottles.length; i++) {
    bottles[i].drawBottle();
    bottles[i].moveBottle();
  }
​
  for (let i = 0; i < foods.length; i++) {
    foods[i].drawFood();
    foods[i].appearFood();
    foods[i].eatFood();
  }
  // VILLAIN DRAW /////////////////////////////////////
​
  counterScreen();
​
  if (score > 4) {
    bennyWidth = 77;
    bennyHeight = 55;
  }
  if (score > 9) {
    bennyWidth = 84;
    bennyHeight = 60;
  }
  if (score > 14) {
    bennyWidth = 91;
    bennyHeight = 65;
  }
​
  if (score > 19) {
    bennyWidth = 98;
    bennyHeight = 70;
  }
  if (score > 24) {
    bennyWidth = 105;
    bennyHeight = 76;
    mode = 7;
  }
}
​
function sea() {
  background(255);
  image(BackgroundSea, width / 2, height / 2, width, height);
​
  image(BennyWhale, x, y, bennyWidth, bennyHeight); // THIS IS WHERE I DRAW THE MAIN CHARACTER
​
  // BOUNDS //////////////////////////////////////////
  //LEFT BOUND
  if (x < bennyWidth / 2 + 4) {
    x += speed + 0.2;
    //BUMP SOUND HERE
  }
​
  //RIGHT BOUND
  if (x > width - (bennyWidth / 2 + 4)) {
    x -= speed + 0.2;
    //BUMP SOUND HERE
  }
​
  //UPPER BOUND
  if (y < bennyHeight / 2 + 4) {
    y += speed + 0.2;
    //BUMP SOUND HERE
  }
​
  //RIGHT BOUND
  if (y > height - (bennyHeight / 2 + 4)) {
    y -= speed + 0.2;
    //BUMP SOUND HERE
  }
  // BOUNDS //////////////////////////////////////////
​
  // CONTROLS ///////////////////////////////////////
  if (isKeyPressed == true) {
    if (keyCode == UP_ARROW) {
      y -= speed;
    }
​
    if (keyCode == DOWN_ARROW) {
      y += speed;
    }
​
    if (keyCode == LEFT_ARROW) {
      x -= speed;
    }
​
    if (keyCode == RIGHT_ARROW) {
      x += speed;
    }
  }
  // CONTROLS ///////////////////////////////////////
​
  // VILLAIN DRAW /////////////////////////////////////
  for (let i = 0; i < bottles.length; i++) {
    bottles[i].drawBottle();
    bottles[i].moveBottle();
  }
  
   for (let i = 0; i <cans.length; i++) {
    cans[i].drawCan();
    cans[i].moveCan();
  }
​
​
  for (let i = 0; i < foods.length; i++) {
    foods[i].drawFood();
    foods[i].appearFood();
    foods[i].eatFood();
  }
  // VILLAIN DRAW /////////////////////////////////////
  counterScreen();
​
  if (score > 24) {
    bennyWidth = 90;
    bennyHeight = 45;
  }
  if (score > 29) {
    bennyWidth = 99;
    bennyHeight = 49.5;
  }
  if (score > 34) {
    bennyWidth = 108;
    bennyHeight = 54;
  }
​
  if (score > 39) {
    bennyWidth = 117;
    bennyHeight = 58.5;
  }
  if (score > 44) {
    bennyWidth = 126;
    bennyHeight = 63;
  }
​
  if (score > 49) {
    mode = 6;
  }
}
​
function lose() {
  background(255);
  image(BackgroundIntro, width / 2, height / 2, width, height);
​
  if (score < 25) {
    push();
    tint(0, 40);
    image(BennyFish, x, y, bennyWidth, bennyHeight);
    pop();
  } else {
    push();
    tint(0, 40);
    image(BennyWhale, x, y, bennyWidth, bennyHeight);
    pop();
  }
​
  if (lives < 1) {
    mode = 3;
    lives = 3;
  }
​
  push();
  textFont("Courier New");
  textSize(20);
  textAlign(CENTER);
  fill(0);
  text("-1 life:", width * 0.5, height * 0.2);
  
 text("press any arrow key to continue", width * 0.5, height * 0.25);
  
  text("oh no!", width * 0.5, height * 0.8);
  text("plastic is bad for Benny", width * 0.5, height * 0.85);
  text(" avoid it at all costs", width * 0.5, height * 0.9);
  pop();
​
  for (let i = 0; i < bottles.length; i++) {
    bottles[i].clearArea();
  }
​
  counterScreen();
}
​
function gameOver() {
  background(255);
  image(BackgroundIntro, width / 2, height / 2, width, height);
​
  
  push();
  translate (width/2, height/2);
  rotate(180);
   image(BennyFish, 0, -40, bennyWidth, bennyHeight);
  pop();
  push();
  textFont("Courier New");
  textSize(20);
  textAlign(CENTER);
  fill(0);
  text("benny died.", width * 0.5, height * 0.8);
  text("click anywhere to restart", width * 0.5, height * 0.85);
  pop();
​
  if (mouseIsPressed) {
    mode = 0;
  }
​
  for (let i = 0; i < bottles.length; i++) {
    bottles[i].clearArea();
  }
​
  score = 0;
  bennyWidth = 70;
  bennyHeight = 50;
}
​
function win() {
  background(255);
  image(BackgroundIntro, width / 2, height / 2, width, height);
  image(LogoWhale, width / 2, height * 0.35, logoWidth, logoWidth);
​
  textFont("Courier New");
  textSize(20);
  textAlign(CENTER);
  fill(0);
  text("Congratulations!", width * 0.5, height * 0.65);
  text("you have won the game", width * 0.5, height * 0.7);
  text("Benny has grown a lot...", width * 0.5, height * 0.8);
  text("Perhaps he was not a fish after all", width * 0.5, height * 0.85);
  text("click anywhere to restart", width * 0.5, height * 0.9);
  pop();
​
  if (mouseIsPressed) {
    mode = 0;
  }
}
​
function level() {
  background(255);
  image(BackgroundIntro, width / 2, height / 2, width, height);
  image(BennyFish, x, y, bennyWidth, bennyHeight);
  push();
  textFont("Courier New");
  textSize(20);
  textAlign(CENTER);
  fill(0);
  text("next level!", width * 0.5, height * 0.2);
  text("click any arrow key to continue", width * 0.5, height * 0.25);
  text("oh no!", width * 0.5, height * 0.8);
  text("Benny outgrew his bowl", width * 0.5, height * 0.85);
  text("lets move him so he can freely roam", width * 0.5, height * 0.9);
  pop();
​
  for (let i = 0; i < bottles.length; i++) {
    bottles[i].clearArea();
  }
}
​
function resetSketch() {
​
  
   for (let i = 0; i < 5; i++) {
    let y = random(0, height);
    cans.push(new Can(width, y, 0, 50, 40, random(1, 1.5)));
  }
  
  for (let i = 0; i < 8; i++) {
    let y = random(0, height);
    bottles.push(new Bottle(width, y, 0, 35, 70, random(2.3, 3.2)));
  }
​
  for (let i = 0; i < 2; i++) {
    foods.push(new Food(width / 2 + 30, height / 2));
  }
  
  
  
}
​
function counterScreen() {
  push();
  fill(215, 244, 247, 200);
  noStroke();
  rect(width - 40, 32, 250, 30);
  rect(width - 40, 73, 250, 30);
  pop();
​
  push();
  textFont("Courier New");
  textSize(30);
  textAlign(CENTER);
  fill(0);
  text(lives, width * 0.95, height * 0.08);
  text(score, width * 0.95, height * 0.16);
  push();
  textSize(20);
  text("lives: ", width * 0.87, height * 0.0765);
  text("score: ", width * 0.87, height * 0.16);
  pop();
  pop();
  image(FoodIcon, width * 0.75, height * 0.15, 30, 30);
  image(HeartIcon, width * 0.75, height * 0.06, 30, 30);
  push();
}
​
function keyPressed() {
  if (
    (keyCode === LEFT_ARROW && mode != 3 && score < 24 ) ||
    (keyCode === RIGHT_ARROW && mode != 3 && score < 24 ) ||
    (keyCode === UP_ARROW && mode != 3 && score < 24 ) ||
    (keyCode === DOWN_ARROW && mode != 3 && score < 24 )
  ) {
    mode = 1;
  }
​
  if (
    (keyCode === LEFT_ARROW && mode != 3 && score > 24) ||
    (keyCode === RIGHT_ARROW && mode != 3 && score > 24) ||
    (keyCode === UP_ARROW && mode != 3 && score > 24) ||
    (keyCode === DOWN_ARROW && mode != 3 && score > 24)
  ) {
    mode = 4;
  }
}
​
Cookies

Sketch Files

Console

Preview
