Merge pull request #3 from DevTony101/2-special-item

Add "bonus" asteroid
DevTony101 · Jul 30, 2023 · 5e6dc31 · 5e6dc31
2 parents d696c00 + 1eb11ec
commit 5e6dc31
Show file tree

Hide file tree

Showing 6 changed files with 147 additions and 40 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <!-- p5 -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/p5@1.7.0/lib/p5.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
     <!-- p5.touchgui -->
     <script src="https://unpkg.com/p5.touchgui@0.5.2/lib/p5.touchgui.js"></script>

diff --git a/sketch.js b/sketch.js
@@ -48,21 +48,39 @@ function setup() {
   createCanvas(windowWidth, windowHeight);
   gui = createGui();
   easyButton = createButton("Restart Game [Easy]", (width / 2) - 375, (height / 2) + 100, 230, 40);
+  easyButton.visible = false;
+  easyButton.setStyle({
+    strokeBg: color(255),
+    fillBg: color(95, 220, 227),
+    fillLabel: color(0),
+    fillBgHover: color(140, 232, 237),
+    fillLabelHover: color(0),
+    strokeBgHover: color(255),
+  });
+
   mediumButton = createButton("Restart Game [Medium]", (width / 2) - 125, (height / 2) + 100, 250, 40);
+  mediumButton.visible = false;
+  mediumButton.setStyle({
+    strokeBg: color(255),
+    fillBg: color(245, 186, 91),
+    fillLabel: color(0),
+    fillBgHover: color(250, 201, 122),
+    fillLabelHover: color(0),
+    strokeBgHover: color(255)
+  });
+
   hardButton = createButton("Restart Game [Hard]", (width / 2) + 145, (height / 2) + 100, 230, 40);
+  hardButton.visible = false;
+  hardButton.setStyle({
+    strokeBg: color(255),
+    fillBg: color(255, 130, 84),
+    fillLabel: color(0),
+    fillBgHover: color(250, 156, 122),
+    fillLabelHover: color(0),
+    strokeBgHover: color(255)
+  });
+
   buttons = [easyButton, mediumButton, hardButton];
-  for (button of buttons) {
-    button.visible = false;
-    button.setStyle({
-      strokeBg: color(255),
-      fillBg: color(0),
-      fillLabel: color(255),
-      fillBgActive: color(255),
-      fillLabelActive: color(0),
-      fillBgHover: color(255),
-      fillLabelHover: color(0)
-    });
-  }
   restartGame("EASY");
 }
 
