Added background parallax and various UI elements

src/Bullet.js

@@ -6,6 +6,7 @@ class Bullet {
     theta,
     gravity = 0.08,
     collisionBlocks,
+    platforms,
     radius = 5,
     zombies,
     player,
@@ -19,6 +20,7 @@ class Bullet {
     this.dy = this.velocity * Math.sin(this.theta);
     this.gravity = gravity;
     this.collisionBlocks = collisionBlocks;
+    this.platforms = platforms;
     this.zombies = zombies;
     this.radius = radius;
     this.player = player;
@@ -53,6 +55,14 @@ class Bullet {
         return true;
       }
     }
+    for (let i = 0; i < this.platforms.length; i++) {
+      const platform = this.platforms[i];
+
+      if (bulletCollision({ bul: this, obj: platform })) {
+        if (this.isCannon) playSound("cannonHit", 0.2);
+        return true;
+      }
+    }
     return false;
   }
   checkForZombieCollision() {
@@ -126,6 +136,7 @@ class Mine {
     range = { width: 100, height: 150 },
     blastDuration = 400,
     sound = sounds["MineExplosion"].cloneNode(),
+    imgSrc = "./assets/landMine.png",
   }) {
     this.position = position;
     this.damageBox = {
@@ -144,11 +155,20 @@ class Mine {
     this.height = 10;
     this.isDeployed = false;
     this.sound = sound;
+    this.img = new Image();
+    this.img.src = imgSrc;
   }
 
   draw() {
-    c.fillStyle = "darkGreen";
-    c.fillRect(this.position.x, this.position.y, this.width, this.height);
+    c.drawImage(
+      this.img,
+      this.position.x,
+      this.position.y,
+      this.width,
+      this.height
+    );
+    // c.fillStyle = "darkGreen";
+    // c.fillRect(this.position.x, this.position.y, this.width, this.height);
 
     this.damageBox.position.x = this.position.x - 30;
     this.damageBox.position.y = this.position.y - 140;
@@ -221,6 +241,7 @@ class SpikeTrap {
     interval = 2000,
     stabDuration = 500,
     sound = sounds["SpikeTrap"].cloneNode(),
+    imgSrc = "./assets/spikeTrap.png",
   }) {
     this.position = position;
     this.damage = damage;
@@ -238,24 +259,36 @@ class SpikeTrap {
     this.gravity = 0.5;
     this.numSpikes = 3;
     this.sound = sound;
+    this.img = new Image();
+    this.img.src = imgSrc;
+    this.offset = { x: 20, y: 23 };
   }
 
   draw() {
-    c.fillStyle = "yellow";
-    c.fillRect(this.position.x, this.position.y, this.width, this.height); // Draw the base
+    c.drawImage(
+      this.img,
+      this.position.x - this.offset.x,
+      this.position.y - this.offset.y,
+      this.width * 2,
+      this.height * 4
+    );
+    // c.fillStyle = "yellow";
+    // c.fillRect(this.position.x, this.position.y, this.width, this.height); // Draw the base
 
     // Draw the spikes as triangles
     c.fillStyle = "grey";
+    c.strokeStyle = "black";
     for (let i = 0; i < this.numSpikes; i++) {
       const spikeWidth = this.width / this.numSpikes;
       const x = this.position.x + i * spikeWidth;
-      const y = this.position.y - this.spikeExtension;
+      const y = this.position.y - this.spikeExtension + 5;
       c.beginPath();
-      c.moveTo(x, this.position.y);
+      c.moveTo(x, this.position.y + 5);
       c.lineTo(x + spikeWidth / 2, y);
-      c.lineTo(x + spikeWidth, this.position.y);
+      c.lineTo(x + spikeWidth, this.position.y + 5);
       c.closePath();
       c.fill();
+      c.stroke();
     }
   }
 

src/Environment.js

@@ -6,10 +6,11 @@ class Platform {
   }
 
   draw() {
-    c.fillStyle = "lightBlue";
+    c.fillStyle = "#292330";
     c.fillRect(this.position.x, this.position.y, this.width, this.height);
   }
 }
+const platforms = [];
 class Boundary {
   constructor({ position, size }) {
     this.position = position;
@@ -18,13 +19,13 @@ class Boundary {
   }
 
   draw() {
-    c.fillStyle = "lightBlue";
+    c.fillStyle = "#292330";
     c.fillRect(this.position.x, this.position.y, this.width, this.height);
   }
 }
 
 class Environment {
-  constructor({ position, size, health = 100 }) {
+  constructor({ position, size, health = 100, imgSrc = "./assets/box.png" }) {
     this.position = position;
     this.width = size.width;
     this.height = size.height;
@@ -33,10 +34,19 @@ class Environment {
     this.isGrounded = false;
     this.isDeployed = false;
     this.health = health;
+    this.img = new Image();
+    this.img.src = imgSrc;
   }
   draw() {
-    c.fillStyle = "lightBlue";
-    c.fillRect(this.position.x, this.position.y, this.width, this.height);
+    c.drawImage(
+      this.img,
+      this.position.x,
+      this.position.y,
+      this.width,
+      this.height
+    );
+    // c.fillStyle = "lightBlue";
+    // c.fillRect(this.position.x, this.position.y, this.width, this.height);
   }
   update() {
     this.draw();
@@ -110,33 +120,41 @@ blocks[7] = new Environment({
   size: { width: 70, height: 70 },
 });
 
-//  left boundary
-boundaries[2] = new Boundary({
-  position: { x: -2000, y: 0 },
-  size: { width: 20, height: canvas.height - 1 },
-  health: 1000000,
-});
-//  right boundary
-boundaries[3] = new Boundary({
-  position: { x: canvas.width + 2000, y: 0 },
-  size: { width: 20, height: canvas.height - 1 },
-  health: 1000000,
-});
-//  Top cover
+// //  left boundary
+// boundaries[2] = new Boundary({
+//   position: { x: -5, y: 0 },
+//   size: { width: 20, height: canvas.height - 1 },
+//   health: 1000000,
+// });
+// //  right boundary
+// boundaries[3] = new Boundary({
+//   position: { x: canvas.width - 5, y: 0 },
+//   size: { width: 20, height: canvas.height - 1 },
+//   health: 1000000,
+// });
+// //  Top cover
+// boundaries[0] = new Boundary({
+//   position: { x: -5, y: -20 },
+//   size: { width: canvas.width + 10, height: 20 },
+//   health: 1000000,
+// });
+
+//  base
 boundaries[0] = new Boundary({
-  position: { x: -20, y: -20 },
-  size: { width: canvas.width + 40, height: 20 },
+  position: { x: -5, y: 556 },
+  size: { width: canvas.width + 10, height: 20 },
   health: 1000000,
 });
-//  base
-boundaries[1] = new Boundary({
-  position: { x: -2000, y: 556 },
-  size: { width: canvas.width + 4000, height: 20 },
-  health: 1000000,
+platforms[0] = new Platform({
+  position: { x: -5, y: 556 },
+  width: canvas.width + 10,
+  height: 20,
+});
+platforms[1] = new Platform({
+  position: { x: -5, y: -20 },
+  width: canvas.width,
+  height: 20,
 });
-
-sorroundings.push(boundaries[2]);
-sorroundings.push(boundaries[3]);
 
 blocks.forEach((b) => {
   b.isDeployed = false;
@@ -151,3 +169,59 @@ defenseBlockBtn.onclick = () => {
   inventoryScr.style.display = "none";
   inventoryOpen = false;
 };
+
+class Background {
+  constructor({ imgSrc, factor }) {
+    this.img = new Image();
+    this.img.src = imgSrc;
+    this.offset = { x: 4084, y: 0 };
+    this.factor = factor;
+  }
+
+  draw() {
+    // drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
+    c.drawImage(
+      this.img,
+      this.offset.x,
+      this.offset.y,
+      canvas.width,
+      canvas.height,
+      0,
+      0,
+      canvas.width,
+      canvas.height
+    );
+  }
+
+  update(direction = 1) {
+    // this.offset.x += BGSpeed * this.velocityFactor * direction;
+    this.offset.x += Pvelocity * direction * this.factor;
+    if (this.offset.x >= 7147) {
+      this.offset.x = 0;
+    }
+    if (this.offset.x < 0) this.offset.x = 7147;
+    // this.draw();
+  }
+}
+
+const layer2 = new Background({
+  imgSrc: "./assets/Background/Layer2.png",
+  factor: 0.015,
+});
+const layer3 = new Background({
+  imgSrc: "./assets/Background/Layer3.png",
+  factor: 0.025,
+});
+const layer4 = new Background({
+  imgSrc: "./assets/Background/Layer4.png",
+  factor: 0.035,
+});
+const layer5 = new Background({
+  imgSrc: "./assets/Background/Layer5.png",
+  factor: 0.05,
+});
+const layer1 = new Background({
+  imgSrc: "./assets/Background/Layer1.png",
+  factor: 0.01,
+});
+

src/Gun.js

@@ -44,7 +44,7 @@ class Gun {
   removeBullet(index) {
     const removedBullet = this.bullets.splice(index, 1)[0];
     const ind = sorroundings.indexOf(removedBullet);
-    sorroundings.splice(ind,1);
+    sorroundings.splice(ind, 1);
   }
 
   // Method to update and draw bullets
@@ -90,6 +90,7 @@ class Gun {
         theta: theta,
         collisionBlocks: this.blocks,
         zombies,
+        platforms,
         damage: this.damage,
         player: this.player,
       });
@@ -210,7 +211,7 @@ class Cannon extends Gun {
       spread,
       color,
     });
-    this.position = {x:x,y:y};
+    this.position = { x: x, y: y };
     this.width = width;
     this.height = height;
     this.direction = direction;
@@ -226,27 +227,31 @@ class Cannon extends Gun {
     if (this.ammo > 0) {
       const cannonBall1 = new Bullet({
         position: {
-          x: this.position.x + this.width * Math.cos(this.alpha) - this.offset.x,
+          x:
+            this.position.x + this.width * Math.cos(this.alpha) - this.offset.x,
           y: this.position.y + this.width * Math.sin(this.alpha),
         },
         velocity: this.velocity,
         theta: this.alpha,
         collisionBlocks: this.blocks,
         zombies,
+        platforms,
         damage: this.damage,
         player: this.player,
         radius: 12,
         color: "gray",
       });
       const cannonBall2 = new Bullet({
         position: {
-          x: this.position.x + this.width * Math.cos(this.alpha) - this.offset.x,
+          x:
+            this.position.x + this.width * Math.cos(this.alpha) - this.offset.x,
           y: this.position.y + this.width * Math.sin(this.alpha),
         },
         velocity: this.velocity,
         theta: this.alpha + 0.05,
         collisionBlocks: this.blocks,
         zombies,
+        platforms,
         damage: this.damage,
         player: this.player,
         radius: 12,
@@ -261,6 +266,7 @@ class Cannon extends Gun {
         theta: this.alpha - 0.05,
         collisionBlocks: this.blocks,
         zombies,
+        platforms,
         damage: this.damage,
         player: this.player,
         radius: 12,