Adding Gun GUI - gun and bullet holes

src/Gun.js

@@ -12,28 +12,77 @@ The Gun is the mouse. To draw it, hide the cursor with the noCursor function and
 */
 
 
-class Gun {
+class Gun extends Subject {
-  noCursor() { }
+  constructor(totalShots) {
-  draw() { }
+    super();
-  setup() {
+    this.cursorImg = null;
-    shot = loadSound('data/shot.mp3');
+    this.shotSound = null;
-    empty = loadSound('data/empty.mp3');
+    this.emptySound = null;
+    this.remainingShots = totalShots;
+    this.bullets = [];  // array of Bullet objects
   }
 
-  // mousePressed() {
+  setup() {
-  //   if () {
+    this.cursorImg = loadImage(cursor);
-  //     shot.play();
+    this.shotSound = loadSound(shot);
-  //   } else { // no bullets left
+    this.emptySound = loadSound(empty);
-  //     empty.play();
+  }
-  //   }
+  draw() {
-  // }
+    noCursor();
+
+    if (this.cursorImg) {
+      image(this.cursorImg, mouseX, mouseY, CURSOR_SIZE, CURSOR_SIZE);
+    } // custom cursor
+
+    for (let bullet of this.bullets) {
+      bullet.draw();
+    }   // draw bullet holes
+
+    this.bullets = this.bullets.filter(bullet => bullet.visible); // clean up bullet holes
+  }
+  
+   shoot() {
+    if (this.remainingShots > 0) {
+      this.remainingShots--;
+
+      if (this.shotSound) this.shotSound.play();
+
+      const x = mouseX;
+      const y = mouseY;
+
+      const bullet = new Bullet(x, y);
+      this.bullets.push(bullet);
+
+      this.notifySubscribers('gun', x, y, this.remainingShots);
+    } else {
+      if (this.emptySound) this.emptySound.play();
+    }
+  }
 }
 
 
 // Bullet
 class Bullet {
+  constructor(x, y) {
+    this.x = x;
+    this.y = y;
+    this.visible = true;
 
-  // TO DO
+    this.img = null;
+    loadImage(bulletHole, (img) => {
+      this.img = img;
+    });
+
+    setTimeout(() => {
+      this.visible = false;
+    }, BULLET_DURATION);
+  }
+
+  draw() {
+    if (this.visible && this.img) {
+      image(this.img, this.x - BULLET_HOLE_SIZE / 2, this.y - BULLET_HOLE_SIZE / 2, BULLET_HOLE_SIZE, BULLET_HOLE_SIZE);
+    }
+  }
 }
 
 

src/main.js

@@ -14,6 +14,8 @@ function setup() {
   createCanvas(800, 600);
 
   // 1. Init gun and score display
+  gun = new Gun(TOT_SHOTS);
+  gun.setup();
   score = new ScoreDisplay(TOT_SHOTS);
   // 2. Init the targets
 
@@ -22,13 +24,15 @@ function setup() {
 
 function draw() {
   background('#eeeeee');
+  gun.draw();
   score.draw();
   // draw targets, gun, bullets, score
-  
+
 }
 
 // Shoot
 function mousePressed() {
+  gun.shoot();
   // shoot
 }