fix hitboxes

public/burger.js

@@ -5,6 +5,10 @@ class Burger {
     this.velocity = {x: 0, y: -400};
     this.width = 32;
     this.height = 32;
+    this.hitbox = {
+      width: this.width * 0.6,
+      height: this.height * 0.6,
+    };
     this.alive = true;
   }
 
@@ -15,22 +19,27 @@ class Burger {
   }
 
   draw() {
+    let half = {
+      width: this.width * 0.5,
+      height: this.height * 0.5,
+    };
     let corner = {
-      x: this.position.x - this.width*0.5,
+      x: this.position.x - half.width,
-      y: this.position.y - this.height*0.5
+      y: this.position.y - half.height,
     };
-
     tint(Colors.Purple);
     image(this.image, corner.x, corner.y, this.width, this.height);
-
+    
     if (debug) {
       strokeWeight(4);
       stroke('#FF0000');
       point(this.position.x, this.position.y);
-
       strokeWeight(1);
       noFill();
-      rect(corner.x, corner.y, this.width, this.height);
+      rect(this.position.x - this.hitbox.width * 0.5,
+        this.position.y - this.hitbox.height * 0.5,
+        this.hitbox.width,
+        this.hitbox.height);
     }
   }
 

public/money.js

@@ -5,16 +5,24 @@ class Money {
     this.velocity = {x: 0, y: 0};
     this.width = 32;
     this.height = 32;
+    this.hitbox = {
+      width: this.width * 0.6,
+      height: this.height * 0.6,
+    };
     this.alive = true;
   }
 
   draw() {
     let half = {
-      height: this.height * 0.5,
       width: this.width * 0.5,
+      height: this.height * 0.5,
+    };
+    let corner = {
+      x: this.position.x - half.width,
+      y: this.position.y - half.height,
     };
     tint(Colors.DarkGreen);
-    image(this.image, this.position.x - half.width, this.position.y - half.height, this.width, this.height);
+    image(this.image, corner.x, corner.y, this.width, this.height);
     
     if (debug) {
       strokeWeight(4);
@@ -22,7 +30,10 @@ class Money {
       point(this.position.x, this.position.y);
       strokeWeight(1);
       noFill();
-      rect(this.position.x - half.width, this.position.y - half.height, this.width, this.height);
+      rect(this.position.x - this.hitbox.width * 0.5,
+        this.position.y - this.hitbox.height * 0.5,
+        this.hitbox.width,
+        this.hitbox.height);
     }
   }
 

public/player.js

@@ -6,6 +6,10 @@ class Player {
     this.image = random(Images.players);
     this.width = options.width || 64;
     this.height = options.height || 64;
+    this.hitbox = {
+      width: this.width * 0.6,
+      height: this.height * 0.6,
+    };
     this.burgers = 5;
     this.maxBurgers = 12;
     this.moneys = 0;
@@ -22,14 +26,14 @@ class Player {
   }
 
   draw() {
-    let corner = {
-      x: this.position.x - this.width*0.5,
-      y: this.position.y - this.height*0.5
-    };
     let half = {
       width: this.width * 0.5,
       height: this.height * 0.5,
     };
+    let corner = {
+      x: this.position.x - half.width,
+      y: this.position.y - half.height,
+    };
     tint(Colors.Purple);
     image(this.image, corner.x, corner.y, this.width, this.height);
 
@@ -43,41 +47,59 @@ class Player {
 
       strokeWeight(1);
       noFill();
-      rect(corner.x, corner.y, this.width, this.height);
+
+      rect(this.position.x - this.hitbox.width * 0.5,
+        this.position.y - this.hitbox.height * 0.5,
+        this.hitbox.width,
+        this.hitbox.height);
     }
   }
 
   drawBurgerMeter() {
     let half = {width: this.width*0.5, height: this.height*0.5};
-    let w = this.width;
+    let box = {
-    let h = this.height * 0.2;
+      w: 64,
-    let x = this.position.x - half.width;
+      h: 12,
-    let y = this.position.y + half.height + this.height * 0.1;
+      x: this.position.x - half.width,
-    let cellWidth = w / this.maxBurgers;
+      y: this.position.y + half.height,
+    }
 
     stroke(Colors.Purple);
     strokeWeight(1);
     noFill();
-    rect(x, y, w, h, 4);
+    rect(box.x, box.y, box.w, box.h, 4);
+
+    let cellWidth = (box.w-8) / this.maxBurgers;
 
     noStroke();
     fill(Colors.Purple);
     for (let i = 0; i < this.burgers; i++) {
-      let cellX = x + i * cellWidth;
+      let cellX = box.x + 4 + i * cellWidth;
-      rect(cellX + cellWidth * 0.1, y + h*0.1, cellWidth*0.8, h*0.8);
+      rect(cellX, box.y+2, cellWidth-1, 8);
     }
   }
 
   drawMoneyMeter() {
+    let half = {width: this.width*0.5, height: this.height*0.5};
+    let box = {
+      w: 64,
+      h: 12,
+      x: this.position.x - half.width,
+      y: this.position.y + half.height + 14,
+    }
+
+    stroke(Colors.DarkGreen);
+    strokeWeight(1);
+    noFill();
+    rect(box.x, box.y, box.w, box.h, 4);
+
+    let cellWidth = (box.w-8) / this.maxMoneys;
+
     noStroke();
     fill(Colors.DarkGreen);
-    let meterWidth = this.width;
-    let meterHeight = this.height * 0.2;
-    let cellWidth = meterWidth / this.maxMoneys;
     for (let i = 0; i < this.moneys; i++) {
-      let x = this.position.x - this.width * 0.5 + i * cellWidth;
+      let cellX = box.x + 4 + i * cellWidth;
-      let y = this.position.y + this.height * 0.5 + 30;
+      rect(cellX, box.y+2, cellWidth-1, 8);
-      rect(x + cellWidth * 0.1, y, cellWidth*0.8, 10);
     }
   }
 

public/util.js

@@ -22,6 +22,10 @@ function outOfBounds() {
 function bounds() {
   let halfWidth = this.width * 0.5;
   let halfHeight = this.height * 0.5;
+  if (this.hitbox) {
+    halfWidth = this.hitbox.width * 0.5;
+    halfHeight = this.hitbox.height * 0.5;
+  }
 
   return {
     min: {

public/zombie.js

@@ -13,6 +13,10 @@ class Zombie {
     this.alive = true;
     this.height = 64;
     this.width = 64;
+    this.hitbox = {
+      width: this.width * 0.6,
+      height: this.height * 0.6,
+    };
   }
 
   update() {
@@ -22,8 +26,16 @@ class Zombie {
   }
 
   draw() {
+    let half = {
+      width: this.width * 0.5,
+      height: this.height * 0.5,
+    };
+    let corner = {
+      x: this.position.x - half.width,
+      y: this.position.y - half.height,
+    };
     tint(Colors.DarkGreen);
-    image(this.image, this.position.x - 32, this.position.y - 32, 64, 64);
+    image(this.image, corner.x, corner.y, this.width, this.height);
     
     if (debug) {
       strokeWeight(4);
@@ -31,7 +43,10 @@ class Zombie {
       point(this.position.x, this.position.y);
       strokeWeight(1);
       noFill();
-      rect(this.position.x - 32, this.position.y - 32, 64, 64);
+      rect(this.position.x - this.hitbox.width * 0.5,
+        this.position.y - this.hitbox.height * 0.5,
+        this.hitbox.width,
+        this.hitbox.height);
     }
   }