Beta funcional

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

game.js

@@ -11,35 +11,8 @@ const states = {
 };
 
 const images = {};
-
 const audiosFx = {};
 
-
-// function cargarImagenes(images, callback) {
-//   const nombresImagenes = [
-//     "bg",
-//     "suelo",
-//     "tuberias",
-//     "flappybird",
-//     "logo",
-//     "ready",
-//     "gameover",
-//     "taptap",
-//   ];
-//   let imagenesCargadas = 0;
-//   nombresImagenes.forEach((nombre) => {
-//     const img = new Image();
-//     img.src = `./assets/${nombre}.png`;
-//     img.onload = () => {
-//       imagenesCargadas++;
-//       if (imagenesCargadas === nombresImagenes.length) {
-//         callback(); // Llamar al callback una vez que todas las imágenes estén cargadas
-//       }
-//     };
-//     images[nombre] = img;
-//   });
-// }
-
 function cargarRecursos(images, audioFx, callback) {
   const recursos = [
     { nombre: "bg", tipo: "imagen" },
@@ -52,7 +25,7 @@ function cargarRecursos(images, audioFx, callback) {
     { nombre: "taptap", tipo: "imagen" },
     { nombre: "gameover", tipo: "audio" },
     { nombre: "coin", tipo: "audio" },
-    { nombre: "flap", tipo: "audio" }
+    { nombre: "flap", tipo: "audio" },
   ];
   let recursosCargados = 0;
 
@@ -81,14 +54,6 @@ function cargarRecursos(images, audioFx, callback) {
   });
 }
 
-// Llama a la función cargarRecursos para cargar imágenes y audios
-cargarRecursos(images, audiosFx, iniciarJuego);
-
-
-
-
-
-
 class State {
   constructor(state) {
     this.state = state;
@@ -125,9 +90,9 @@ class StateRunnig extends State {
     this.bird.nFramesAnim = 3;
     this.tuberias.forEach((tuberia) => {
       tuberia.inicializa();
-      tuberia.velocidad = 1;
+      tuberia.velocidad = 1.5;
     });
-    this.suelo.velocidad = 1;
+    this.suelo.velocidad = 1.5;
   }
 }
 
@@ -206,7 +171,7 @@ class Suelo {
   }
   update() {
     this.posX -= this.velocidad;
-    if (this.posX + this.sueloImg.width === 0) this.posX = 0;
+    if (this.posX + this.sueloImg.width <= 0) this.posX = 0;
   }
   draw() {
     ctx.drawImage(this.sueloImg, this.posX, this.posY);
@@ -226,7 +191,7 @@ class Tuberia {
   }
 
   inicializa() {
-    this.separacion = 100;
+    this.separacion = 120;
     this.velocidad = 0;
     this.posX = this.initialPosX;
     this.posY =
@@ -247,6 +212,7 @@ class Tuberia {
   update() {
     this.posX -= this.velocidad;
     if (this.posX <= 0 - this.width) {
+      this.aumentaDificultad();
       this.generaPos();
     }
   }
@@ -276,24 +242,31 @@ class Tuberia {
     );
   }
 
+  detectarColision(bird) {
+    const xA = bird.posX;
+    const yA = Math.floor(bird.posY);
+    const wA = bird.width;
+    const hA = bird.height;
 
-  colision(bird){
-    if (
-      bird.posX + bird.width < xB || // Condición 1
-      bird.posX > this.posX + this.width || // Condición 2
-      bird.posY + hA < yB || // Condición 3
-      bird.posY > yB + hB    // Condición 4
-    ) {
-      // No hay colisión
-      return false;
-    } else {
-      // Hay colisión
-      return true;
-    }
+    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;
@@ -301,6 +274,9 @@ class Tuberia {
     }
     return false;
   }
+  aumentaDificultad() {
+    if (this.separacion >= 80) this.separacion--;
+  }
 }
 
 class Bird {
@@ -379,21 +355,15 @@ class Bird {
     if (this.posY + this.height >= suelo.posY) {
       return true;
     }
-    for (let i = 0; i < tuberias.length; i++) {
-      const tuberia = tuberias[i];
-      if (
-        this.posX + this.width > tuberia.posX &&
-        this.posX < tuberia.posX + tuberia.width &&
-        (this.posY < tuberia.posY + tuberia.height ||
-          this.posY + this.height >
-            tuberia.posY + tuberia.height + tuberia.separacion)
-      ) {
-        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;
@@ -403,6 +373,7 @@ class Bird {
 }
 
 function iniciarJuego() {
+  let bucle;
   let puntuacion = 0;
   ctx.font = "24px 'Press Start 2P'";
   ctx.fillStyle = "white";
@@ -421,7 +392,7 @@ function iniciarJuego() {
   document.addEventListener("keydown", function (event) {
     if (event.code === "Space") {
       if (state.state === "IDLE" || state.state === "GAMEOVER") {
-        puntuacion=0;
+        puntuacion = 0;
         state = new StateRunnig(sprites);
         state.enter();
       }
@@ -430,20 +401,9 @@ function iniciarJuego() {
     }
   });
 
-  function gameLoop(timeStamp) {
+  function gameLoop() {
     ctx.clearRect(0, 0, width, height);
     ctx.drawImage(images["bg"], 0, 0, width, height);
-
-    if (
-      sprites[0].detectarColisiones([sprites[1], sprites[2]], sprites[3]) &&
-      state.state !== "GAMEOVER"
-    ) {
-      audiosFx["gameover"].play();
-      console.log('paso');
-      state = new StateGameOver(sprites);
-      state.enter();
-    }
-
     sprites.forEach((sprite) => {
       sprite.update();
       sprite.draw();
@@ -453,11 +413,20 @@ function iniciarJuego() {
       puntuacion++;
     }
     ctx.fillText(puntuacion, 4, 30);
-    requestAnimationFrame(gameLoop);
+    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();
 }
 
-//cargarImagenes(images, iniciarJuego);
-cargarRecursos(images,audiosFx,iniciarJuego);
+cargarRecursos(images, audiosFx, iniciarJuego);

index.html

@@ -9,7 +9,8 @@
     <title>Flappy bird</title>
 </head>
 <body>    
-    <canvas id="lienzo"></canvas>
+    <canvas id="lienzo"></canvas> <br> <br>
+    <a id="repositorioGit" href="https://git.marklogo.duckdns.org/" target="_blank"> <i class="ti ti-brand-github"></i> Repositorio Git</a>
 </body>
     <script src="./game.js"></script>
 </html>

style.css

@@ -21,4 +21,15 @@ body {
     background-color: #2c5364;
     width: auto;
     height: 80%;
-}
+    border: 4px solid white;
+}
+#repositorioGit {
+    display: inline-block;
+    background-color: #333;
+    color: #fff;
+    padding: 10px 20px;
+    text-decoration: none;
+    border-radius: 5px;
+    transition: background-color 0.3s ease;
+  }
+