diff --git a/assets/tuberias.png b/assets/tuberias.png new file mode 100644 index 0000000..739cb4f Binary files /dev/null and b/assets/tuberias.png differ diff --git a/game.js b/game.js index 06d1f9a..3e33daf 100644 --- a/game.js +++ b/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 { - constructor(ctx, imagen) { +class Tuberia { + constructor(ctx) { this.ctx = ctx; - this.posX; - this.posY; + 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() {} + 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();