@@ -84,6 +102,7 @@ function draw() {
   drawStars();
   drawAsteroids();
   drawDifficulty();
+  drawBonusText();
   ship.draw(mouseX);
   if (!ship.hasAnyHeartsLeft() || gameOver) {
     asteroids = [];
@@ -133,6 +152,7 @@ function restartGame(difficulty) {
   ship.setShootSoundEffect(shootEffect);
   ship.setHeartImage(heartImage);
   ship.setScoreFont(psFont);
+  ship.setAdditionalShots();
   stars = new MovableObjects(0, starsMovement, numberOfStars);
   buttons.forEach(button => button.visible = false);
   asteroids = Array(numberOfInitialAsteroids)
@@ -156,10 +176,14 @@ function drawAsteroids() {
   if (!gameOver) {
     if (frameCount % 50 === 0) {
       for (let i = 0; i < asteroidsToAdd; i++) {
-        asteroids.push(new Asteroid(random(50, width - 50), random(10, 20)));
+        const asteroid = new Asteroid(random(50, width - 50), random(10, 20));
+        if (random() < 0.15 && !ship.hasMultShooter()) {
+          asteroid.setIsBonus(true);
+        }
+        asteroids.push(asteroid);
       }
     }
-  
+
     for (let i = 0; i < asteroids.length; i++) {
       const asteroid = asteroids[i];
       const idxBullet = asteroid.isHitBy(ship.getBullets());
@@ -168,13 +192,14 @@ function drawAsteroids() {
         asteroids.splice(i, 1);
         continue;
       }
-      
+
       if (!asteroid.hasExploded() && idxBullet >= 0) {
         ship.incrementScore(scoreIncrement * scoreMultiplier);
         asteroid.explode(explodeEffect);
         ship.deleteBullet(idxBullet);
+        if (asteroid.isBonus && !ship.hasMultShooter()) ship.enableMultShooter();
       }
-  
+
       asteroid.move();
       asteroid.draw();
     }
@@ -187,13 +212,24 @@ function drawDifficulty() {
     textFont(psFont);
     textSize(12);
     if (globalDifficulty === "EASY") fill(68, 161, 160);
-    else if(globalDifficulty === "MEDIUM") fill(238, 184, 104);
+    else if (globalDifficulty === "MEDIUM") fill(238, 184, 104);
     else if (globalDifficulty === "HARD") fill(250, 0, 63);
     text(`Difficulty [${globalDifficulty}]`, 20, 130);
     pop();
   }
 }
 
+function drawBonusText() {
+  if (ship.hasMultShooter() && !gameOver) {
+    push();
+    fill(150, 0, 100);
+    textFont(psFont);
+    textSize(10);
+    text("Bonus [ACTIVE]", 20, 160);
+    pop();
+  }
+}
+
 function drawAttribution() {
   push();
   fill(255);

diff --git a/src/asteroid.js b/src/asteroid.js
@@ -5,6 +5,13 @@ class Asteroid extends Debri {
     this.movementX = random(-1, 1);
     this.debri = [];
     this.exploded = false;
+    this.isBonus = false;
+    this.color = undefined;
+  }
+
+  setIsBonus(value) {
+    this.isBonus = value;
+    if (value) this.color = color(random(150, 200), random(150, 200), random(150, 200));
   }
 
   hasExploded() {
@@ -40,7 +47,7 @@ class Asteroid extends Debri {
   }
 
   draw() {
-    super.draw();
-    this.debri.forEach(debri => debri.draw());
+    super.draw(this.color);
+    this.debri.forEach(debri => debri.draw(this.color));
   }
 }
diff --git a/src/debri.js b/src/debri.js
@@ -42,10 +42,11 @@ class Debri {
     return p5.Vector.add(p1, p2).div(2);
   }
 
-  draw() {
+  draw(color) {
     push();
     beginShape();
-    noFill();
+    if (color) fill(color);
+    else noFill();
     stroke(255);
     for (let i = 0; i < this.verticies.length; i++) {
       const { x, y } = this.verticies[i];

diff --git a/src/movable.js b/src/movable.js
@@ -10,28 +10,47 @@ class MovableObjects {
       });
     }
   }
-  
+
   add(movable) {
     this.collection.push(movable);
   }
-  
+
   deleteByIndex(idx) {
     this.collection.splice(idx, 1);
   }
-
+
+  deleteAll() {
+    this.collection = [];
+  }
+
   size() {
     return this.collection.length;
   }
-  
+
   draw(drawFn) {
     for (let i = 0; i < this.collection.length; i++) {
-      let { x, y } = this.collection[i];
+      let { x, y, angle } = this.collection[i];
       push();
-      drawFn(x, y);
+      drawFn(x, y, angle);
       pop();
     }
   }
-
+
+  drawBatch(drawFn, batchSize) {
+    angleMode(RADIANS);
+    const end = round(this.collection.length / batchSize);
+    for (let i = 0; i < end; i++) {
+      for (let j = i * batchSize; j < (i * batchSize) + batchSize; j++) {
+        if (this.collection[j]) {
+          let { x, y } = this.collection[j];
+          push();
+          drawFn(x, y);
+          pop();
+        }
+      }
+    }
+  }
+
   move(condition, shouldResetY) {
     for (let i = 0; i < this.collection.length; i++) {
       let { x, y } = this.collection[i];

diff --git a/src/ship.js b/src/ship.js
@@ -6,6 +6,7 @@ class Ship {
     this.score = 0;
     this.bullets = new MovableObjects(0, -bulletMovement);
     this.bulletsLimit = bulletsLimit;
+    this.multShooterEnabled = false;
   }
 
   getBullets() {
@@ -33,13 +34,31 @@ class Ship {
     this.scoreFont = font;
   }
 
+  setAdditionalShots() {
+    if (globalDifficulty === "EASY") this.additionalShots = 1;
+    else if (globalDifficulty === "MEDIUM") this.additionalShots = 2;
+    else if (globalDifficulty === "HARD") this.additionalShots = 4;
+  }
+
   shoot() {
-    if (this.bullets.size() < this.bulletsLimit) {
+    const limit = this.multShooterEnabled ? this.bulletsLimit * (this.additionalShots + 1) : this.bulletsLimit;
+    if (this.bullets.size() < limit) {
       this.shootSoundEffect.play();
-      this.bullets.add({
-        x: mapXLimits(mouseX),
-        y: height - 50,
-      });
+      if (this.multShooterEnabled) {
+        for (let i = 0; i < this.additionalShots + 1; i++) {
+          const xOffset = this.additionalShots > 3 ? 5 * this.additionalShots : 0;
+          const xInOffset = this.addiotnalShots > 3 ? 15 : 20;
+          this.bullets.add({
+            x: (mapXLimits(mouseX) + ((xInOffset * i) - xInOffset)) - xOffset,
+            y: height - (i % 2 == 0 ? 25 : 50),
+          });
+        }
+      } else {
+        this.bullets.add({
+          x: mapXLimits(mouseX),
+          y: height - 50
+        });
+      }
     }
   }
 
@@ -55,7 +74,23 @@ class Ship {
     return this.hearts > 0;
   }
 
+  hasMultShooter() {
+    return this.multShooterEnabled;
+  }
+
+  enableMultShooter() {
+    this.bonusTime = new Date();
+    this.multShooterEnabled = true;
+  }
+
   draw(x) {
+    if (this.multShooterEnabled) {
+      const diff = new Date().getTime() - this.bonusTime.getTime();
+      if (((diff % 60000) / 1000).toFixed(0) >= 10) {
+        this.multShooterEnabled = false;
+        this.bullets.deleteAll();
+      }
+    }
     this.drawScore();
     if (!gameOver) {
       this.drawHearts();
@@ -74,12 +109,21 @@ class Ship {
 
   drawBullets() {
     if (this.bullets.size() > 0) this.bullets.move((x, y) => y < 0);
-    this.bullets.draw((x, y) => {
-      translate(x, y);
-      fill(255);
-      noStroke();
-      rect(0, 0, 2, 10);
-    });
+    if (this.multShooterEnabled) {
+      this.bullets.drawBatch((x, y) => {
+        translate(x, y);
+        fill(255);
+        noStroke();
+        rect(0, 0, 2, 10);
+      }, this.additionalShots + 1);
+    } else {
+      this.bullets.draw((x, y) => {
+        translate(x, y);
+        fill(255);
+        noStroke();
+        rect(0, 0, 2, 10);
+      });
+    }
   }
 
   drawHearts() {