let crabs = [];

let bubbles = [];

let speed = 5;

let overallSpeed;

let score;

let gamestarted, gameover;

let btn = "";

let lastB;

let lambda;

let sx, sy;

​

function preload() {

  spectrum = loadImage("images/spectrum.png");

  m1 = loadImage("images/mirror1.png");

  laser = loadImage("images/laser.png");

  msi = loadImage("mads100tist.png");

​

}

​

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  dir = 1;

  gameover = false;

  score = 0;

  bubbles = [];

  lastB = millis();

  gamestarted = false;

  gameInitialized = false;

  overallSpeed = 0;

  lambda = 380;

  mirror1 = new M1();

  mirror2 = new M1();

​

}

​

function initializeGame() {

  ms = new Scientist();

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

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

  }

  gameInitialized = true;

}

​

function draw() {

  background(128);

  sx = windowWidth / 10;

  sy = windowHeight / 20;

​

  drawingContext.save();

  drawingContext.setLineDash([16, 10]);

  strokeWeight(0.2);

  stroke(255);

  //line(sx * 0.5, 0, sx * 0.5, windowHeight);

  line(sx * 1.5, 0, sx * 1.5, windowHeight);

  line(sx * 8.5, 0, sx * 8.5, windowHeight);

  line(0, sy * 19, windowWidth, sy * 19);

  drawingContext.restore();

​

  imageMode(CORNERS);

  image(spectrum, 0, windowHeight / 2, sx * 0.5, windowHeight - sy);

  h = windowHeight - ((lambda - 380) / 400) * (windowHeight / 2 - sy) - sy;

  push();

  translate(sx * 0.5, h);

  strokeWeight(1);

  stroke(0);

  fill(get(1, h - 1));

  triangle(0, 0, 10, -10, 10, 10);

  line(0, 0, -sx/2, 0);

  pop();

​

  mirror1.x = 8.5 * sx;

  mirror1.display(0);

  mirror2.x = 1.5 * sx;

  mirror2.y += 1;

  mirror2.y = constrain(mirror2.y,0,15*sy);

  mirror2.display(-PI/2);

​

  imageMode(CENTER);

  push();

  translate(8.5 * sx, 19 * sy);

  rotate(PI / 2);

  image(m1, 0, 0, sx, sx);

  pop();

​

  push();

  translate(1.5 * sx, 17 * sy);

  rotate(-PI);

  image(m1, 0, 0, sx, sx);

  pop();

​

  push();

  translate(sx*5, 19 * sy);

  image(laser, -laser.width/4, 0, laser.width*sy*4/laser.height,sy*4);

  pop();

​

  // debug info

  textAlign(CENTER, TOP);

  fill(0, 255, 0);

  strokeWeight(2);

  textSize(10);

  text(sx + " " + width + " " + windowWidth, width / 2, height / 2);

  text(sx + " " + width + " " + windowWidth, width / 2, height / 2);

  /*

​

  let display = touches.length + ' touches';

  text(display, width / 2, 20);

  if (!isUndefined(deviceOrientation)) text(deviceOrientation, width / 2, 30);

  text("win: " + windowWidth + "," + windowHeight, width / 2, 40);

  if (touches.length) {

    text("evt: " + int(touches[0].x) + "," + int(touches[0].y), width / 2, 50);

  }

  */

​

  btn = "";

  if (touches.length) {

    text("evt: " + int(touches[0].x) + "," + int(touches[0].y), width / 2, height / 2 + 30);

​

    if ((touches[0].x < sx) && (touches[0].y > windowHeight / 2)) {

      lambda = map(touches[0].y, windowHeight - sy, windowHeight / 2, 380, 780);

      lambda = constrain(lambda, 380, 780);

    } else if ((touches[0].x > 8 * sx) && (touches[0].y < 17 * sy)) {

      mirror1.y = touches[0].y;

      mirror1.y = constrain(mirror1.y, 5 * sy, 17 * sy);

    } else if ((touches[0].x >1 * sx) && (touches[0].x <2 * sx)&&(touches[0].y < 17 * sy)) {

      mirror2.y = touches[0].y;

      mirror2.y = constrain(mirror2.y, 4 * sy, 17 * sy);

    }

​

    if (btn != "") gamestarted = true;

  }

​

  if (btn === "restart") {

    setup();

  }

​

  if (gamestarted && !gameInitialized) initializeGame();

​

  if (!gameover) {

​

    if (btn === "left") {

      ms.move(-1 * speed);

      dir = 1.0;

    } else if (btn === "right") {

      ms.move(speed);

      dir = -1.0;

    }

    if ((btn === "air") && (bubbles.length < 5) && (millis() - lastB) > 300) {

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

      lastB = millis();

    }

  }

​

​

  if (gameInitialized) {

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

    }

    textSize(30);

    textAlign(RIGHT, CENTER);

​

    if (!gameover) {

      textSize(30);

      stroke(64);

      strokeWeight(4);

      fill(255, 255, 0);

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

    }

    if (crabs.length == 0) {

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

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

      }

      overallSpeed += 0.02;

    }

  } else {

​

    fill(255);

    textAlign(CENTER, CENTER);

    textSize(30);

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

​

    imageMode(CORNER);

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

    textAlign(LEFT, TOP);

    textSize(80);

    //scale(-1,1);

    text("🔬", 0, 20);

  }

  if (gameover) {

    fill(255);

    textAlign(CENTER, CENTER);

    textSize(30);

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

    textSize(20);

​

    text("Restart", width / 2, 3 * height / 4);

​

​

    imageMode(CORNER);

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

    textAlign(LEFT, TOP);

    textSize(100);

    text("🦀", 0, 0);

    return;

  }

}

​

function touchStarted() {

  var fs = fullscreen();

  if (!fs) {

    fullscreen(true);

  }

}

​

/* full screening will change the size of the canvas */

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

/* prevents the mobile browser from processing some default

 * touch events, like swiping left for "back" or scrolling

 * the page.

 */

document.ontouchmove = function(event) {

  event.preventDefault();

};

​

function isUndefined(value) {

  // Obtain `undefined` value that's

  // guaranteed to not have been re-assigned

  var undefined = void(0);

  return value === undefined;

}

​

​

class Scientist {

  constructor() {

    this.x = width / 2;

    this.y = height - 30;

    this.speed = 1;

  }

  move(d) {

    this.x += d;

    this.y = height - 30;

​

  }

  display(over) {

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

    strokeWeight(2);

    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++;

      }

    }

  }

}

​

class Crab {

  constructor() {

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

    this.y = random(height / 2);

    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.2 + overallSpeed;

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

  }

​

  display() {

    textAlign(CENTER, CENTER);

    textSize(40);

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

  }

}

class M1 {

  constructor() {

    this.y = height / 2;

    this.x = 9.5 * sx;

​

  }

  display(angle) {

    push();

    translate(this.x, this.y);

    rotate(angle);

    imageMode(CENTER);

    image(m1, 0, 0, sx, sx);

    pop();

  }

}