[WD-PT-SEPT24] Carla López de Zamora Pagán

src/background.js

@@ -14,11 +14,22 @@ class Background {
 
   draw() {
     // TODO: draw image
+    this.ctx.drawImage(this.img, this.x, this.y, this.w, this.h);
+
     // TODO: draw image again on the right
+    this.ctx.drawImage(this.img, 
+      this.x+this.ctx.canvas.width, 
+      this.y, 
+      this.w, 
+      this.h);
   }
 
   move() {
     // TODO: move background
+    this.x += this.vx; 
     // TODO: restart position if out of canvas
+    if (this.x + this.w <= 0) {
+      this.x = 0;
+    }
   }
 }

src/constants.js

@@ -1,4 +1,4 @@
-UP = 38
-RIGHT = 39
-LEFT = 37
-SPACE = 32
+const UP = 38;
+const RIGHT = 39;
+const LEFT = 37;
+const SPACE = 32;

src/game.js

@@ -7,14 +7,28 @@ class Game {
     this.bg = new Background(ctx);
     this.helicopter = new Helicopter(ctx);
     this.obstacles = [];
+
+    this.over.img = new Image (); 
+    this.over.img.src = 'https://png.pngtree.com/png-clipart/20210311/original/pngtree-game-over-pixel-transparent-background-png-image_5995763.jpg'
   }
 
   start() {
     // TODO: loop. clear, draw, move, addObstacle
+    //this.draw();
+    this.intervalId = setInterval(() => {
+      this.tick++;
+      this.draw();
+      this.move();
+      this.addObstacle();
+
+    }, 1000 / 60);
   }
 
   addObstacle() {
     // TODO: add new Obstacle every 100 ticks
+    if (this.tick % 100 === 0) {
+      this.obstacles.push(new Obstacles(this.ctx));
+    }
   }
 
   clear() {
@@ -23,13 +37,31 @@ class Game {
 
   draw() {
     // TODO: draw everything
+    this.bg.draw();
+    //this.obstacles.draw();
+    this.helicopter.draw();
+    this.obstacles.forEach(obstacle => obstacle.draw());
   }
 
   move() {
     // TODO: move everything
+    this.bg.move();
+    this.helicopter.move();
+    this.obstacles.forEach(obstacle => obstacle.move());
   }
 
   onKeyEvent(event) {
     // TODO
+    document.addEventListener("keyup", (e) => {
+      this.helicopter.onKeyEvent(e.keyCode);
+    });
+    document.addEventListener("keydown", (e) => {
+      this.helicopter.onKeyEvent(e.keyCode);
+    });
+  }
+  gameOver(){
+    this.bg.draw();
+    clearInterval(this.intervalId);
+    this.ctx.drawImage(this.over.img, 0, 0, this.ctx.canvas.width / 2, this.ctx.canvas.height);
   }
-}
+}

src/helicopter.js

@@ -23,24 +23,107 @@ class Helicopter {
     this.img.frames = 4;
     this.img.frameIndex = 0;
 
+    this.floor = this.ctx.canvas.height;
+    this.canvasw = this.ctx.canvas.width; 
+
     this.weapon = new Weapon(this);
   }
 
   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 > 3) {
+      this.tick = 0;
+      this.img.frameIndex ++;
+
+      if (this.img.frameIndex > 3) {
+        this.img.frameIndex = 0;
+      }
+    }
+
+
 
     this.weapon.draw();
   }
 
   isFloor() {
     // TODO: check if floor
+    if (this.y === this.floor) {
+      isFloor = 'True';
+    }
   }
 
   move() {
     // TODO: move
+    this.vy += this.g;
+
+    this.y += this.vy;
+    this.x += this.vx;
+
+    if (this.y >= this.floor - this.h){
+      this.y = this.floor - this.h; 
+      this.vy = 0;
+    } 
+
+    if (this.y < 0 ){
+      this.y = 0;  
+    }
+
+    if (this.x < 0 ){
+    this.x = 0; 
+    this.vx = 0; 
+    }
+
+    if (this.x + this.w >= this.canvasw){
+      this.x = this.canvasw - this.w; 
+      this.vx = 0; 
+    }
+
   }
 
   onKeyEvent(event) {
     // TODO
+    switch (event){
+      case UP:
+        //sube
+        this.vy = -4;
+        break;
+      case RIGHT:
+        //derecha
+        this.vx = 3;
+        break;
+      case LEFT:
+        //izquierda
+        this.vx = -3;
+        break;
+
+    }
+  }
+  die (obstacles){
+    for (const obstacle of obstacles){
+      if (
+        this.x < obstacle.x + obstacle.w &&
+        this.x + this.w > obstacle.x &&
+        this.y < obstacle.y + obstacle.h &&
+        this.y + this.h > obstacle.y
+      ){
+        return true; 
+      }
+      else {
+        return false;
+      }
+    }
   }
 }

src/index.js

@@ -2,7 +2,8 @@ const ctx = document.getElementById('canvas').getContext('2d')
 
 const game = new Game(ctx)
 
-game.start()
+game.start();
+
 
 document.addEventListener('keydown', e => {
   game.onKeyEvent(e)

src/obstacle.js

@@ -1,4 +1,4 @@
-class Obstacle {
+class Obstacles {
   constructor(ctx) {
     this.ctx = ctx
     this.x = this.ctx.canvas.width
@@ -15,7 +15,7 @@ class Obstacle {
       this.y,
       this.w,
       this.h
-    )
+    );
   }
 
   move() {
@@ -28,4 +28,4 @@ class Obstacle {
       this.x > 0 - this.ctx.canvas.width
     )
   }
-}
+}