Added sound effects and automated defense system

index.html

@@ -46,7 +46,7 @@
     </dialog>
     <div id="container">
       <div id="shopCont">
-        <button id="shop">Shop</button>
+        <button id="setting">Settings</button>
         <p class="text" id="score">Score:💰00</p>
       </div>
       <div id="PUTimerCont">
@@ -95,10 +95,11 @@
           width: 20vw;
         "
       >
-        <p class="text" style="position: relative; top: -55px; left: 38px;">Fuel</p>
+        <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"

src/Bullet.js

@@ -9,6 +9,7 @@ class Bullet {
     radius = 5,
     zombies,
     player,
+    color = "yellow",
   }) {
     this.position = position;
     this.velocity = velocity;
@@ -21,11 +22,13 @@ class Bullet {
     this.zombies = zombies;
     this.radius = radius;
     this.player = player;
+    this.color = color;
+    this.isCannon = false;
   }
 
   draw() {
     c.beginPath();
-    c.fillStyle = "yellow";
+    c.fillStyle = this.color;
     c.arc(this.position.x, this.position.y, this.radius, 0, Math.PI * 2);
     c.fill();
     c.closePath();
@@ -46,6 +49,7 @@ class Bullet {
       if (bulletCollision({ bul: this, obj: collisionBlock })) {
         collisionBlock.health -= this.damage;
         if (collisionBlock.health < 0) this.collisionBlocks.splice(i, 1);
+        if (this.isCannon) playSound("cannonHit",0.2);
         return true;
       }
     }
@@ -60,6 +64,7 @@ class Bullet {
         if (zombie.health <= 0) this.zombies.splice(i, 1);
         this.player.score += this.damage;
         score.textContent = `Score:💰${this.player.score}`;
+        if (this.isCannon) playSound("cannonHit",0.2);
         return true;
       }
     }

src/Environment.js

@@ -30,6 +30,14 @@ const blocks = [];
 const l = canvas.width / 2 - 175;
 const h = canvas.width / 2 + 175;
 
+blocks[0] = new Environment({
+  position: { x: l - 97, y: 486 },
+  size: { width: 70, height: 70 },
+});
+blocks[1] = new Environment({
+  position: { x: l - 20, y: 486 },
+  size: { width: 70, height: 70 },
+});
 blocks[2] = new Environment({
   position: { x: l, y: 416 },
   size: { width: 70, height: 70 },
@@ -42,14 +50,6 @@ blocks[4] = new Environment({
   position: { x: h + 77, y: 416 },
   size: { width: 70, height: 70 },
 });
-blocks[1] = new Environment({
-  position: { x: l - 20, y: 486 },
-  size: { width: 70, height: 70 },
-});
-blocks[0] = new Environment({
-  position: { x: l - 97, y: 486 },
-  size: { width: 70, height: 70 },
-});
 blocks[5] = new Environment({
   position: { x: h + 20, y: 486 },
   size: { width: 70, height: 70 },
@@ -82,3 +82,4 @@ blocks[10] = new Environment({
   size: { width: canvas.width + 20, height: 20 },
   health: 1000000,
 });
+

src/Gun.js

@@ -10,6 +10,7 @@ class Gun {
     name,
     player,
     spread,
+    color = "gray",
   }) {
     this.bullets = [];
     this.ammo = ammo;
@@ -31,6 +32,7 @@ class Gun {
     this.width = 55;
     this.height = 20;
     this.recoilOffset = { x: 0, y: 0 };
+    this.color = color;
   }
 
   // Method to add a new bullet to the array
@@ -101,6 +103,7 @@ class Gun {
       ammo.textContent = `${this.mag}/${this.ammo}`;
     }
     if (this.mag <= 0) {
+      sounds["empty"].play();
       color = "red";
       ammo.style.color = color;
     }
@@ -113,7 +116,7 @@ class Gun {
       this.player.position.y + this.player.height / 2 + this.recoilOffset.y
     );
     c.rotate(theta);
-    c.fillStyle = "gray";
+    c.fillStyle = this.color;
     c.fillRect(0, -this.height / 2, this.width, this.height);
     c.restore();
   }
@@ -177,3 +180,126 @@ class Gun {
 }
 
 const guns = [];
+
+class Cannon extends Gun {
+  constructor({
+    x,
+    y,
+    width,
+    height,
+    ammo,
+    gunrate,
+    velocity,
+    blocks,
+    damage,
+    reloadTime,
+    name,
+    player,
+    spread,
+    direction,
+    angle,
+    alpha,
+    offset,
+    color,
+  }) {
+    super({
+      ammo,
+      gunrate,
+      velocity,
+      blocks,
+      damage,
+      reloadTime,
+      name,
+      player,
+      spread,
+      color,
+    });
+    this.x = x;
+    this.y = y;
+    this.width = width;
+    this.height = height;
+    this.direction = direction;
+    this.angle = angle;
+    this.alpha = alpha;
+    this.offset = offset;
+    this.interval;
+    this.color = color;
+  }
+
+  // Override the fireBullet method to use the fixed position and calculated angle
+  fireBullet() {
+    if (this.ammo > 0) {
+      const cannonBall1 = new Bullet({
+        position: {
+          x: this.x + this.width * Math.cos(this.alpha) - this.offset.x,
+          y: this.y + this.width * Math.sin(this.alpha),
+        },
+        velocity: this.velocity,
+        theta: this.alpha,
+        collisionBlocks: this.blocks,
+        zombies,
+        damage: this.damage,
+        player: this.player,
+        radius: 12,
+        color: "gray",
+      });
+      const cannonBall2 = new Bullet({
+        position: {
+          x: this.x + this.width * Math.cos(this.alpha) - this.offset.x,
+          y: this.y + this.width * Math.sin(this.alpha),
+        },
+        velocity: this.velocity,
+        theta: this.alpha + 0.05,
+        collisionBlocks: this.blocks,
+        zombies,
+        damage: this.damage,
+        player: this.player,
+        radius: 12,
+        color: "gray",
+      });
+      const cannonBall3 = new Bullet({
+        position: {
+          x: this.x + this.width * Math.cos(this.alpha) - 20,
+          y: this.y + this.width * Math.sin(this.alpha),
+        },
+        velocity: this.velocity,
+        theta: this.alpha - 0.05,
+        collisionBlocks: this.blocks,
+        zombies,
+        damage: this.damage,
+        player: this.player,
+        radius: 12,
+        color: "gray",
+      });
+      cannonBall1.isCannon = true;
+      cannonBall2.isCannon = true;
+      cannonBall3.isCannon = true;
+      playSound("cannon", 0.5);
+      this.addBullet(cannonBall1);
+      this.addBullet(cannonBall2);
+      this.addBullet(cannonBall3);
+      this.ammo -= 3;
+    }
+  }
+
+  startFiring() {
+    const intervalTime = 60000 / this.gunrate;
+
+    this.interval = setInterval(() => {
+      this.fireBullet();
+    }, intervalTime);
+  }
+
+  stopFiring() {
+    clearInterval(this.interval);
+  }
+
+  draw() {
+    c.save();
+    c.translate(this.x, this.y);
+    c.rotate(this.angle);
+    c.fillStyle = this.color;
+    c.fillRect(0, -this.height / 2, this.width, this.height);
+    c.restore();
+  }
+}

src/Player.js

@@ -19,11 +19,10 @@ class Player {
     this.lastInjured = 0;
     this.score = 0;
 
-    this.fuel = 100;
     this.jetpackActive = false;
     this.maxFuel = 100;
     this.fuelUsage = 0.05;
-    this.refuelRate = 0.015;
+    this.refuelRate = 0.002;
     this.jetpackGravity = 0.01;
   }
 
@@ -35,8 +34,8 @@ class Player {
   update() {
     //  Jetpack logic
     //  jumpSt = 13
-    if (this.jetpackActive && this.fuel > 0) {
-      this.fuel -= this.fuelUsage;
+    if (this.jetpackActive && fuel > 0) {
+      fuel -= this.fuelUsage;
       this.gravity = this.jetpackGravity;
       this.jumpStrength = 3;
     } else {
@@ -46,9 +45,8 @@ class Player {
     }
 
     //  refuel logic
-    if (!this.jetpackActive && this.fuel < this.maxFuel)
-      this.fuel += this.refuelRate;
-    Fmeter.value = this.fuel / 100;
+    if (!this.jetpackActive && fuel < this.maxFuel) fuel += this.refuelRate;
+    Fmeter.value = fuel / 100;
     this.draw();
 
     this.position.x += this.velocity.x;
@@ -59,8 +57,16 @@ class Player {
   }
 
   toggleJetpack() {
-    if (this.fuel > 20) {
-      this.jetpackActive = !this.jetpackActive;
+    if (fuel > 0) {
+      if (this.jetpackActive) {
+        this.jetpackActive = false;
+        jetpackSoundOff();
+      } else {
+        if (fuel > 20) {
+          this.jetpackActive = true;
+          jetpackSoundOn();
+        }
+      }
     }
   }
 
@@ -162,6 +168,8 @@ class Player {
           ) {
             // console.log("health rem: " + this.health);
             this.health -= 10;
+            if (randomIntFromRange(1, 10) % 2 === 0) playSound("Hurt", 0.5);
+            else playSound("Hurt2", 0.5);
             if (this instanceof Player) {
               Hmeter.value = this.health / 100;
               if (this.health <= 0)
@@ -224,7 +232,15 @@ class Zombie extends Player {
       }
       player.health -= this.damage + 0.25 * zombies.length;
       if (player instanceof Player) Hmeter.value = player.health / 100;
-      if (player.health <= 0) return true;
+      if (player.health <= 0) {
+        if (player instanceof Environment) {
+          cannonLeft.ammo -= 6;
+          cannonRight.ammo -= 6;
+          console.log("left cannon ammo: " + cannonLeft.ammo);
+          console.log("right cannon ammo: " + cannonRight.ammo);
+        }
+        return true;
+      }
       this.lastAttackTime = currentTime;
     }
     return false;