[wdptsept24es] Irene Mejía

src/background.js

@@ -1,12 +1,14 @@
 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.vx = -2
+    this.w = this.ctx.canvas.width;
+    this.h = this.ctx.canvas.height;
+
+    this.x = 0;
+    this.y = 0;
+
+    this.vx = -2;
 
     this.img = new Image()
     this.img.src = "https://image.freepik.com/free-vector/sky-day-game-background_7814-306.jpg"
@@ -15,10 +17,24 @@ class Background {
   draw() {
     // TODO: draw image
     // TODO: draw image again on the right
+    this.ctx.drawImage(this.img, this.x, this.y, this.w, this.h); // dibuja y coloca la imagen de fondo en su posición actual
+
+    this.ctx.drawImage( // Dibuja una segunda instancia de la misma imagen justo a la derecha de la primera
+      this.img,
+      this.x + this.w,
+      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/bullet.js

@@ -10,14 +10,18 @@ class Bullet {
   draw() {
     this.ctx.beginPath();
     // TODO: draw circle
+    this.ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2); // Hacemos que se dibuje
+    this.ctx.fill();  // Lo rellenamos
     this.ctx.closePath()
   }
 
   move() {
-    // TODO: move circle
-  }
+     // TODO: move circle
+    this.x += this.vx;
+  } 
 
   isVisible() {
-    // TODO: is inside canvas?
+    // TODO : is inside canvas?
+    return 0 < this.x < this.ctx.canvas.width && 0 < this.y < this.ctx.canvas.height;  
   }
 }

src/game.js

@@ -11,10 +11,34 @@ class Game {
 
   start() {
     // TODO: loop. clear, draw, move, addObstacle
+    this.intervalId = setInterval(() => { 
+      this.clear();  
+
+      this.draw();    
+
+      this.move();    
+      this.tick++;
+
+      this.addObstacle();
+
+      this.checkCollisions();
+
+      this.clearObstacles();
+
+    }, 1000 / 60);
   }
 
   addObstacle() {
     // TODO: add new Obstacle every 100 ticks
+    if (this.tick >= 100) {  
+      this.tick = 0;
+      const obstacle = new Obstacle(this.ctx);
+      this.obstacles.push(obstacle);  
+    }
+  }
+
+  clearObstacles() {
+    this.obstacles = this.obstacles.filter((obstacle) => obstacle.isVisible());
   }
 
   clear() {
@@ -23,13 +47,47 @@ class Game {
 
   draw() {
     // TODO: draw everything
+    this.bg.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());
+  }
+
+  gameOver() {
+    clearInterval(this.intervalId);
+    console.log("Estoy aqui");
+
+    this.clear(); // Elimino todo de la pantalla
+
+    this.bg.draw(); // Como el clear borra todo hay que volver a llamar al bg
+
+    this.ctx.font = "50px Verdana";
+    this.ctx.textAlign = "center";
+
+    this.ctx.fillText(
+      "GAME OVER",
+      this.ctx.canvas.width / 2,
+      this.ctx.canvas.height / 2
+    );
+
+    this.obstacles = [];
+    this.helicopter = null;
+  }
+
+  checkCollisions() {
+    if (this.helicopter.checkCollision(this.obstacles) || this.helicopter.isFloor()) {
+      this.gameOver();
+    }
   }
 
   onKeyEvent(event) {
     // TODO
+    this.helicopter.onKeyEvent(event);
   }
-}
+}

src/helicopter.js

@@ -28,19 +28,103 @@ class Helicopter {
 
   draw() {
     // TODO: draw helicopter image
+    this.ctx.drawImage(
+      this.img,
+      0,
+      (this.img.frameIndex / this.img.frames) * this.img.height,  // Lo cambiamos con respecto a arriba, porque nos fijamos en la img en vertical
+      this.img.width, // Queremos toda la imagen en x, por eso tomamos todo
+      this.img.height / this.img.frames,  // Nos fijamos en la img en vertical, como hay 4 helicopteros lo dividimos entre 4
+      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 + this.ay;  // En vy siempre afecta la gravedad
+    this.vx += this.ax;
+
+    this.x += this.vx;
+    this.y += this.vy;
+
+    if (this.y + this.h >= this.ctx.canvas.height) {
+      this.vy = 0;
+      this.y = this.ctx.canvas.height - this.h;
+    }
+
+    if (this.isFloor()) {
+      this.vy = 0;
+    }
+
+    this.weapon.move();
+  }
+
+  checkCollision(arrayOfObstacles) {
+    for (let i = 0; i < arrayOfObstacles.length; i++) {
+      const obstacle = arrayOfObstacles[i];
+      if ((this.x < obstacle.x + obstacle.w && this.x + this.y > obstacle.x) && (this.y < obstacle.y + obstacle.h && this.y + this.h > obstacle.y)) {
+        return true;
+      }
+    }
+    return false;
   }
 
   onKeyEvent(event) {
     // TODO
+    switch(event.type) {
+
+      case 'keydown':
+
+        if (event.keyCode === UP) {
+          this.vy = -3; 
+        } 
+        else if (event.keyCode === RIGHT) {
+          this.vx = 3; 
+        }
+        else if (event.keyCode === LEFT) {
+          this.vx = -3; 
+        } 
+        else if (event.keyCode === SPACE)  {
+          this.weapon.shoot();
+        }
+        break;
+
+      case 'keyup':
+
+        if (event.keyCode === UP) {
+          this.vy = this.g; 
+        } 
+        else if (event.keyCode === RIGHT || event.keyCode === LEFT) {
+          this.vx = 0; // Detener el movimiento horizontal al soltar teclas de dirección
+        }
+        else if (event.keyCode === SPACE)  {
+          this.weapon.clearBullets();
+        }
+
+        break;
+
+    }
   }
+
 }
+

src/index.js

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

src/obstacle.js

@@ -1,12 +1,12 @@
 class Obstacle {
   constructor(ctx) {
-    this.ctx = ctx
-    this.x = this.ctx.canvas.width
-    this.dist = Math.random() * 100 + 300
-    this.y = Math.random() > 0.5 ? 0 - this.dist : this.dist
-    this.w = Math.random() * 40 + 50
-    this.h = this.ctx.canvas.height
-    this.vx = -3
+    this.ctx = ctx;
+    this.x = this.ctx.canvas.width;
+    this.dist = Math.random() * 100 + 200;
+    this.y = Math.random() > 0.5 ? 0 - this.dist : this.dist;
+    this.w = Math.random() * 40 + 50;
+    this.h = this.ctx.canvas.height;
+    this.vx = -3;
   }
 
   draw() {
@@ -15,17 +15,14 @@ class Obstacle {
       this.y,
       this.w,
       this.h
-    )
+    );
   }
 
   move() {
-    this.x += this.vx
+    this.x += this.vx;
   }
 
   isVisible() {
-    return (
-      this.x < this.ctx.canvas.width * 2 &&
-      this.x > 0 - this.ctx.canvas.width
-    )
+    return this.x + this.w > 0; // Para que diga solo false cuando ya se ha ido por la izq, de lo contrario se carga los recien creados
   }
 }