p5.js Web Editor | Basic Game part of CC/IL Final Project

xxxxxxxxxx
// code adapted from https://editor.p5js.org/ehersh/sketches/Hk52gNXR7 and https://editor.p5js.org/jaf765/sketches/zL2nY7K4v
//Image from: https://www.flaticon.com/free-icon/standing-male-silhouette-with-raised-arms_46994?term=person%20with%20arms%20raised&page=1&position=2&page=1&position=2&related_id=46994&origin=search
// by Alexis 8/8/21
​
let score = 0;
let y = 0;
let x;
let speed = 5;
let size = 30;
let redImg, blueImg, greenImg, yellowImg, blackImg, goldImg;
let col = ["red", "blue"];
let ball;
let levelTwo = false;
let levelThree = false;
let levelFour = false;
let secretLevel = false;
let totalScore = 0;
let highScore = [];
let maxHighScore = 0;
​
function preload() {
  redImg = loadImage("red person.svg");
  blueImg = loadImage("blue person.svg");
  greenImg = loadImage("green person.svg");
  yellowImg = loadImage("yellow person.svg");
  blackImg = loadImage("black person.svg");
  goldImg = loadImage("gold person.svg");
}
​
function setup() {
  createCanvas(windowWidth, 600);
  x = width / 2;
  // noCursor();
​
  ball = new Ball(x, y, size, random(col), speed);
  secretBall = new Secret(x, y, size, "gold", 7);
​
  alert(
    "You have to catch all the balls inside the basket with your mouse. The box has to match the color of the balls and you can use the number keys to change the color of the box.\n\nPress 1: turn the box red\nPress 2: turn the box blue\n\nCollect 10 red and blue balls to move onto the next level. If you let a ball fall or the color box doesn't match the ball, you lose.\n\nOnce you click 'ok' the game starts."
  );
}
​
function draw() {
  noStroke();
  start();
}
​
function start() {
  // console.log(totalScore);
  bgColor();
  textFill();
​
  imageMode(CENTER);
  newPerson();
​
  if (secretLevel == true && levelTwo == false && levelThree == false && levelFour == false) {
    secretBall.display();
  } else {
    ball.display();
  }
​
  if (ball.y > height - 100) {
    end();
  }
​
  if (secretBall.y > height - 100 && secretLevel == true) {
    newLevel3();
  }
​
  if (ball.y > height - 180 && ball.x > mouseX - 40 && ball.x < mouseX + 40) {
    checkScore();
  }
​
  if (
    secretBall.y > height - 80 &&
    secretBall.x > mouseX - 40 &&
    secretBall.x < mouseX + 40
  ) {
    secretScore();
  }
​
  if (
    score == 1 &&
    levelTwo == false &&
    levelThree == false &&
    secretLevel == false && levelFour == false
  ) {
    newLevel2();
  }
​
  if (
    score == 10 &&
    levelTwo == true &&
    levelThree == false &&
    secretLevel == false && levelFour == false
  ) {
    newLevel3();
  }
​
  if (
    score > 1 &&
    levelThree == true &&
    levelTwo == false &&
    secretLevel == false && levelFour == false
  ) { //every 5 sec = oppertunity to enter secret level
      secretBall.display();
    if (
      key == "5" &&
      secretBall.y > 420 &&
      secretBall.x > mouseX - 40 &&
      secretBall.x < mouseX + 40
    ) {
      newSecretLevel();
    }
  }
​
  if (
    score == 15 &&
    levelThree == true &&
    levelTwo == false &&
    secretLevel == false && levelFour == false
  ) {
    newLevel4();
  }
  
   if (
    score == 15 &&
    levelThree == false &&
    levelTwo == false &&
    secretLevel == false && levelFour == true
  ) {
    win();
  }
​
  if (
    score == 5 &&
    secretLevel == true &&
    levelTwo == false &&
    levelThree == false && levelFour == false
  ) {
    newLevelFour();
  }
}
​
function bgColor() {
  if (levelTwo == false && levelThree == false && levelFour == false) {
    background("lightcyan");
  } else if (levelTwo == true && levelThree == false && levelFour == false) {
    background("peachpuff");
  } else if (levelTwo == false && levelThree == true && levelFour == false) {
    background("lavender");
  } else if (levelTwo == false && levelThree == true && levelFour == true) {
    background("lightpink");
  }
}
​
function textFill() {
  fill("black");
  textSize(14);
  text("Score: " + score, 20, 30);
  fill("darkgrey");
  rect(15,35,85,50);
  if (levelThree == true || secretLevel == true && levelTwo == false && levelFour == false) {
    rect(15,35,85,70);
  } else if (levelFour == true && secretLevel == false && levelTwo == false && levelFour == false) {
  rect(15, 35, 85, 90);
  }
  textStyle(BOLD);
  fill("red");
  text("1: RED", 20, 55);
  fill("blue");
  text("2: BLUE", 20, 75);
  if (levelThree == true) {
  fill("lime");
  text("3: GREEN", 20, 95);
  } else if (levelFour == true) {
  fill("yellow");
  text("4: YELLOW", 20, 115);
  }
}
​
function newBall() {
  ball.col = random(col);
  ball.y = 0;
​
  if (levelTwo == false && levelThree == false && levelFour == false) {
    ball.speed += 0.5;
  } else if (levelTwo == true && levelThree == false && levelFour == false) {
    ball.speed += 0.5;
  } else if (levelTwo == false && levelThree == true && levelFour == false) {
    ball.speed += 0.5;
  } else if (levelTwo == false && levelThree == false && secretLevel == true && levelFour == false) {
    secretBall.speed += 1;
  } else if (levelTwo == false && levelThree == false && secretLevel == false && levelFour == true) {
    ball.speed += 1;
  }
​
  ball.x = int(random(50, windowWidth - 50));
  secretBall.x = int(random(50, windowWidth - 50));
  secretBall.y = 0;
  start();
}
​
function newPerson() {
  //level 1
  if (levelTwo == false && levelThree == false && secretLevel == false && levelFour == false) {
    if (key == "1") {
      image(redImg, mouseX, height - 90);
    } else if (key == "2") {
      image(blueImg, mouseX, height - 90);
    } else {
      image(blackImg, mouseX, height - 90);
    }
  } else if (levelTwo == true && levelThree == false && secretLevel == false && levelFour == false) {
    //level 2
    if (key == "1") {
      image(redImg, mouseX, height - 90);
    } else if (key == "2") {
      image(blueImg, mouseX, height - 90);
    } else {
      image(blackImg, mouseX, height - 90);
    }
  } else if (levelTwo == false && levelThree == true && secretLevel == false && levelFour == false) {
    //level 3
       if (key == "1") {
      image(redImg, mouseX, height - 90);
    } else if (key == "2") {
      image(blueImg, mouseX, height - 90);
    } else if (key == "3") {
      image(greenImg, mouseX, height - 90);
    } else if (key == "5") {
      image(goldImg, mouseX, height - 90);
    } else {
      image(blackImg, mouseX, height - 90);
    } 
  } else if (levelTwo == false && levelThree == false && secretLevel == false && levelFour == true) {
    //level 3
    if (key == "1") {
      image(redImg, mouseX, height - 90);
    } else if (key == "2") {
      image(blueImg, mouseX, height - 90);
    } else if (key == "3") {
      image(greenImg, mouseX, height - 90);
    } else if (key == "4") {
      image(yellowImg, mouseX, height - 90);
    } else if (key == "5") {
      image(goldImg, mouseX, height - 90);
    } else {
      image(blackImg, mouseX, height - 90);
    } 
  }
​
  if (secretLevel == true && levelThree == false && levelTwo == false) {
    if (key == "5") {
      image(goldImg, mouseX, height - 90);
    } else {
      image(blackImg, mouseX, height - 90);
    }
  }
}
​
function checkScore() {
  if (ball.col == "red" && key == "1") {
    image(redImg, mouseX, height - 90);
    score += 1;
    totalScore += 1;
    newBall();
    console.log(key)
  } else if (ball.col == "blue" && key == "2") {
    image(blueImg, mouseX, height - 90);
    score += 1;
    totalScore += 1;
    newBall();
  } else if (ball.col == "lime" && key == "3") {
    image(greenImg, mouseX, height - 90);
    score += 1;
    totalScore += 1;
    newBall();
  }  else if (ball.col == "yellow" && key == "4") {
    image(greenImg, mouseX, height - 90);
    score += 1;
    totalScore += 1;
    newBall();
  } else {
    end();
  }
}
​
function secretScore() {
  if (secretBall.col == "gold") {
    image(goldImg, mouseX, height - 90);
    newSecretLevel();
    score += 5;
    if (score == 75) {
      totalScore += score;
    }
    newBall();
  } else {
    newLevel3();
  }
}
​
function newLevel2() {
  background("lightgreen");
  score = 0;
  let newLevelTwo = alert(
    "CONGRATS! You completed the first level. \n\Collect 10 red and blue balls to move onto level two.\nPress 1: turn the box RED\nPress 2: turn the box BLUE\n\nClick 'ok' to start the second level."
  );
  ball.y = 0;
  ball.speed = 6;
  ball.x = int(random(50, windowWidth - 50));
  levelTwo = true;
  levelThree = false;
  secretLevel = false;
  levelFour = false;
}
​
function newLevel3() {
  score = 0;
  let newLevelThree = alert(
    "CONGRATS! You completed the second level. Collect 15 red, blue and GREEN balls to move onto the third level. \nPress 3: turn the box GREEN \n\nOn this third level, you can acces a secret level. You have to collect this ball without letting the other balls fall. If you let a regular ball fall, the game ends. \n\nWhen you see a gold ball drop, press '5' to match the gold ball and access the secret level.\n\nClick 'ok' to start the third level."
  );
​
  if (secretLevel == true) {
    alert(
      "Nice try, but you have to be faster. Catch the secret ball in level 3 again to try again."
    );
    secretLevel = false;
  }
  ball.y = 0;
  ball.speed = 8;
  ball.x = int(random(50, windowWidth - 50));
  levelTwo = false;
  levelThree = true;
  secretLevel = false;
  levelFour = false;
  col.push('lime');
}
​
function newSecretLevel() {
  let secret = alert(
    "CONGRATS! You have reached a secret level! You collect 5 points for each ball you catch. Catch 15 balls and you win the game! \n\n Click ok to start the new level."
  );
  score = 0;
  ball.y = -20;
  ball.speed = 0;
  secretBall.y = 0;
  secretBall.speed = 5;
  secretBall.x = int(random(50, windowWidth - 50));
  levelTwo = false;
  levelThree = false;
  secretLevel = true;
levelFour = false;
}
​
function newLevel4() {
  background("lightgreen");
  score = 0;
  let newLevelFour = alert(
    "CONGRATS! You completed the third level. Collect 15 red, blue, green, and YELLOW balls to win the game.\n\nClick 'ok' to start the fourth and final level."
  );
  col.push('yellow');
  ball.y = 0;
  ball.speed = 10;
  ball.x = int(random(50, windowWidth - 50));
  levelTwo = true;
  levelThree = false;
  secretLevel = false;
  levelFour = false;
}
​
function reset() {
  ball.y = y;
  ball.speed = speed;
  totalScore = 0;
  score = 0;
  levelTwo = false;
  levelThree = false;
  secretLevel = false;
  levelFour = false;
  col.splice(2,1,"lime");
  col.splice(2,1,"yellow");
  col = ["red", "blue"];
  console.log(col);
}
​
function win() {
  let winGame = prompt(
    "CONGRATS! You have completed the game! If you want to play again, type yes. Otherwise, type no and the game will end."
  );
  winGame = winGame.toLowerCase();
  if (winGame == "yes") {
    reset();
    start();
  } else if (winGame == "no") {
    ball.y = y;
    ball.speed = speed;
    secretBall.y = y;
    secretBall.speed = speed;
    reset();
  } else {
    alert("Sorry I'm not sure I understand what you mean. Please try again.");
  }
}
​
function end() {
  // alert("YOU LOSE. Click ok to play again");
  highScore.push(totalScore);
  maxHighScore = max(highScore); //pulls the max number from the array
​
  let again = prompt(
    "You lost.\nYour total score was: " +
      totalScore +
      " and the high score is: " +
      maxHighScore +
      "\n\nDo you want to play again?"
  );
  again = again.toLowerCase();
  if (again == "yes" || again == "y") {
    reset();
    start();
  } else if (again == "no" || again == "n") {
    ball.y = 0;
    ball.speed = 0;
    secretBall.y = 0;
    music.stop();
    secretBall.speed = 0;
  } else {
    alert(
      "Sorry I'm not sure I understand what you are saying. Please try again."
    );
  }
}
​
class Ball {
  constructor(x, y, size, col, speed) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.col = col;
    this.speed = speed;
  }
​
  display() {
    fill(this.col);
    this.y += this.speed;
    circle(this.x, this.y, this.size);
  }
}
​
class Secret {
  constructor(x, y, size, col, speed) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.col = col;
    this.speed = speed;
  }
​
  display() {
    fill(this.col);
    this.y += this.speed;
    circle(this.x, this.y, this.size);
  }
}
​
Cookies

Sketch Files

Console

Preview
