added particles and sounds

index.html

@@ -36,7 +36,7 @@
     .info {
       margin: auto;
       padding-bottom: 100px;
-    } 
+    }
 
     button {
       padding: 10px;
@@ -126,12 +126,16 @@ <h2 id="game-win-level">You Win!</h2>
   <h3 class="ui-text" id="level">Level: </h3>
   <h3 class="ui-text" id="score">Score: </h3>
 
+
   <script src="./js/AssetMan.js"></script>
   <script src="./js/Bullet.js"></script>
+  <script src="./js/Particle.js"></script>
   <script src="./js/Rock.js"></script>
   <script src="./js/Player.js"></script>
   <script src="./js/Game.js"></script>
   <script src="./js/index.js"></script>
+
+
 </body>
 
 </html>

js/AssetMan.js

@@ -6,8 +6,9 @@ class AssetMan {
 
   preload() {
     this.sounds.music = loadSound('./assets/sfx/music.mp3');
-    this.sounds.pew = loadSound('./assets/sfx/laser.mp3');
+    this.sounds.pew = loadSound('./assets/sfx/laser2.mp3');
     this.sounds.gameover = loadSound('./assets/sfx/gameover.mp3');
     this.sounds.gamewin = loadSound('./assets/sfx/win.mp3');
+    this.sounds.blast = loadSound('./assets/sfx/bomb2.mp3');
   }
 }

js/Bullet.js

@@ -11,12 +11,13 @@ class Bullet {
     this.pos = createVector(spos.x, spos.y);
     this.vel = p5.Vector.fromAngle(angle);
     this.vel.mult(10);
+    this.angle = angle;
   }
 
   update() {
     this.pos.add(this.vel);
   };
-
+  
   render() {
     push();
     stroke(255);

js/Game.js

@@ -12,6 +12,7 @@ class Game {
     this.countDown = 1;
     this.ship = new Player();
     this.bullets = [];
+    this.particles = [];
     this.rocks = [];
     this.sounds = assets.sounds;
     this.level = 1;
@@ -46,6 +47,7 @@ class Game {
       window.clearInterval(timer);
     }, 2000);
 
+    this.sounds.blast.amp(0.03);
     this.sounds.music.setLoop(true)
     this.sounds.music.amp(0.2);
     this.sounds.music.play();
@@ -120,9 +122,7 @@ class Game {
 
   handleLevels() {
     if (this.level === 1) {
-      let r = new Rock();
-      r.radius = 15;
-      this.rocks.push(r);
+      this.rocks.push(new Rock(random(width), random(height), 20));
     }
     if (this.level === 2) {
       this.rockBreakRadius = 25;

js/Particle.js

@@ -0,0 +1,20 @@
+class Particle extends Bullet {
+  constructor(spos, angle) {
+    super(spos, angle);
+
+    this.vel = p5.Vector.random2D();
+    this.life = 1;
+  }
+
+  render() {
+    this.vel.y += random(-0.2, 0.2);
+    push();
+    stroke(255, this.life * 255);
+    strokeWeight(2);
+    point(this.pos.x, this.pos.y);
+    pop();
+  };
+  die() {
+    this.life -= 0.03;
+  }
+}

js/Player.js

@@ -111,7 +111,6 @@ class Player {
   }
 
   render() {
-
     push();
     translate(this.pos.x, this.pos.y);
     // text(this.tailDots.length, 100, 100)

js/index.js

@@ -70,6 +70,10 @@ function draw() {
             game.rocks = game.rocks.concat(newRocks);
           }
           // delete the rock and bullet
+          for (let k = 0; k < 10; k++) {
+            game.particles.push(new Particle(game.bullets[i].pos));
+            game.sounds.blast.play()
+          }
           game.rocks.splice(j, 1);
           game.bullets.splice(i, 1);
           game.score += 100;
@@ -79,4 +83,13 @@ function draw() {
     }
   }
 
+  for (let i = 0; i < game.particles.length; i++) {
+    game.particles[i].update();
+    game.particles[i].render();
+    game.particles[i].die();
+    if (game.particles[i].life < 0) {
+      game.particles.splice(i, 1)
+    }
+  }
+
 }