Enter Your Age

let cat;
let bg;
let r;
let asteroids = [];
let asteroidsP = [];
let asteroidsCount = 20;
let score = 0;
let age = 0;
let circle;

function preload() {
  bg = loadImage("/assets/space.jpg");
  cat = loadImage("/assets/catforspace.png");
  for (let i = 1; i < 5; i++) {
    asteroidsP[i - 1] = loadImage(
      "/assets/ast" + i + ".png"
    );
  }
}

class Asteroid {
  constructor() {
    this.x = random(width - width);
    this.y = random(height);
    this.size = random(30, 100);
    this.speed = random(1, 3);
    this.image = random(asteroidsP);
    this.rotationSpeed = random(-0.05, 0.05);
    this.angle = 0;
  }

  update() {
    this.x += this.speed;
    if (this.x > width) {
      this.x = -this.size;
    }
    this.angle += this.rotationSpeed;
  }

  display() {
    push();
    translate(this.x + this.size / 2, this.y + this.size / 2);
    rotate(this.angle);
    imageMode(CENTER);
    image(this.image, 0, 0, this.size, this.size);
    pop();
  }

  isClicked() {
    return (
      mouseX >= this.x &&
      mouseX <= this.x + this.size &&
      mouseY >= this.y &&
      mouseY <= this.y + this.size
    );
  }
}

class Circle {
  constructor() {
    this.x = random(width);
    this.y = random(height);
    this.radius = 30;
    this.xSpeed = random(-2, 2);
    this.ySpeed = random(-2, 2);
  }

  update() {
    this.x += this.xSpeed;
    this.y += this.ySpeed;

    if (this.x - this.radius < 0 || this.x + this.radius > width) {
      this.xSpeed *= -1;
    }
    if (this.y - this.radius < 0 || this.y + this.radius > height) {
      this.ySpeed *= -1;
    }
  }

  display() {
    fill(255, 0, 0);
    ellipse(this.x, this.y, this.radius * 2);

    fill(255);
    textAlign(CENTER, CENTER);
    textSize(16);
    text("enter", this.x, this.y);
  }

  isClicked() {
    const distance = dist(mouseX, mouseY, this.x, this.y);
    return distance <= this.radius;
  }
}

function setup() {
  m = min(windowWidth, windowHeight) * 0.9;
  p = 168 / 397;
  q = 266 / 397;
  createCanvas(m, m);
  r = bg.width / width;
  image(bg, 0, 0, bg.width / r, bg.height / r);
  noCursor();

  for (let i = 0; i < asteroidsCount; i++) {
    asteroids.push(new Asteroid());
  }

  circle = new Circle();
}

function draw() {
  image(bg, 0, 0, bg.width / r, bg.height / r);

  if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
    for (let i = 0; i < 20; i++) {
      stroke(255, 200, 200, 2 + i);
      strokeWeight(30 - i * 2);
      line(p * width + 20 * p, q * height, mouseX, mouseY);
      line(p * width - 20 * p, q * height, mouseX, mouseY);
    }
    push();
    stroke(255, 0, 0, 50);
    strokeWeight(1);
    line(p * width + 20 * p, q * height, mouseX, mouseY);
    line(p * width - 20 * p, q * height, mouseX, mouseY);
    pop();
  }

  for (let i = 0; i < asteroids.length; i++) {
    const asteroid = asteroids[i];
    asteroid.update();
    asteroid.display();

    if (asteroid.isClicked()) {
      asteroids.splice(i, 1);
      i--;
      score++;
      asteroids.push(new Asteroid());
    }
  }

  circle.update();
  circle.display();

  if (circle.isClicked()) {
    age = score;
  }

  fill(255);
  textSize(24);
  textAlign(CENTER);
  text(`Score: ${score}`, width / 2, height - 60);
  text(`Age: ${age}`, width / 2, height - 40);

  image(cat, 0, 0, cat.width / r, cat.height / r);

  if (score >= 130) {
    score = 0;
    asteroids = [];
    for (let i = 0; i < asteroidsCount; i++) {
      asteroids.push(new Asteroid());
    }
  }
}

function mouseClicked() {
  asteroids.push(new Asteroid());
}

function windowResized() {
  setup();
  draw();
}