// https://twitter.com/MadS100tist/status/1284354803997581314

​

let crab, ms, dir;

let crabs = [];

let bubbles = [];

let speed = 5;

let score;

let gameover;

​

function setup() {

  createCanvas(613, 367);

  bg = loadImage("background.jpg");

  msi = loadImage("mads100tist.png");

  ms = new Msc();

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

    crabs[i] = new Crab(random(width), random(height / 2));

  }

  dir = 1;

  gameover = false;

  score = 0;

  bubbles = [];

}

​

function draw() {

  imageMode(CORNER);

  background(bg);

  if (!focused) {

    fill(255);

    textAlign(CENTER, CENTER);

    textSize(30);

    text("Click to start", width / 2, height / 2);

    textSize(20);

​

    text("LEFT/RIGHT Arrows : move scientist\nUP Arrow : blow bubbles", width / 2, 3 * height / 4);

​

​

    image(msi, width - 100, height - 100, 100, 100);

    textAlign(CENTER, CENTER);

    textSize(100);

    text("🦀", 50, height - 30);

    return;

  }

  if (!gameover) {

    if (keyCode === LEFT_ARROW) {

      ms.move(-1 * speed);

      dir = 1.0;

    } else if (keyCode === RIGHT_ARROW) {

      ms.move(speed);

      dir = -1.0;

    }

  } else {

    fill(255);

    textAlign(CENTER, CENTER);

    textSize(30);

    text("Score: " + score, width / 2, height / 2);

    textSize(20);

​

    text("Type ' r ' to restart", width / 2, 3 * height / 4);

​

​

    image(msi, width - 100, height - 100, 100, 100);

    textAlign(CENTER, CENTER);

    textSize(100);

    text("🦀", 50, height - 30);

  }

  ms.display(gameover);

​

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

    crabs[i].move();

    crabs[i].display();

  }

​

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

    bubbles[i].display();

    if (bubbles[i].y < 30) bubbles.splice(i, 1);

  }

​

​

  if (crabs.length == 0)

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

      crabs[i] = new Crab(random(width), random(height / 2));

    }

  textSize(30);

  textAlign(RIGHT, CENTER);

  if (!gameover) text("" + score, 19 * width / 20, height / 10);

​

}

​

class Crab {

  constructor() {

    this.x = 50 + random(width - 140);

    this.y = random(height / 2);

    this.d = random(30, 50);

    this.speed = 1;

  }

​

  move() {

    this.x += random(-this.speed, this.speed) + 0.5 * ((this.x - ms.x) < 0) * (this.y > 9 * height / 10) - 0.5 * ((this.x - ms.x) > 0) * (this.y > 9 * height / 10);

    this.y += random(-this.speed, this.speed) + 0.3;

    this.y = min(this.y, height - 20);

  }

​

  display() {

    textAlign(CENTER, CENTER);

    textSize(40);

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

  }

}

​

class Msc {

  constructor() {

    this.x = random(width);

    this.y = random(height);

    this.diameter = random(10, 30);

    this.speed = 1;

  }

  move(d) {

    this.x += d;

  }

  display(over) {

    this.y = 330;

    push();

    translate(this.x, this.y);

    scale(dir, 1.0 - 2 * over);

    imageMode(CENTER);

    image(msi, 0, 0, 60, 60);

    pop();

​

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

      if (dist(this.x, this.y, crabs[i].x, crabs[i].y) < 20) {

        gameover = true;

      }

    }

​

  }

}

class Bubble {

  constructor(x) {

    this.x = x;

    this.y = height - 30;

    this.speed = -1.5;

  }

​

  display() {

    this.y += this.speed;

    fill(255);

    textAlign(CENTER, CENTER);

    textSize(30);

    text("˳°∘", this.x, this.y);

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

      if (dist(this.x, this.y, crabs[i].x, crabs[i].y) < 20) {

        crabs.splice(i, 1);

        score++;

      }

    }

  }

}

​

function keyPressed() {

  if (keyCode === UP_ARROW) {

    if ((bubbles.length < 5) && (!gameover)) {

      bubbles.push(new Bubble(ms.x));

    }

  } else if ((gameover) && (key === 'r')) setup();

}

​

function keyReleased() {

  keyCode = 0;

  return false;

}