​

let portconnectImage;

let titleImage;

let instructionImage;

let gameBorderImage;

let gameOverImage;

let leaderBoardImage;

​

let mic;

let volume;

let maxVolume = 0.025668053849324096;

let minVolume = 0;

​

let shooter;

let autoShootTimeout;

let shouldAutoShoot = false;

const autoShootInterval = 180;

const autoShootDelay = 2000; // autoshoot delay in milliseconds

let lastShotFrame = 0;

​

let balls = [];

const bubbleColors = ['red', 'blue', 'yellow', 'green', 'purple'];

let nextBallColor;

const popDelay = 200; // delay (in milliseconds) to prevent immediate popping of balls

​

let timer;

let score = 0;

let potValue;

let forceValue;

let gaugeValue = 0;

let maxGaugeValue = 100;

​

​

function preload() {

  //load image as links

  portConnectImage = loadImage('https://i.imgur.com/pA9jBEW.png');

  titleImage = loadImage('https://i.imgur.com/mR37nnc.png');

  instructionImage = loadImage('https://i.imgur.com/Mt70BXu.png');

  gameBorderImage = loadImage('https://i.imgur.com/i31MbOK.png');

  gameOverImage = loadImage('https://i.imgur.com/ZEsE8cg.png');

  leaderBoardImage = loadImage('https://i.imgur.com/x6cKa95.png');

}

​

class Button {

  constructor(x, y, label, width = 150, height = 50, isHomeButton = false) {

    this.x = x;

    this.y = y;

    this.width = width;

    this.height = height;

    this.label = label;

    this.isHomeButton = isHomeButton;

  }

​

  display() {

    //creating a button, but not drawing it explicitly

      //the button design is part of the background image

    noFill();

    stroke('white');

    strokeWeight(4);

    rectMode(CENTER);

​

    textSize(20);

    if (this.isHomeButton) {

      fill('brown');

    } else {

      fill('black');

    }

    //text(this.label, this.x, this.y);

      //text commented out, as the background image already has the text to the button

  }

​

  isMouseOver() {

    return mouseX > this.x - this.width / 2 && mouseX < this.x + this.width / 2 &&

      mouseY > this.y - this.height / 2 && mouseY < this.y + this.height / 2;

  }

}

​

class InitializePage {

  constructor() {

    // placeholder text for initialize page

    this.instruction = "Press 'Space' to open Chrome options for serial port connection.";

  }

​

  display() {

    clear();

    background('black');

    stroke('white');

    image(portConnectImage, 0, 0, 600, 700);

  }

​

  handleKeyPress() {

    if (key == " ") {

      setUpSerial();

      currentPage = new StartPage();

    }

  }

}

​

​

class StartPage {

  constructor() {

    this.instructionsButton = new Button(width / 2, 505, "Instructions", 350, 60);

    this.playButton = new Button(width / 2, 595, "Play Game", 350, 60);

  }

​

  display() {

    background('black');

    image(titleImage, 50, 0, 500, 700);

​

    this.instructionsButton.display();

    this.playButton.display();

  }

​

  handleButton() {

    if (this.instructionsButton.isMouseOver()) {

      currentPage = new InstructionPage();

    } else if (this.playButton.isMouseOver()) {

      const gamePage = new GamePage();

      gamePage.reset();

      currentPage = gamePage;

    }

  }

​

  handleKeyPress() {

    // nothing to do

  }

}

​

class InstructionPage {

  constructor() {

    this.playButton = new Button(422, 638, "Play", 130, 54);

    this.homeButton = new Button(180, 638, "Home", 130, 54, true);

  }

​

  display() {

    clear();

    background('black');

    stroke('white');

    image(instructionImage, 0, 0, 600, 700);

    this.playButton.display();

    this.homeButton.display();

  }

​

  handleButton() {

    if (this.playButton.isMouseOver()) {

      currentPage = new GamePage();

    } else if (this.homeButton.isMouseOver()) {

      currentPage = new StartPage();

    }

  }

​

  handleKeyPress() {

    // nothing to do

  }

}

​

class GamePage {

  constructor() {

    stroke('white');

    this.homeButton = new Button(188, 56, "Home", 138, 50, true);

    this.restartButton = new Button(410, 56, "Restart", 138, 50);

    setAutoShootTimeout();

  }

  score () {

    // show score

    textAlign(LEFT, TOP);

    textSize(20);

    fill(0);

    text('Score: ' + score, width - 130, 50);

  }

​

​

