[PTMAD1120] marioMontero

assets/js/constants.js

@@ -1 +1,2 @@
 const KEY_UP = 32;
+const KEY_R = 82;

assets/js/index.js

@@ -1,6 +1,15 @@
+const game = new Game('canvas-game')
+
 window.addEventListener('load', () => {
   // iteration - 1: create & start the game
-
+  game.start()
 
   // iteration - 2: add key listeners to the game
+  document.addEventListener('keydown', (event) => {
+    game.onKeyEvent(event)
+  })
+
+  document.addEventListener('keyup', (event) => {
+    game.onKeyEvent(event)
+  })
 });

assets/js/models/brackgorund.js

@@ -2,27 +2,77 @@ class Background {
 
   constructor(ctx) {
     this.ctx = ctx;
-    // positions
+
+    this.vx = -1
+
+    this.bgX = 0
+    this.bgY = 0
+    this.bgWidth = this.ctx.canvas.width
+    this.bgHeight = this.ctx.canvas.height -18
+
+    this.footerX = 0
+    this.footerY = this.ctx.canvas.height - 79
+    this.footerWidth = this.ctx.canvas.width
+    this.footerHeight = 79
 
     this.bgImg = new Image();
     this.bgImg.src = 'assets/img/game-bg.png';
-    // load and set ready
 
     this.footerImg = new Image();
     this.footerImg.src = 'assets/img/game-bg-footer.png';
-    // load and set ready
-
+
+    this.bgImg.isReady = false
+    this.footerImg.isReady = false
+
+    this.bgImg.onload = () => {
+      this.bgImg.isReady = true
+    }
+
+    this.footerImg.onload = () => {
+      this.footerImg.isReady = true
+    }
   }
 
   draw() {
     if (this.bgImg.isReady && this.footerImg.isReady) {
       // draw both images
+      this.ctx.drawImage(
+        this.bgImg,
+        this.bgX,
+        this.bgY,
+        this.bgWidth,
+        this.bgHeight
+      )
+      this.ctx.drawImage(
+        this.footerImg,
+        this.footerX,
+        this.footerY,
+        this.footerWidth,
+        this.footerHeight
+      )
+      this.ctx.drawImage(
+        this.footerImg,
+        this.footerX + this.ctx.canvas.width -1,
+        this.footerY,
+        this.footerWidth,
+        this.footerHeight
+      )
+
+      if (this.footerX + this.footerWidth === 0) {
+        this.footerX = 0
+      }
     }
   }
 
   move() {
     // move the ground
-
+    this.footerX += this.vx
     // check bounds
   }
+
+  onKeyEvent(event) {
+    if (event.type === 'keydown' && event.keyCode === KEY_R) {
+      game.restart()
+    }
+  }
 }

assets/js/models/flappybird.js

@@ -7,26 +7,63 @@ class FlappyBird {
     this.jumpImpulse = 70;
     this.vy = 3;
 
+    this.width = 0
+    this.height = 0
+
     this.sprite = new Image();
     this.sprite.src = 'assets/img/bird.png';
-    // sprite setup
+    this.sprite.isReady = false
 
+    this.isImpulsing = false
+
+    // sprite setup
+    this.sprite.horizontalFrames = 3
+    this.sprite.verticalFrames = 1
+    this.sprite.initHorizontalFrame = 0
+    this.sprite.initVerticalFrame = 0
     this.drawCount = 0;
     this.movements = {
       up: false
     }
+    this.sprite.onload = () => {
+      this.sprite.isReady = true
+      this.sprite.frameWidth = Math.floor(this.sprite.width / this.sprite.horizontalFrames)
+      this.sprite.frameHeight = Math.floor(this.sprite.height / this.sprite.verticalFrames)
+      this.width = this.sprite.frameWidth
+      this.height = this.sprite.frameHeight
+    }
   }
 
   onKeyEvent(event) {
     // iteration 2: configure frame animation
+    const status = (event.type === 'keydown')
+    if (event.keyCode === KEY_UP) {
+      this.movements.up = status
+      this.isImpulsing = true
+    }
   }
 
   draw() {
     if (this.sprite.isReady) {
       // draw sprite
+      this.ctx.drawImage(
+        this.sprite,
+        this.sprite.initHorizontalFrame * this.sprite.frameWidth,
+        this.sprite.initVerticalFrame * this.sprite.frameHeight,
+        this.sprite.frameWidth,
+        this.sprite.frameHeight,
+        this.x,
+        this.y,
+        this.width,
+        this.height
+      )
       this.drawCount++;
       // animate sprite
     }
+    this.animate()
+    if (this.y <= 0 || this.y + this.height + 79 >= this.ctx.canvas.height) {
+      game.stop()
+    }
   }
 
   animate() {
@@ -36,14 +73,33 @@ class FlappyBird {
 
   animateFrame(initVerticalFrame, initHorizontalFrame, segments, frequency) {
     // iteration 2: animate the sprite
+    if (this.drawCount < 10) {
+    } else if (this.drawCount < 20) {
+      this.sprite.initHorizontalFrame = 1
+    } else if (this.drawCount < 30) {
+      this.sprite.initHorizontalFrame = 2
+    } else {
+      this.sprite.initHorizontalFrame = 0
+      this.drawCount = 0
+    }
   }
 
   move() {
     // iteration 2: move the y
+    if (this.movements.up && this.isImpulsing) {
+      this.y += -this.jumpImpulse
+      this.isImpulsing = false
+      } else {
+      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
   }
 
 }