wdpt-sept-24-amy-lauren-hatherall-iron-helicopter

src/background.js

@@ -1,24 +1,34 @@
 class Background {
   constructor(ctx) {
     this.ctx = ctx;
-    this.w = this.ctx.canvas.width
-    this.h = this.ctx.canvas.height
-    this.x = 0
-    this.y = 0
+    this.w = this.ctx.canvas.width;
+    this.h = this.ctx.canvas.height;
+    this.x = 0;
+    this.y = 0;
 
-    this.vx = -2
+    this.vx = -2;
 
-    this.img = new Image()
-    this.img.src = "https://image.freepik.com/free-vector/sky-day-game-background_7814-306.jpg"
+    this.img = new Image();
+    this.img.src =
+      "https://image.freepik.com/free-vector/sky-day-game-background_7814-306.jpg";
   }
 
   draw() {
-    // TODO: draw image
-    // TODO: draw image again on the right
+    this.ctx.drawImage(this.img, this.x, this.y, this.w, this.h);
+
+    this.ctx.drawImage(
+      this.img,
+      this.x + this.ctx.canvas.width,
+      this.y,
+      this.w,
+      this.h
+    );
   }
 
   move() {
-    // TODO: move background
-    // TODO: restart position if out of canvas
+    this.x += this.vx;
+    if (this.x + this.w <= 0) {
+      this.x = 0;
+    }
   }
-}
+}

src/constants.js

@@ -1,4 +1,5 @@
-UP = 38
-RIGHT = 39
-LEFT = 37
-SPACE = 32
+const KEY_UP = 38;
+const KEY_RIGHT = 39;
+const KEY_DOWN = 40;
+const KEY_LEFT = 37;
+const KEY_SPACE = 32;

src/game.js

@@ -7,29 +7,66 @@ class Game {
     this.bg = new Background(ctx);
     this.helicopter = new Helicopter(ctx);
     this.obstacles = [];
+
+
+    // Add event listeners for keydown and keyup once
+    document.addEventListener("keydown", (e) => {
+      this.onKeyDown(e);
+    });
+
+    document.addEventListener("keyup", (e) => {
+      this.onKeyUp(e);
+    });
   }
 
   start() {
-    // TODO: loop. clear, draw, move, addObstacle
+
+    this.interval = setInterval(() => {
+      this.clear();
+
+      this.draw();
+
+      this.move();
+
+      if (this.tick % 100 === 0) {
+        this.addObstacle();
+      }
+      this.tick++;
+
+    }, 1000 / 60);
   }
+
 
   addObstacle() {
-    // TODO: add new Obstacle every 100 ticks
+    const newObstacle = new Obstacle(this.ctx);
+    this.obstacles.push(newObstacle);
+
+    this.obstacles = this.obstacles.filter((e) => e.x +e.w > 0);
   }
 
   clear() {
     this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
   }
 
   draw() {
-    // TODO: draw everything
+    this.bg.draw();
+    this.obstacles.forEach((e) => e.draw());
+    this.helicopter.draw();
   }
 
   move() {
-    // TODO: move everything
+    this.bg.move();
+    this.helicopter.move();
+    this.obstacles.forEach(obstacle => obstacle.move());
+    this.obstacles = this.obstacles.filter(obstacle => obstacle.isVisible());
+  }
+
+  onKeyDown(e) {
+    this.helicopter.onKeyDown(e.keyCode);  // Pass the key code to the player's `onKeyDown` method
   }
 
-  onKeyEvent(event) {
-    // TODO
+  // Call this method when a key is released
+  onKeyUp(e) {
+    this.helicopter.onKeyUp(e.keyCode);  // Pass the key code to the player's `onKeyUp` method
   }
 }

src/helicopter.js

@@ -27,20 +27,67 @@ class Helicopter {
   }
 
   draw() {
-    // TODO: draw helicopter image
+    this.ctx.drawImage(
+      this.img, 0,
+      (this.img.frameIndex / this.img.frames) * this.img.height,
+      this.img.width,
+      (1 / this.img.frames) * this.img.height,
+
+      this.x,
+      this.y,
+      this.w,
+      this.h);
+
+      this.tick++;
+
+    if (this.tick > 10) {
+      this.tick = 0;
+
+      this.img.frameIndex++;
+      if (this.img.frameIndex > 3) {
+        this.img.frameIndex = 0;
+      }
+    }
 
-    this.weapon.draw();
   }
 
   isFloor() {
-    // TODO: check if floor
+    return this.y + this.h >= this.ctx.canvas.height;
   }
 
   move() {
-    // TODO: move
-  }
+    this.vy += this.g;  // Apply gravity
+    this.y += this.vy;  // Update position
 
-  onKeyEvent(event) {
-    // TODO
+    // Limites del helicoptero
+    if (this.y < 0) {
+      this.y = 0;  // No pasar de arriba
+    }
+    if (this.y + this.h > this.ctx.canvas.height) {
+      this.y = this.ctx.canvas.height - this.h;  // no pasar del suelo
+    }
   }
+
+  onKeyDown(keyCode) {
+    switch (keyCode) { 
+      case KEY_UP:
+        this.vy = -5;  
+        break;
+      case KEY_DOWN:
+        this.vy = 5;  
+        break;
+      case KEY_SPACE:
+        this.fire();
+        break;
+      }
+    }
+
+    onKeyUp(keyCode) {
+      switch (keyCode) {
+        case KEY_UP:
+        case KEY_DOWN:
+          this.vy = 0;  
+          break;
+       }
+    }
 }

src/index.js

@@ -1,13 +1,15 @@
-const ctx = document.getElementById('canvas').getContext('2d')
+const canvas = document.getElementById("canvas");
+
+const ctx = canvas.getContext("2d");
 
 const game = new Game(ctx)
 
-game.start()
+game.start();
 
-document.addEventListener('keydown', e => {
-  game.onKeyEvent(e)
-})
+document.addEventListener('keydown', (e) => {
+  game.onKeyDown(e); 
+});
 
-document.addEventListener('keyup', e => {
-  game.onKeyEvent(e)
-})
+document.addEventListener('keyup', (e) => {
+  game.onKeyUp(e);  
+});

src/obstacle.js

@@ -10,6 +10,7 @@ class Obstacle {
   }
 
   draw() {
+    this.ctx.fillStyle = "black";
     this.ctx.fillRect(
       this.x,
       this.y,