animaciones y tuberias

game.js

@@ -3,7 +3,6 @@ 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";
@@ -26,19 +25,55 @@ class Suelo {
   }
 }
 
-class tuberia {
+class Tuberia {
-  constructor(ctx, imagen) {
+  constructor(ctx) {
     this.ctx = ctx;
-    this.posX;
+    this.tuberiaImg = new Image();
-    this.posY;
+    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() {}
+  update() {
+    //this.posX--;
+  }
 
-  draw() {}
+  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();
@@ -48,15 +83,14 @@ class Bird {
     this.width = 34;
     this.height = 24;
   }
-
   update() {
-    
+    this.animFrame = Math.floor(this.gameFrame / 10) % this.nFramesAnim;
+    this.gameFrame++;
   }
-
   draw() {
     this.ctx.drawImage(
       this.birdImg,
-      0,
+      this.animFrame * this.width,
       0,
       this.width,
       this.height,
@@ -68,20 +102,21 @@ class Bird {
   }
 }
 
-function generaTuberia() {}
-
 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();
-
-  bird.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();