x: 55,

  y: 55

}

let profChar = {

  x: 60,

  y: 80

}

​

let profChar_x = 0;

let profChar_y = 10;

let drops = [];

var bucket;

var dropSpeed = 4;

var gap = -2000;

var dropSize = 10;

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/restart screen

var bgColor = 255;

var startBtn, restartBtn;

​

function setup() {

  createCanvas(700, 500);

  //rectMode(CENTER);

  changeDirection = false;

  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");

  restartBtn = new Button(width / 2, height / 2, 100, 50, "RESTART");

​

}

​

function draw() {

  background(220);

  // Main character movement

  if (mouseIsPressed) {

    mainChar_x = mouseX;

    mainChar_y = mouseY;

  }

  else {

    mainChar_x = width/2 - mainChar.x/2;

    mainChar_y = height - mainChar.x;

  }

  if (!mouseIsPressed) {

    textSize(25);

    text('click to move', width/2 - 70, height - 60);

  }

  square(mainChar_x, mainChar_y, mainChar.x);

  // Professor Owl movement

  rect(profChar_x, profChar_y, profChar.x, profChar.y);

  if(profChar_x > width - profChar.x) changeDirection = true;

  else if (profChar_x <= 0) changeDirection = false;

  if (profChar_x >= 0 && changeDirection == false) profChar_x++;

  else if(changeDirection == true) profChar_x--;

​

}

​

​

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;

​

    }

  }

​

}