  display() {

    // bring border

    clear();

    background('black');

    image(gameBorderImage, -76, -10, 756, 750);

​

    shooter.update();

    shooter.display();

​

    // update & draw balls

    for (let i = balls.length - 1; i >= 0; i--) {

      // check if balls cross the bottom border of game box

        // shot value is used to make sure it doesn't consider newly shot balls

      if (balls[i].y + balls[i].radius >= height - 60 && balls[i].y - balls[i].radius <= height - 60 && balls[i].shot == 1 && !balls[i].isPopping()) {

        this.endGame();

      }

      balls[i].update();

      balls[i].display();

​

      // check if balls touch the top border of game box

      if (balls[i].y - balls[i].radius <= 100) {

        balls[i].stop();

      }

​

      // check if ball touches another ball

      for (let j = 0; j < balls.length; j++) {

        if (i !== j && balls[i].intersects(balls[j])) {

          if ((balls[i].color === 'black' || balls[i].color === balls[j].color) && !balls[i].isPopping() && !balls[j].isPopping()) {

            // if ball hits another ball of same colour, make them disappear after a short delay

            balls[i].delayedPop();

            balls[j].delayedPop();

            shooter.setCanShoot(false); // prevent shooting until the balls pop

            setAutoShootTimeout();

          } else {

            // ball hit another ball of different colour

            balls[i].stop();

          }

        }

      }

      // check if balls touch the side borders of game box

      if (balls[i].x - balls[i].radius <= 50 || balls[i].x + balls[i].radius >= 550) {

        balls[i].bounceOffWall();

      }

    }

    // display timer

    textAlign(LEFT, BOTTOM);

    textSize(20);

    fill('white');

    text("Time: " + Math.ceil(timer /  1000) + 's', 45, height - 10);

​

    this.homeButton.display();

    this.restartButton.display();

  }

​

  handleButton() {

    if (this.homeButton.isMouseOver()) {

      currentPage = new StartPage();

    } else if (this.restartButton.isMouseOver()) {

      this.handleRestartButton();

    }

  }

​

  handleKeyPress() {

    // nothing to do

  }

  handleRestartButton() {

    // reset variables

    timer = 60000;

    score = 0;

    balls = [];

    nextBallColor = random(bubbleColors);

    shooter.setColor(nextBallColor);

    shooter = new Shooter(width / 2, height - 50, nextBallColor);

    shooter.setCanShoot(true);

    setAutoShootTimeout();

  }

  endGame() {

    console.log("Game Over");

    currentPage = new GameOverPage(score);

  }

  reset() {

    // reset variables

    timer = 60000;

    score = 0;

    balls = [];

    nextBallColor = random(bubbleColors);

    shooter.setColor(random(bubbleColors));

    shooter = new Shooter(width / 2, height - 50, nextBallColor);

    shooter.setCanShoot(true);

    setAutoShootTimeout();

  }

}

​

class GameOverPage {

  constructor(score) {

    this.score = score;

    this.playerName = '';

    this.submitButton = new Button(354, height - 75, 'Submit', 180, 70);

    this.isSubmitting = false;

    this.minNameLength = 4;

  }

​

   display() {

    clear();

    background('black');

    stroke('white');

    image(gameOverImage, 0, 0, 600, 700);

    textSize(60);

    textAlign(CENTER, CENTER);

    text(this.score, 160, 590);

​

    // max number of characters for player name: 10

    this.playerName = this.playerName.substring(0, 10);

    textSize(32);

    text(this.playerName, width / 2, 405);

​

    this.submitButton.display();

  }

​

  handleButton() {

    if (this.submitButton.isMouseOver()) {

      this.isSubmitting = true;

​

      // validity check for player name

      if (this.isNameValid()) {

        leaderboard.addScore(this.playerName, this.score);

        currentPage = leaderboard;

      } else {

        console.log("Invalid player name");

      }

    }

  }

​

  isNameValid() {

    // validity check: length / taken or not

    return (

      this.playerName.length >= this.minNameLength &&

      this.playerName.length <= 10 &&

      !leaderboard.isNameTaken(this.playerName)

    );

  }

​

  handleKeyPress() {

    if (keyCode === BACKSPACE && keyIsPressed) {

      this.playerName = this.playerName.slice(0, -1);

      keyCode = -1;

    } 

  }

  keyTyped() {

    if (keyCode >= 65 && keyCode <= 90 && this.playerName.length < 10) {

      this.playerName += key;

    }

  }

}

​

class Shooter {

  constructor(x, y, color) {

    this.x = x;

    this.y = y;

    this.color = color;

    this.diameter = 50;

    this.canShootFlag = false;

    this.calculateInitialAngle();

  }

​

