433 lines
9.8 KiB
JavaScript
433 lines
9.8 KiB
JavaScript
const canvas = document.getElementById("lienzo");
|
|
const ctx = canvas.getContext("2d");
|
|
const width = (canvas.width = 288);
|
|
const height = (canvas.height = 512);
|
|
ctx.scale(1, 1);
|
|
|
|
const states = {
|
|
IDLE: 0,
|
|
RUNNING: 1,
|
|
GAMEOVER: 2,
|
|
};
|
|
|
|
const images = {};
|
|
const audiosFx = {};
|
|
|
|
function cargarRecursos(images, audioFx, callback) {
|
|
const recursos = [
|
|
{ nombre: "bg", tipo: "imagen" },
|
|
{ nombre: "suelo", tipo: "imagen" },
|
|
{ nombre: "tuberias", tipo: "imagen" },
|
|
{ nombre: "flappybird", tipo: "imagen" },
|
|
{ nombre: "logo", tipo: "imagen" },
|
|
{ nombre: "ready", tipo: "imagen" },
|
|
{ nombre: "gameover", tipo: "imagen" },
|
|
{ nombre: "taptap", tipo: "imagen" },
|
|
{ nombre: "gameover", tipo: "audio" },
|
|
{ nombre: "coin", tipo: "audio" },
|
|
{ nombre: "flap", tipo: "audio" },
|
|
];
|
|
let recursosCargados = 0;
|
|
|
|
recursos.forEach((recurso) => {
|
|
if (recurso.tipo === "imagen") {
|
|
const img = new Image();
|
|
img.src = `./assets/${recurso.nombre}.png`;
|
|
img.onload = () => {
|
|
recursosCargados++;
|
|
if (recursosCargados === recursos.length) {
|
|
callback();
|
|
}
|
|
};
|
|
images[recurso.nombre] = img;
|
|
} else if (recurso.tipo === "audio") {
|
|
const audio = new Audio();
|
|
audio.src = `./assets/${recurso.nombre}.ogg`;
|
|
audio.addEventListener("canplaythrough", () => {
|
|
recursosCargados++;
|
|
if (recursosCargados === recursos.length) {
|
|
callback();
|
|
}
|
|
});
|
|
audioFx[recurso.nombre] = audio;
|
|
}
|
|
});
|
|
}
|
|
|
|
class State {
|
|
constructor(state) {
|
|
this.state = state;
|
|
}
|
|
}
|
|
|
|
class StateIdle extends State {
|
|
constructor(sprites) {
|
|
super("IDLE");
|
|
this.bird = sprites[0];
|
|
this.tuberias = [sprites[1], sprites[2]];
|
|
sprites.push(new Ready(), new TapTap());
|
|
}
|
|
enter() {
|
|
this.bird.velY = this.bird.gravedad = 0;
|
|
this.tuberias.forEach((tuberia) => {
|
|
tuberia.velocidad = 0;
|
|
});
|
|
}
|
|
}
|
|
|
|
class StateRunnig extends State {
|
|
constructor(sprites) {
|
|
super("RUNNING");
|
|
this.bird = sprites[0];
|
|
this.tuberias = [sprites[1], sprites[2]];
|
|
this.suelo = sprites[3];
|
|
sprites.splice(-2);
|
|
}
|
|
enter() {
|
|
this.bird.inicializa();
|
|
this.bird.velY = 0;
|
|
this.bird.gravedad = 0.2;
|
|
this.bird.nFramesAnim = 3;
|
|
this.tuberias.forEach((tuberia) => {
|
|
tuberia.inicializa();
|
|
tuberia.velocidad = 1.5;
|
|
});
|
|
this.suelo.velocidad = 1.5;
|
|
}
|
|
}
|
|
|
|
class StateGameOver extends State {
|
|
constructor(sprites) {
|
|
super("GAMEOVER");
|
|
this.bird = sprites[0];
|
|
this.tuberias = [sprites[1], sprites[2]];
|
|
this.suelo = sprites[3];
|
|
sprites.push(new GameOver(), new TapTap());
|
|
}
|
|
enter() {
|
|
this.bird.velY = this.bird.gravedad = 0;
|
|
this.bird.nFramesAnim = 1;
|
|
this.tuberias.forEach((tuberia) => {
|
|
tuberia.velocidad = 0;
|
|
});
|
|
this.suelo.velocidad = 0;
|
|
}
|
|
}
|
|
|
|
class Logo {
|
|
constructor() {
|
|
this.logoImg = images["logo"];
|
|
this.posX = width / 2 - this.logoImg.width / 2;
|
|
this.posY = height - this.logoImg.height - 20;
|
|
}
|
|
update() {}
|
|
draw() {
|
|
ctx.drawImage(this.logoImg, this.posX, this.posY);
|
|
}
|
|
}
|
|
|
|
class Ready {
|
|
constructor() {
|
|
this.readyImg = images["ready"];
|
|
this.posX = width / 2 - this.readyImg.width / 2;
|
|
this.posY = height / 4 - this.readyImg.height / 2;
|
|
}
|
|
update() {}
|
|
draw() {
|
|
ctx.drawImage(this.readyImg, this.posX, this.posY);
|
|
}
|
|
}
|
|
|
|
class GameOver {
|
|
constructor() {
|
|
this.gameOverImg = images["gameover"];
|
|
this.posX = width / 2 - this.gameOverImg.width / 2;
|
|
this.posY = height / 4 - this.gameOverImg.height / 2;
|
|
}
|
|
update() {}
|
|
draw() {
|
|
ctx.drawImage(this.gameOverImg, this.posX, this.posY);
|
|
}
|
|
}
|
|
|
|
class TapTap {
|
|
constructor() {
|
|
this.tapTapImg = images["taptap"];
|
|
this.posX = width / 2 - this.tapTapImg.width / 2;
|
|
this.posY = height / 2 - this.tapTapImg.height / 2;
|
|
}
|
|
update() {}
|
|
draw() {
|
|
ctx.drawImage(this.tapTapImg, this.posX, this.posY);
|
|
}
|
|
}
|
|
|
|
class Suelo {
|
|
constructor() {
|
|
this.sueloImg = images["suelo"];
|
|
this.posX = 0;
|
|
this.posY = height - this.sueloImg.height;
|
|
this.velocidad = 1;
|
|
}
|
|
update() {
|
|
this.posX -= this.velocidad;
|
|
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(posX, tipo) {
|
|
this.tuberiaImg = images["tuberias"];
|
|
this.tipo = tipo;
|
|
this.width = 52;
|
|
this.height = 320;
|
|
this.initialPosX = posX;
|
|
this.puntuada = false;
|
|
this.inicializa();
|
|
}
|
|
|
|
inicializa() {
|
|
this.separacion = 120;
|
|
this.velocidad = 0;
|
|
this.posX = this.initialPosX;
|
|
this.posY =
|
|
Math.floor(Math.random() * (300 - 100 + 1)) +
|
|
100 -
|
|
Math.floor(this.height * 2 + this.separacion) / 2;
|
|
}
|
|
|
|
generaPos() {
|
|
this.puntuada = false;
|
|
this.posX = width;
|
|
this.posY =
|
|
Math.floor(Math.random() * (300 - 100 + 1)) +
|
|
100 -
|
|
Math.floor(this.height * 2 + this.separacion) / 2;
|
|
}
|
|
|
|
update() {
|
|
this.posX -= this.velocidad;
|
|
if (this.posX <= 0 - this.width) {
|
|
this.aumentaDificultad();
|
|
this.generaPos();
|
|
}
|
|
}
|
|
|
|
draw() {
|
|
ctx.drawImage(
|
|
this.tuberiaImg,
|
|
1 * this.width,
|
|
this.tipo * this.height,
|
|
this.width,
|
|
this.height,
|
|
this.posX,
|
|
this.posY,
|
|
this.width,
|
|
this.height
|
|
);
|
|
ctx.drawImage(
|
|
this.tuberiaImg,
|
|
0 * this.width,
|
|
this.tipo * this.height,
|
|
this.width,
|
|
this.height,
|
|
this.posX,
|
|
this.posY + this.height + this.separacion,
|
|
this.width,
|
|
this.height
|
|
);
|
|
}
|
|
|
|
detectarColision(bird) {
|
|
const xA = bird.posX;
|
|
const yA = Math.floor(bird.posY);
|
|
const wA = bird.width;
|
|
const hA = bird.height;
|
|
|
|
const xB = this.posX;
|
|
const yB = this.posY;
|
|
const wB = this.width;
|
|
const hB = this.height;
|
|
|
|
const xC = this.posX;
|
|
const yC = this.posY + this.height + this.separacion;
|
|
const wC = this.width;
|
|
const hC = this.height;
|
|
|
|
const colisionConTuberia1 =
|
|
xA < xB + wB && xA + wA > xB && yA < yB + hB && yA + hA > yB;
|
|
|
|
const colisionConTuberia2 =
|
|
xA < xC + wC && xA + wA > xC && yA < yC + hC && yA + hA > yC;
|
|
|
|
return colisionConTuberia1 || colisionConTuberia2;
|
|
}
|
|
|
|
superada(bird) {
|
|
if (bird.posX > this.posX + this.width && this.puntuada === false) {
|
|
this.puntuada = true;
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
aumentaDificultad() {
|
|
if (this.separacion >= 80) this.separacion--;
|
|
}
|
|
}
|
|
|
|
class Bird {
|
|
constructor() {
|
|
this.birdImg = images["flappybird"];
|
|
this.width = 34;
|
|
this.height = 24;
|
|
this.nFramesAnim = 3;
|
|
this.animFrame = 0;
|
|
this.gameFrame = 0;
|
|
this.inicializa();
|
|
}
|
|
inicializa() {
|
|
this.posY = height / 2;
|
|
this.posX = width / 8;
|
|
this.gravedad = 0;
|
|
this.velY = 0;
|
|
}
|
|
impulsar() {
|
|
this.velY = -4;
|
|
}
|
|
update() {
|
|
this.velY += this.gravedad;
|
|
this.posY += this.velY;
|
|
this.animFrame = Math.floor(this.gameFrame / 10) % this.nFramesAnim;
|
|
this.gameFrame++;
|
|
}
|
|
draw() {
|
|
if (this.velY === 0) {
|
|
ctx.drawImage(
|
|
this.birdImg,
|
|
this.animFrame * this.width,
|
|
0,
|
|
this.width,
|
|
this.height,
|
|
this.posX,
|
|
this.posY,
|
|
this.width,
|
|
this.height
|
|
);
|
|
return;
|
|
}
|
|
ctx.save();
|
|
if (this.velY > 0) {
|
|
ctx.translate(this.posX + this.width / 2, this.posY + this.height / 2);
|
|
ctx.rotate((30 * Math.PI) / 180);
|
|
ctx.drawImage(
|
|
this.birdImg,
|
|
this.animFrame * this.width,
|
|
0,
|
|
this.width,
|
|
this.height,
|
|
-this.width / 2,
|
|
-this.height / 2,
|
|
this.width,
|
|
this.height
|
|
);
|
|
} else {
|
|
ctx.translate(this.posX + this.width / 2, this.posY + this.height / 2);
|
|
ctx.rotate((-30 * Math.PI) / 180);
|
|
ctx.drawImage(
|
|
this.birdImg,
|
|
this.animFrame * this.width,
|
|
0,
|
|
this.width,
|
|
this.height,
|
|
-this.width / 2,
|
|
-this.height / 2,
|
|
this.width,
|
|
this.height
|
|
);
|
|
}
|
|
ctx.restore();
|
|
}
|
|
detectarColisiones(tuberias, suelo) {
|
|
if (this.posY + this.height >= suelo.posY) {
|
|
return true;
|
|
}
|
|
|
|
if (
|
|
tuberias[0].detectarColision(this) ||
|
|
tuberias[1].detectarColision(this)
|
|
) {
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
pasaTuberia(tuberias) {
|
|
if (tuberias[0].superada(this) || tuberias[1].superada(this)) {
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function iniciarJuego() {
|
|
let bucle;
|
|
let puntuacion = 0;
|
|
ctx.font = "24px 'Press Start 2P'";
|
|
ctx.fillStyle = "white";
|
|
|
|
const sprites = [
|
|
new Bird(),
|
|
new Tuberia(width + 100, 1),
|
|
new Tuberia(width + 100 + width * 0.5 + 25, 0),
|
|
new Suelo(),
|
|
new Logo(),
|
|
];
|
|
|
|
let state = new StateIdle(sprites);
|
|
state.enter();
|
|
|
|
document.addEventListener("keydown", function (event) {
|
|
if (event.code === "Space") {
|
|
if (state.state === "IDLE" || state.state === "GAMEOVER") {
|
|
puntuacion = 0;
|
|
state = new StateRunnig(sprites);
|
|
state.enter();
|
|
}
|
|
sprites[0].impulsar();
|
|
audiosFx["flap"].play();
|
|
}
|
|
});
|
|
|
|
function gameLoop() {
|
|
ctx.clearRect(0, 0, width, height);
|
|
ctx.drawImage(images["bg"], 0, 0, width, height);
|
|
sprites.forEach((sprite) => {
|
|
sprite.update();
|
|
sprite.draw();
|
|
});
|
|
if (sprites[0].pasaTuberia([sprites[1], sprites[2]])) {
|
|
audiosFx["coin"].play();
|
|
puntuacion++;
|
|
}
|
|
ctx.fillText(puntuacion, 4, 30);
|
|
const colision = sprites[0].detectarColisiones(
|
|
[sprites[1], sprites[2]],
|
|
sprites[3]
|
|
);
|
|
if (colision && state.state !== "GAMEOVER") {
|
|
state = new StateGameOver(sprites);
|
|
state.enter();
|
|
audiosFx["gameover"].play();
|
|
window.cancelAnimationFrame(bucle);
|
|
}
|
|
bucle = requestAnimationFrame(gameLoop);
|
|
}
|
|
|
|
gameLoop();
|
|
}
|
|
|
|
cargarRecursos(images, audiosFx, iniciarJuego);
|