Added Sound effects, different types of zombies and jetpack

index.html

@@ -47,10 +47,10 @@
     <div id="container">
       <div id="shopCont">
         <button id="shop">Shop</button>
-        <p id="score">Score:💰00</p>
+        <p class="text" id="score">Score:💰00</p>
       </div>
       <div id="PUTimerCont">
-        <p id="PUmsg">Not enough credit</p>
+        <p class="text" id="PUmsg">Not enough credit</p>
         <div
           style="display: flex; justify-content: center; align-items: center"
         >
@@ -71,24 +71,40 @@
           <div id="timer">0:00</div>
         </div>
         <div
-          style="
-            width: 100%;
-            display: flex;
-            align-items: start;
-            font-size: 2em;
-          "
+          style="width: 100%; display: flex; align-items: start; font-size: 2em"
         >
           🔥<meter id="Bmeter" style="width: 40%"></meter>
           <div style="font-size: 1.3rem; color: white">
-            <p id="gun">M416</p>
-            <p id="ammo">Ammo: 90</p>
+            <p class="text" id="gun">M416</p>
+            <p class="text" id="ammo">Ammo: 90</p>
           </div>
           <div
             id="gunIcon"
             style="width: 200px; display: flex; padding: 13px 0px 0px 13px"
           ></div>
         </div>
       </div>
+      <div
+        style="
+          position: absolute;
+          display: flex;
+          flex-direction: column;
+          top: 200px;
+          left: -10px;
+          height: 40vh;
+          width: 20vw;
+        "
+      >
+        <p class="text" style="position: relative; top: -55px; left: 38px;">Fuel</p>
+        <meter
+          id="Fmeter"
+          value="0.5"
+          low="0.24"
+          high="0.6"
+          optimum="0.9"
+          style="width: 120px; height: 30px"
+        ></meter>
+      </div>
       <canvas></canvas>
     </div>
     <script src="./src/utils.js"></script>

src/Bullet.js

@@ -99,3 +99,13 @@ class Bullet {
     });
   }
 }
+
+class Particle {
+  constructor(x, y, dx, dy) {
+    this.x = x;
+    this.y = y;
+    this.xs = dx;
+    this.ys = dy;
+    this.life = 0;
+  }
+}

src/Gun.js

