bubbleTrouble.js

var canvasWidth = 500;
var canvasHeight = 500;
var g = 0.04;

var playerWidth = 30;
var playerHeight = 50;

var gameState = "start";
var playerX, projectile, balls, numArrowsUsed, startTime, timeElapsed;
reset();

function reset() {
  playerX = canvasWidth / 2 - playerWidth / 2;
  projectile = null;
  balls = [{
    x: canvasWidth / 2,
    y: canvasHeight / 4,
    vx: 0,
    vy: 0,
    diam: 100,
    color: "green"
  }];
  numArrowsUsed = 0;
  startTime = Date.now();
}

// TODO
// - collision between balls
// - collision between player and balls
// - score
// - colors

function setup() {
  createCanvas(500, 500);
  noStroke();
  textSize(32);
}

function draw() {
  background(0);

  switch (gameState) {
    case "start":
      fill(255);
      text("press any key to start", canvasWidth / 2, canvasHeight / 4);
      return;
    case "win":
      fill(255);
      text("you win", canvasWidth / 2, canvasHeight / 4);
      text(numArrowsUsed + "arrows used", canvasWidth / 2, canvasHeight / 4 + 30);
      text(timeElapsed + "seconds", canvasWidth / 2, canvasHeight / 4 + 60);
      return;
    case "loss":
      fill(255);
      text("game over", canvasWidth / 2, canvasHeight / 4);
      return;
  }

  if (balls.length === 0) {
    gameState = "win";
    timeElapsed = (Date.now() - startTime) / 1000;
  }

  fill(255);
  rect(playerX, canvasHeight - playerHeight, playerWidth, playerHeight);
  noFill();


  // drawing and updating the balls  
  newBalls = [];

  fill(255);
  for (var i = 0; i < balls.length; i++) {
    var b = balls[i];
    var rad = b.diam / 2;

    ellipse(b.x, b.y, b.diam, b.diam);

    // collision detection with floor and ceiling
    if (b.y < rad || b.y > canvasHeight - rad) {
      b.vy = -b.vy;
    }

    // collision detection with walls
    if (b.x < rad || b.x > canvasWidth - rad) {
      b.vx = -b.vx;
    }

    // collision detection with sides of player
    if (
      b.y > canvasHeight - playerHeight - rad &&
      b.x > playerX - rad &&
      b.x < playerX + playerWidth + rad
    ) {
      gameState = "loss";
    }

    // collision detection with projectile
    if (
      projectile != null && b.x - b.diam / 2 < projectile.x &&
      projectile.x < b.x + b.diam / 2 &&
      b.y + b.diam / 2 >= projectile.y
    ) {
      if (b.diam > 40) {
        newBalls.push({
          x: b.x - b.diam / 4,
          y: b.y,
          vx: -abs(b.vx) - random(0.5, 2),
          vy: -abs(b.vy),
          diam: b.diam / 2,
          color: b.color
        });
        newBalls.push({
          x: b.x + b.diam / 4,
          y: b.y,
          vx: abs(b.vx) + random(0.5, 2),
          vy: -abs(b.vy),
          diam: b.diam / 2,
          color: b.color
        });
      }
      projectile = null;
    } else {
      newBalls.push(b);
    }


    // update balls movement
    b.x += b.vx;
    b.y += b.vy;
    b.vy += g;
  }
  noFill();
  balls = newBalls;

  // collision between balls
  // for (var i = 0; i < balls.length; i++) {
  //   var b = balls[i];
  //   for (var j = 0; j < balls.length; j++) {
  //     var c = balls[j];
  //   }
  // }

  // drawing and updating the projectile
  if (projectile != null) {
    stroke(255, 0, 0);
    line(projectile.x, canvasHeight - playerHeight, projectile.x, projectile.y);
    projectile.y -= 3;
    if (projectile.y === 0) {
      projectile = null;
    }
    noStroke();
  }


  // player movement
  if (keyIsDown(LEFT_ARROW)) {
    playerX -= 5;
    if (playerX < 0) {
      playerX = 0
    }
  }

  if (keyIsDown(RIGHT_ARROW)) {
    playerX += 5;
    if (playerX > canvasWidth - playerWidth) {
      playerX = canvasWidth - playerWidth;
    }
  }
}

function keyPressed() {
  if (gameState !== "playing") {
    gameState = "playing";
    reset();
    return false;
  }

  if (key === " " && projectile == null) {
    projectile = {
      x: playerX + playerWidth / 2,
      y: canvasHeight - playerHeight
    };
    numArrowsUsed++;
  }
  return false; // prevent any default behaviour
}