const canvas = document.getElementById("lienzo");
const ctx = canvas.getContext("2d");

const width = (canvas.width = 288);
const height = (canvas.height = 512);

const background = new Image();
background.src = "./assets/bg.png";

class Suelo {
  constructor(ctx) {
    this.ctx = ctx;
    this.sueloImg = new Image();
    this.sueloImg.src = "./assets/suelo.png";
    this.posX = 0;
    this.posY = height - this.sueloImg.height;
  }
  update() {
    this.posX--;
    if (this.posX + this.sueloImg.width === 0) this.posX = 0;
  }
  draw() {
    ctx.drawImage(this.sueloImg, this.posX, this.posY);
    ctx.drawImage(this.sueloImg, this.posX + width, this.posY);
  }
}

class Tuberia {
  constructor(ctx) {
    this.ctx = ctx;
    this.tuberiaImg = new Image();
    this.tuberiaImg.src = "./assets/tuberias.png";
    this.width = 52;
    this.height = 320;
    this.separacion = 60; //min 60 max 120
    this.posX = width / 2;
    this.posY =
      Math.floor(Math.random() * (300 - 100 + 1)) +
      100 -
      Math.floor(this.height * 2 + this.separacion) / 2;
  }

  update() {
    //this.posX--;
  }

  draw() {
    this.ctx.drawImage(
      this.tuberiaImg,
      1 * this.width,
      0,
      this.width,
      this.height,
      this.posX,
      this.posY,
      this.width,
      this.height
    );
    this.ctx.drawImage(
      this.tuberiaImg,
      0 * this.width,
      0,
      this.width,
      this.height,
      this.posX,
      this.posY + this.height + this.separacion,
      this.width,
      this.height
    );
  }
}

class Bird {
  nFramesAnim = 3;
  animFrame = 0;
  gameFrame = 0;
  constructor(ctx) {
    this.ctx = ctx;
    this.birdImg = new Image();
    this.birdImg.src = "./assets/flappybird.png";
    this.posY = height / 2;
    this.posX = width / 8;
    this.width = 34;
    this.height = 24;
  }
  update() {
    this.animFrame = Math.floor(this.gameFrame / 10) % this.nFramesAnim;
    this.gameFrame++;
  }
  draw() {
    this.ctx.drawImage(
      this.birdImg,
      this.animFrame * this.width,
      0,
      this.width,
      this.height,
      this.posX,
      this.posY,
      this.width,
      this.height
    );
  }
}

function gameLoop(timeStamp) {
  ctx.clearRect(0, 0, width, height);
  ctx.drawImage(background, 0, 0, width, height);
  bird.update();
  bird.draw();
  tuberia.update();
  tuberia.draw();
  suelo.update();
  suelo.draw();
  requestAnimationFrame(gameLoop); // Llamar a gameLoop de nuevo en el siguiente fotograma
}

const suelo = new Suelo(ctx);
const bird = new Bird(ctx);
const tuberia = new Tuberia(ctx);

window.onload = () => {
  gameLoop();
};