  update() {

    if (potValue !== undefined) {

      // map potValue range to angle range

      this.angle = map(potValue, 660, 0, -PI + PI / 9, -PI / 9);

      // make sure that angle is within specified range

      this.angle = constrain(this.angle, -PI + PI / 9, -PI / 9);

    }

  }

​

  display() {

    // draw shooter

    fill(this.color);

    ellipse(this.x, this.y, this.diameter, this.diameter);

​

    // draw arrow (direction)

    let shooterEndX = this.x + cos(this.angle) * 30;

    let shooterEndY = this.y + sin(this.angle) * 30;

    line(this.x, this.y, shooterEndX, shooterEndY);

  }

  calculateInitialAngle() {

    if (potValue !== undefined) {

      // map potValue range to angle range

      this.angle = map(potValue, 660, 0, -PI + PI / 9, -PI / 9);

      // make sure that angle is within specified range

      this.angle = constrain(this.angle, -PI + PI / 9, -PI / 9);

    } else {

      // if potValue doesn't exist, set angle to middle (upwards)

      this.angle = -PI / 2;

    }

  }

​

  move(offset) {

    // change angle of the shooter within specified range

    const angleDifference = PI / 18;

    this.angle = constrain(this.angle + offset * angleDifference, -PI + PI / 9, -PI / 9);

  }

​

  setColor(newColor) {

    this.color = newColor;

  }

​

  setCanShoot(value) {

    this.canShootFlag = value;

    clearTimeout(autoShootTimeout);

  }

​

  canShoot() {

    return this.canShootFlag;

  }

}

​

class Ball {

  constructor(x, y, angle, color) {

    this.x = x;

    this.y = y;

    this.diameter = 50;

    this.radius = this.diameter / 2;

    this.speed = 10;

    this.angle = angle;

    this.color = color;

    this.stopped = false;

    this.popping = false;

    this.popTimer = 0; // timer for delayed popping

    // value to check if it's newly shot ball or not

      // 0 means it's a new ball that's being shot / moving

      // 1 means it's a ball that was shot before

    this.shot = 0;

  }

​

  update() {

    if (!this.stopped && !this.popping) {

      this.x += cos(this.angle) * this.speed;

      this.y += sin(this.angle) * this.speed;

    }

    if (this.shot === 0) {

        for (let j = 0; j < balls.length; j++) {

          if (this !== balls[j] && this.intersects(balls[j])) {

            // ball hit another ball

            this.shot = 1;

            this.stop();

            break;

          }

        }

        if (this.y - this.radius <= 100) {

          // ball hit the top border

          this.shot = 1;

          this.stop();

        }

      }

​

    // update pop timer

    if (this.popTimer > 0) {

      this.popTimer -= deltaTime;

      if (this.popTimer <= 0) {

        this.pop();

        shooter.canShootFlag = 'true';

      }

    }

  }

​

  display() {

    fill(this.color);

    ellipse(this.x, this.y, this.diameter, this.diameter);

  }

​

  stop() {

    this.stopped = true;

    if (this.color === 'black') {

      // black ball: bonus ==> pop regarldess of colour

      for (let j = 0; j < balls.length; j++) {

        if (this !== balls[j] && this.intersects(balls[j]) && !balls[j].isPopping()) {

          balls[j].delayedPop();

          this.delayedPop();

        }

      }

    }

  }

​

  delayedPop() {

    this.popTimer = popDelay;

    this.popping = true;

  }

​

  pop() {

    this.x = -100; // moving it off screen

    this.y = -100;

    this.stopped = true;

    score += 1;

  }

​

  bounceOffWall() {

    this.angle = PI - this.angle;

  }

  intersects(otherBall) {

    // ball intersection must consider the strokewieght of the balls

      //otherwise, the balls are drawn in a seemingly overlapping way

    let thisEffectiveRadius = this.radius + this.diameter * 0.05; 

    let otherEffectiveRadius = otherBall.radius + otherBall.diameter * 0.05; // Adjust the factor based on stroke weight

    let distance = dist(this.x, this.y, otherBall.x, otherBall.y);

    let minDistance = thisEffectiveRadius + otherEffectiveRadius;

​

    return distance < minDistance;

​

}

​

  isMoving() {

    return !this.stopped && !this.popping;

  }

​

  isPopping() {

    return this.popping;

  }

}

​

​

class Leaderboard {

  constructor() {

    this.scores = [];

    this.replayButton = new Button(390, 660, 'Replay', 105, 50);

    this.homeButton = new Button(210, 660, 'Home', 105, 50, true);

  }

​

