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

const width = (canvas.width = 288);
const height = (canvas.height = 512);
console.log(canvas.width, canvas.height);

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, imagen) {
    this.ctx = ctx;
    this.posX;
    this.posY;
  }

  update() {}

  draw() {}
}

class Bird {
  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() {
    
  }

  draw() {
    this.ctx.drawImage(
      this.birdImg,
      0,
      0,
      this.width,
      this.height,
      this.posX,
      this.posY,
      this.width,
      this.height
    );
  }
}

function generaTuberia() {}

function gameLoop(timeStamp) {
  ctx.clearRect(0, 0, width, height);
  ctx.drawImage(background, 0, 0, width, height);
  suelo.update();
  suelo.draw();

  bird.draw();
  requestAnimationFrame(gameLoop); // Llamar a gameLoop de nuevo en el siguiente fotograma
}

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

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