@@ -9,6 +9,7 @@ class Gun {
     reloadTime = 3.5,
     name,
     player,
+    spread,
   }) {
     this.bullets = [];
     this.ammo = ammo;
@@ -26,6 +27,10 @@ class Gun {
     this.velocity = velocity;
     this.player = player;
     this.lastFired = 0;
+    this.spread = spread;
+    this.width = 55;
+    this.height = 20;
+    this.recoilOffset = { x: 0, y: 0 };
   }
 
   // Method to add a new bullet to the array
@@ -60,31 +65,59 @@ class Gun {
 
   fireBullet(player) {
     if (this.mag > 0) {
+      // Add shake effect
+      this.recoilOffset.x =
+        (Math.random() - 0.5) * (this.spread / (Math.PI / 180)) * 5;
+      this.recoilOffset.y =
+        (Math.random() - 0.5) * (this.spread / (Math.PI / 180)) * 5;
       //  creating bullet
+      const angle = theta;
+      theta += randomIntFromRange(-1, 1) * this.spread;
       const bullet = new Bullet({
         position: {
-          x: player.position.x + player.width / 2,
-          y: player.position.y + player.height / 2,
+          x:
+            player.position.x + player.width / 2 + this.width * Math.cos(angle),
+          y:
+            player.position.y +
+            player.height / 2 +
+            this.width * Math.sin(angle),
         },
         velocity: this.velocity,
-        theta,
+        theta: theta,
         collisionBlocks: this.blocks,
         zombies,
         damage: this.damage,
         player: this.player,
       });
+      const soundClone = sounds[this.name].cloneNode();
+      if (this.name === "M4A1") soundClone.volume = 0.15;
+      else soundClone.volume = 0.5;
+      soundClone.play();
       this.addBullet(bullet);
       this.mag--;
       this.roundsFired++;
       //  updating meters and texts
       Bmeter.value = this.mag / 100;
       ammo.textContent = `${this.mag}/${this.ammo}`;
-    } if(this.mag<=0) {
+    }
+    if (this.mag <= 0) {
       color = "red";
       ammo.style.color = color;
     }
   }
 
+  draw() {
+    c.save();
+    c.translate(
+      this.player.position.x + this.player.width / 2 + this.recoilOffset.x,
+      this.player.position.y + this.player.height / 2 + this.recoilOffset.y
+    );
+    c.rotate(theta);
+    c.fillStyle = "gray";
+    c.fillRect(0, -this.height / 2, this.width, this.height);
+    c.restore();
+  }
+
   startFiring(player) {
     if (this.isFiring || this.isReloading) return;
 

src/Player.js

@@ -18,6 +18,13 @@ class Player {
     this.grounded = false;
     this.lastInjured = 0;
     this.score = 0;
+
+    this.fuel = 100;
+    this.jetpackActive = false;
+    this.maxFuel = 100;
+    this.fuelUsage = 0.05;
+    this.refuelRate = 0.015;
+    this.jetpackGravity = 0.01;
   }
 
   draw() {
@@ -26,6 +33,22 @@ class Player {
   }
 
   update() {
+    //  Jetpack logic
+    //  jumpSt = 13
+    if (this.jetpackActive && this.fuel > 0) {
+      this.fuel -= this.fuelUsage;
+      this.gravity = this.jetpackGravity;
+      this.jumpStrength = 3;
+    } else {
+      this.gravity = 0.5;
+      this.jumpStrength = 13;
+      this.jetpackActive = false;
+    }
+
+    //  refuel logic
+    if (!this.jetpackActive && this.fuel < this.maxFuel)
+      this.fuel += this.refuelRate;
+    Fmeter.value = this.fuel / 100;
     this.draw();
 
     this.position.x += this.velocity.x;
@@ -35,6 +58,12 @@ class Player {
     this.checkForVerticalCollision();
   }
 
+  toggleJetpack() {
+    if (this.fuel > 0) {
+      this.jetpackActive = !this.jetpackActive;
+    }
+  }
+
   checkForHorizontalCollision() {
     //  horizontal collision with blocks;
     for (let i = 0; i < this.collisionBlocks.length; i++) {
@@ -182,15 +211,18 @@ class Zombie extends Player {
   }
 
   draw() {
-
     c.fillStyle = this.color;
     c.fillRect(this.position.x, this.position.y, this.width, this.height);
   }
 
   attack(player, attackRate) {
     const currentTime = Date.now();
     if (currentTime - this.lastAttackTime >= attackRate) {
-      player.health -= (this.damage + 0.25 * zombies.length);
+      if (player instanceof Player) {
+        if (randomIntFromRange(1, 10) % 2 === 0) playSound("Hurt", 0.5);
+        else playSound("Hurt2", 0.5);
+      }
+      player.health -= this.damage + 0.25 * zombies.length;
       if (player instanceof Player) Hmeter.value = player.health / 100;
       if (player.health <= 0) return true;
       this.lastAttackTime = currentTime;
@@ -237,7 +269,7 @@ class JumpingZombie extends Zombie {
     attackFreq = 2000,
     jumpStrength = 15,
     damage,
-    speed
+    speed,
   }) {
     super({
       position,
@@ -250,13 +282,13 @@ class JumpingZombie extends Zombie {
       attackFreq,
       color,
       speed,
-      damage
+      damage,
     });
     this.jumpStrength = jumpStrength;
   }
 
   draw() {
-    c.fillStyle = 'green';
+    c.fillStyle = "green";
     c.fillRect(this.position.x, this.position.y, this.width, this.height);
   }