  addScore(playerName, score) {

    // add score to leaderboard

    this.scores.push({ playerName, score });

​

    // store all scores if there are fewer than 'maxScores'(=max number of scores it can store) scores

      // if not, sort and only keep 'maxScores'(=max number of scores it can store) scores

    if (this.scores.length > this.maxScores) {

      // sort scores (highest to lowest)

      this.scores.sort((a, b) => b.score - a.score);

      this.scores = this.scores.slice(0, this.maxScores);

    }

  }

​

  isNameTaken(playerName) {

    // check if another player took the name (has the same name as typed name)

    return this.scores.some(entry => entry.playerName === playerName && entry.playerName.length === playerName.length);

  }

​

  display() {

    clear();

    background('black');

    stroke('white');

    image(leaderBoardImage, 0, 0, 600, 700);

​

    // sort scores (highest to lowest)

    this.scores.sort((a, b) => b.score - a.score); //needed? isn't it already sorted?

​

    // print all players + scores

    strokeWeight(1);

    for (let i = 0; i < this.scores.length; i++) {

      const entry = this.scores[i];

      let textSizeValue = 22; // default text size (ranks 3, 4, 5)

      let text_x;

      let text_y;

​

      // set x, y coordinates & text size for each ranker

      if (i === 0) {

        textSizeValue = 36; 

        text_x = 90;

        text_y = 205;

      } else if (i === 1) {

        textSizeValue = 28;

        text_x = 110;

        text_y = 305;

      } else if (i == 2) {

        text_x = 135;

        text_y = 405;

      } else if (i == 3) {

        text_x = 135;

        text_y = 495;

      } else if (i == 4) {

        text_x = 135;

        text_y = 580;

      }

​

      textSize(textSizeValue);

      fill('white');

​

      // print player + score

      textAlign(LEFT, CENTER);

      text(`${entry.playerName}`, text_x, text_y);

      textAlign(RIGHT, CENTER);

      text(`${entry.score}`, width - text_x, text_y);

    }

​

    this.replayButton.display();

    this.homeButton.display();

  }

​

  handleButton() {

    if (this.replayButton.isMouseOver()) {

      // reset variables

      timer = 60000;

      score = 0;

      balls = [];

      shooter.setCanShoot(true);

      setAutoShootTimeout();

      currentPage = new GamePage();

    } else if (this.homeButton.isMouseOver()) {

      // reset variables

      timer = 60000;

      score = 0;

      balls = [];

      nextBallColor = random(bubbleColors);

      shooter.setColor(random(bubbleColors));

      shooter = new Shooter(width / 2, height - 50, nextBallColor);

      shooter.setCanShoot(true);

      setAutoShootTimeout();

      currentPage = new StartPage();

    }

  }

​

  handleKeyPress() {

    // nothing to do

  }

}

​

​

​

function autoShoot() {

    if (shooter.canShoot()) {

      // adjust speed based on calculated speed

      let adjustedSpeed = calculateAdjustedSpeed(volume);

      let ball = new Ball(shooter.x, shooter.y, shooter.angle, nextBallColor);

      ball.speed = adjustedSpeed; // Set the ball speed based on volume

      balls.push(ball);

      // set next ball colour / shooter colour

      nextBallColor = random(bubbleColors);

      shooter.setColor(nextBallColor);

      shooter.setCanShoot(true); 

      // adjust delay

      let adjustedDelay = autoShootDelay * map(volume, minVolume, maxVolume, 0.5, 2);

​

      setAutoShootTimeout();

    }

}

​

function setAutoShootTimeout() {

  autoShootTimeout = setTimeout(autoShoot, autoShootDelay);

}

​

function setup() {

  createCanvas(600, 700);

  nextBallColor = random(bubbleColors);

  shooter = new Shooter(width / 2, height - 50, nextBallColor);

  shooter.canShootFlag = true; 

  leaderboard = new Leaderboard();

  mic = new p5.AudioIn();

  mic.start();

  timer = 60000; // set game timer to 60 seconds

  if (!serialActive) {

    currentPage = new InitializePage();

  }

  else {

    currentPage = new StartPage();

  }

}

​

