let drops = [];

var bucket;

var dropSpeed = 4;

var gap = -2000;

var dropSize = 20;

var bucketSpeed = 3;

var counter = 0;

var highscore = 0;

var interval = 10000;

var timer;

var countdown;

var gameOn = false;

var gameEnd = false;

var state = 0; // 0=opening screen; 1=game play; 2=game over screen

var bgColor = 255;

var startBtn;

​

​

function setup() {

  createCanvas(400, 400);

  rectMode(CENTER);

  for (let i = 0; i < 5; i++) {

    drops[i] = new Drop(random(width), random(-20, gap), dropSize, dropSpeed);

  }

  bucket = new Bucket(width / 2, height -5, 60, 10);

  timer = millis() + interval;

  startBtn = new Button(width / 2, height / 2, 100, 50, "PLAY");

}

​

function draw() {

  background(bgColor);

  for (let i = 0; i < 5; i++) {

    drops[i].reset();

    drops[i].move();

    drops[i].render();

  }

  for (let i = 0; i < 5; i++) {

    drops[i].caught();

  }

//   drop1.reset();

//   drop1.move();

//   drop1.render();

//   drop2.reset();

//   drop2.move();

//   drop2.render();

//   drop3.reset();

//   drop3.move();

//   drop3.render();

//   drop4.reset();

//   drop4.move();

//   drop4.render();

//   drop5.reset();

//   drop5.move();

//   drop5.render();

​

//   drop1.caught();

//   drop2.caught();

//   drop3.caught();

//   drop4.caught();

//   drop5.caught();

​

  bucket.render();

​

  if (timer < millis()) {

    timer = millis() + interval;

  }

​

  if (gameOn) {

    countdown = ceil((timer - millis()) / 1000) - 1;

  }

​

  if (countdown === 0) {

    gameOver();

  }

​

  if (keyIsPressed) {

    start();

    state = 1;

  }

​

  if (state === 0) {

    bgColor = 255;

    fill(0);

    // text("press any key to begin", width / 2, height / 2);

    startBtn.render();

    startBtn.click();

  } else if (state === 1) {

    bgColor = 255;

    fill(0);

    text("countdown: " + countdown, 50, 50);

  } else if (state === 2) {

    bgColor = 0;

    fill(255);

    text("score: " + counter, 50, 50);

    text("highscore: " + highscore, 50, 70);

​

  }

​

}

​

function gameOver() {

  for (let i = 0; i < 5; i++) {

    drops[i].alive = false;

  }

  // drop1.alive = false;

  // drop2.alive = false;

  // drop3.alive = false;

  // drop4.alive = false;

  // drop5.alive = false;

  // bucket.alive = false;

  gameOn = false;

  state = 2;

  if (counter > highscore) {

   highscore = counter; 

  }

}

​

function start() {

  timer = millis() + interval;

   for (let i = 0; i < 5; i++) {

    drops[i].alive = true;

  }

  // drop1.alive = true;

  // drop2.alive = true;

  // drop3.alive = true;

  // drop4.alive = true;

  // drop5.alive = true;

  // bucket.alive = true;

  gameOn = true;

  counter = 0;

}

​

​

function mouseMoved() {

  bucket.x = constrain(mouseX, bucket.w / 2, width - bucket.w / 2);

}

​

class Drop {

​

  constructor(x, y, w, speed) {

    this.x = x;

    this.y = y;

    this.w = w;

    this.speed = speed;

    this.alive = false;

  }

​

  reset() {

    if (this.y > height) {

      this.x = random(width);

      this.y = random(-20, gap);

      this.alive = true;

    }

  }

​

  move() {

    if (this.alive) {

      this.y += this.speed;

    } else {

      this.x = random(width);

      this.y = random(-20, gap);

    }

  }

​

  render() {

    if (this.alive) {

      fill(0)

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

    }

  }

​

  caught() {

    if (this.y >= bucket.y &&

      this.x > bucket.x - bucket.w / 2 &&

      this.x < bucket.x + bucket.w / 2) {

      counter++;

​

      this.x = random(width);

      this.y = random(-20, gap);

    }

  }

​

}

​

class Bucket {

​

  constructor(x, y, w, h) {

    this.x = x;

    this.y = y;

    this.w = w;

    this.h = h;

    this.alive = false;

  }

​

  render() {

    if (this.alive) {

      fill(0);

      rect(this.x, this.y, this.w, this.h);

    }

  }

}

​

class Button {

​

  constructor(x, y, w, h, text) {

    this.x = x;

    this.y = y;

    this.w = w;

    this.h = h;

    this.text = text;

  }

​

  render() {

    textAlign(CENTER);

    stroke(0);

    fill(255);

    rect(this.x, this.y, this.w, this.h);

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

  }

​

  click() {

​

      if (

        mouseIsPressed &&

        mouseX > this.x-this.w/2 &&

        mouseX < this.x + this.w/2 &&

        mouseY > this.y-this.h/2 &&

        mouseY < this.y + this.h/2) {

​

        start();

        state = 1;

​

    }

  }

​

}