[WD-PT-SEPT24-ES] Ronaldo Potas Galeano

assets/css/main.css

@@ -27,3 +27,12 @@ body * {
   flex-direction: column;
   height: 100%;
 }
+
+#restart-btn {
+  width: 100%;
+  max-width: 150px;
+  position: absolute;
+}
+.hidden {
+  display: none;
+}

assets/js/constants.js

@@ -1 +1,2 @@
-const KEY_UP = 32;
+const ARROW_UP = 38;
+const SPACE = 32;

assets/js/index.js

@@ -1,4 +1,31 @@
 window.addEventListener('load', () => {
+  const startBtn = document.getElementById('restart-btn')
+
   // iteration - 1: create & start the game
+  const game = new Game('canvas-game', () => {
+    startBtn.classList.toggle('hidden');
+  });
+
+  game.start();
+
   // iteration - 2: add key listeners to the game
+
+  startBtn.addEventListener('click', () => {
+    game.restart();
+    startBtn.classList.toggle('hidden');
+  })
+
+  document.addEventListener('keydown', () => {
+    if (game.drawIntervalId) {
+      game.onKeyEvent(event)
+    } else {
+      startBtn.classList.toggle('hidden');
+      game.restart()
+    }
+  });
+
+  document.addEventListener('keyup', () => {
+    game.onKeyEvent(event);
+  });
+
 });

assets/js/models/background.js

@@ -0,0 +1,72 @@
+class Background {
+
+  constructor(ctx) {
+    this.ctx = ctx;
+    // positions
+    this.x = 0;
+    this.y = 434;
+    this.vx = 3;
+    this.width = this.ctx.canvas.width;
+    this.height = this.ctx.canvas.height;
+
+    this.bgImg = new Image();
+    this.bgImg.src = 'assets/img/game-bg.png';
+    // set image dimensions
+    this.bgImg.isReady = false;
+    this.bgImg.onload = () => {
+      this.bgImg.isReady = true;
+      this.bgImg.width = this.width;
+      this.bgImg.height = this.height;
+    }
+
+    this.footerImg = new Image();
+    this.footerImg.src = 'assets/img/game-bg-footer.png';
+    // set image dimensions
+    this.footerImg.isReady = false;
+    this.footerImg.onload = () => {
+      this.footerImg.isReady = true;
+      this.footerImg.width = this.width;
+      this.footerImg.height = 64;
+    }
+
+  }
+
+  draw() {
+    // iteration 1: draw the static backgorund img
+    if (this.bgImg.isReady && this.footerImg.isReady) {
+      this.ctx.drawImage(
+        this.bgImg,
+        0,
+        0,
+        this.bgImg.width,
+        this.bgImg.height,
+      )
+
+      // iteration 1: draw footer img twice
+      this.ctx.drawImage(
+        this.footerImg,
+        this.x,
+        this.y,
+        this.footerImg.width,
+        this.footerImg.height,
+      )
+
+      this.ctx.drawImage(
+        this.footerImg,
+        this.x + this.footerImg.width,
+        this.y,
+        this.footerImg.width,
+        this.footerImg.height,
+      )
+    }
+  }
+
+  move() {
+    // iteration 1: move the ground
+    this.x -= this.vx;
+    // iteration 1: check bounds and reset position
+    if (this.width + this.x <= 0) {
+      this.x = 0;
+    }
+  }
+}

assets/js/models/flappybird.js

@@ -10,11 +10,13 @@ class FlappyBird {
     this.sprite = new Image();
     this.sprite.src = 'assets/img/bird.png';
     // sprite setup
+    this.sprite.isReady = false;
     this.sprite.horizontalFrameIndex = 0;
     this.sprite.verticalFrameIndex = 0;
     this.sprite.horizontalFrames = 3;
     this.sprite.verticalFrames = 1;
     this.sprite.onload = () => {
+      this.sprite.isReady = true;
       this.sprite.frameWith = Math.floor(this.sprite.width / this.sprite.horizontalFrames);
       this.sprite.frameHeight = Math.floor(this.sprite.height / this.sprite.verticalFrames);
       this.width = this.sprite.frameWith;
@@ -27,27 +29,67 @@ class FlappyBird {
   onKeyEvent(event) {
     const isJumping = event.type === 'keydown';
     switch (event.keyCode) {
-      case KEY_UP:
+      case ARROW_UP:
+      case SPACE:
         // iteration 2: jump! if necessary =D
+      if (!isJumping) {
+        this.y -= this.jumpImpulse;
+      }
     }
   }
 
   draw() {
     // draw sprite
-
-    // animate sprite
-    this.animate();
+    if (this.sprite.isReady) {
+      this.ctx.drawImage(
+        this.sprite,
+        this.sprite.horizontalFrameIndex * this.sprite.frameWith,
+        this.sprite.verticalFrameIndex * this.sprite.frameHeight,
+        this.sprite.frameWith,
+        this.sprite.frameHeight,
+        this.x,
+        this.y,
+        this.width,
+        this.height,
+      )
+      this.drawCount++;
+      // animate sprite
+      this.animate();
+    }
   }
 
   animate() {
     // iteration 2: configure frame animation
+    this.animateFrame(0, 2, 3, 10);
+  }
+
+  animateFrame(initVerticalFrame, initHorizontalFrame, segments, frequency) {
+    // Paso 1: Verifica si el índice de fotograma vertical actual es diferente del inicial proporcionado.
+    if (this.sprite.verticalFrameIndex !== initVerticalFrame) {
+      // Si es diferente, establece el índice vertical al valor inicial proporcionado
+      this.sprite.verticalFrameIndex = initVerticalFrame;
+      // También establece el índice de fotograma horizontal al valor inicial proporcionado
+      this.sprite.horizontalFrameIndex = initHorizontalFrame;
+    }
+    // Paso 2: Si el índice vertical ya es el inicial, verifica si debe actualizarse el fotograma horizontal
+    else if (this.drawCount % frequency === 0) {
+      // Actualiza el índice horizontal al siguiente fotograma, asegurándose de que se reinicie después de alcanzar el límite (uso de módulo %)
+      this.sprite.horizontalFrameIndex = (this.sprite.horizontalFrameIndex + 1) % segments;
+      // Reinicia el contador de dibujo para volver a contar los frames hasta el próximo cambio
+      this.drawCount = 0;
+    }
   }
 
   move() {
     // iteration 2: move the y
+    this.y += this.vy
   }
 
   collides(element) {
     // iteration 3: check collisions (true|false)
+    return this.x < element.x + element.width &&
+      this.x + this.width > element.x &&
+      this.y < element.y + element.height &&
+      this.y + this.height > element.y;
   }
 }