function draw() {

  clear();

  background(220);

  currentPage.display();

  currentPage.handleKeyPress();

  if (currentPage instanceof GamePage) {

    // update timer

    if (timer > 0) {

      timer -= deltaTime;

    } else {

      currentPage.endGame();

    }

    volume = mic.getLevel() * 10000;

    //console.log('Volume: ', volume);

​

    //////////////////////////////////

    //SEND TO ARDUINO HERE (handshake)

    //////////////////////////////////

    let sendToArduino = score + "\n";

    writeSerial(sendToArduino);

​

    shooter.update();

    shooter.display();

​

    for (let i = balls.length - 1; i >= 0; i--) {

      balls[i].update();

      balls[i].display();

​

      // check if ball hits top border of game box

      if (balls[i].y - balls[i].radius <= 100) {

        balls[i].stop();

      }

​

      // check if ball hits another ball

      for (let j = 0; j < balls.length; j++) {

        if (i !== j && balls[i].intersects(balls[j])) {

          if ((balls[i].color === 'black' || balls[i].color === balls[j].color) && !balls[i].isPopping() && !balls[j].isPopping()) {

            balls[i].delayedPop();

            balls[j].delayedPop();

            shooter.setCanShoot(false);

            setAutoShootTimeout();

            autoShoot();

          } else {

            balls[i].stop();

          }

        }

      }

      // check if ball hits side border of game box

      if (balls[i].x - balls[i].radius <= 50 || balls[i].x + balls[i].radius >= 550) {

        balls[i].bounceOffWall();

      }

    }

    if (volume > 1000 && gaugeValue < maxGaugeValue){

      gaugeValue += 1;

    } else if (volume < 700 && gaugeValue > 0) {

      gaugeValue -= 1;

    }

    if (gaugeValue >= 100) {

      nextBallColor = 'black';

      shooter.setColor('black');

      gaugeValue = 0;

    } 

    // set values & draw guage

    let gaugeX = width - 120;

    let gaugeY = height - 110;

    let gaugeWidth = 100;

    let gaugeHeight = 20;

    drawGauge(gaugeX, gaugeY, gaugeWidth, gaugeHeight, gaugeValue, maxGaugeValue);

​

  }

  //

}

​

// function for gauge

function drawGauge(x, y, width, height, value, maxValue) {

  // calculate fill width based on the volume

  let fillWidth = map(value, 0, maxValue, 0, width);

  let gaugeColor = 'green'; // Color of the gauge fill

​

  // draw border for gauge

  noFill();

  stroke('white');

  rect(x + 20, 680, width, height);

​

  // draw fill for gauge

  rectMode(CORNER);

  fill(gaugeColor);

  noStroke();

  rect(x - 29, 680 - 10, fillWidth, height);

  //write gauge text

  textAlign(RIGHT, CENTER);

  textSize(20);

  noStroke();

  fill('green');

  text("GAUGE: ", x - 30, 680);

}

​

function calculateAdjustedSpeed(volume) {

  // mapping for volume deleted as the feature was deleted

  let adjusted = 10;

  return adjusted;

}

​

function mousePressed() {

  if (!(currentPage instanceof InitializePage)) {

    currentPage.handleButton();

  }

}

​

function keyPressed() {

  if (currentPage instanceof GamePage) {

    const previousBallMoving = balls.length === 0 || !balls[balls.length - 1].isMoving();

    if ((keyCode === ENTER || (forceValue === 0 && shooter.canShoot())) && previousBallMoving) {

      // shoot a new ball

      if (shooter.canShoot()) {

        let ball = new Ball(shooter.x, shooter.y, shooter.angle, nextBallColor);

        balls.push(ball);

        nextBallColor = random(bubbleColors);

        shooter.setColor(nextBallColor);

        shooter.setCanShoot(true); 

        setAutoShootTimeout();

      }

    }

  } else {

    currentPage.handleKeyPress();

  }

}

​

​

function keyTyped() {

  if (currentPage instanceof GameOverPage) {

    currentPage.keyTyped();

  }

}

​

​

function readSerial(data) {

  ////////////////////////////////////

  //READ FROM ARDUINO HERE

  ////////////////////////////////////

  if (data != null) {

    //console.log(data);

    let fromArduino = split(trim(data), ",");

    if (fromArduino.length == 2) {

      potValue = int(fromArduino[0]);

      forceValue = int(fromArduino[1]);

      if (currentPage instanceof GamePage){

        const previousBallMoving = balls.length === 0 || !balls[balls.length - 1].isMoving();

        if (forceValue == 1 && shooter.canShoot() && previousBallMoving) {

        if (shooter.canShoot())

        console.log("shooting through force sensor");

        let ball = new Ball(shooter.x, shooter.y, shooter.angle, nextBallColor);

        balls.push(ball);

        nextBallColor = random(bubbleColors);

        shooter.setColor(nextBallColor);

        shooter.setCanShoot(true);

        setAutoShootTimeout();

      }

      }

    }

  }

}

​