89 lines
1.7 KiB
JavaScript
89 lines
1.7 KiB
JavaScript
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();
|
|
};
|