burgers can hit zombies now

public/burger.js

@@ -1,20 +1,48 @@
 class Burger {
   constructor(x, y) {
-    this.sprite = createSprite(x, y, 32, 32);
-    this.sprite.velocity.y = -5;
     this.image = Images.burger;
+    this.position = {x: x, y: y};
+    this.velocity = {x: 0, y: -400};
+    this.width = 32;
+    this.height = 32;
+    this.alive = true;
   }
 
   update() {
-    // this.sprite.velocity.x = this.joyX * 10;
+    let dt = deltaTime / 1000;
-    // this.sprite.velocity.y = this.joyY * -10;
+    this.position.x += this.velocity.x * dt;
+    this.position.y += this.velocity.y * dt;
   }
 
   draw() {
+    let corner = {
+      x: this.position.x - this.width*0.5,
+      y: this.position.y - this.height*0.5
+    };
+
     tint(Colors.Purple);
-    image(this.image, this.sprite.position.x-16, this.sprite.position.y-16, 32, 32);
+    image(this.image, corner.x, corner.y, this.width, this.height);
+
+    if (debug) {
       strokeWeight(4);
       stroke('#FF0000');
-    point(this.sprite.position.x, this.sprite.position.y);
+      point(this.position.x, this.position.y);
+
+      strokeWeight(1);
+      noFill();
+      rect(corner.x, corner.y, this.width, this.height);
+    }
+  }
+
+  kill() {
+    this.alive = false;
+  }
+
+  isDead() {
+    return !this.alive || this.outOfBounds();
   }
 }
+
+Burger.prototype.bounds = bounds;
+Burger.prototype.outOfBounds = outOfBounds;
+Burger.prototype.overlaps = overlaps;

public/game.js

@@ -34,12 +34,25 @@ class Game {
   }
 
   update() {
+    this.burgers.forEach(b => b.update());
     this.zombies.forEach(z => z.update());
     for (let id in this.players) {
       let player = this.players[id];
       player.update();
     }
+
+    for (let burger of this.burgers) {
+      for (let zombie of this.zombies) {
+        if (burger.overlaps(zombie)) {
+          burger.kill();
+          zombie.kill();
+          break;
+        }
+      }
+    }
+
     this.zombies = this.zombies.filter(z => !z.isDead());
+    this.burgers = this.burgers.filter(b => !b.isDead());
   }
 
   draw() {
@@ -97,27 +110,6 @@ class Game {
     }
   }
 
-  checkBounds() {
-      for (let id in this.players) {
-
-          if (this.players[id].sprite.position.x < 0) {
-              this.players[id].sprite.position.x = this.w - 1;
-          }
-
-          if (this.players[id].sprite.position.x > this.w) {
-              this.players[id].sprite.position.x = 1;
-          }
-
-          if (this.players[id].sprite.position.y < 0) {
-              this.players[id].sprite.position.y = this.h - 1;
-          }
-
-          if (this.players[id].sprite.position.y > this.h) {
-              this.players[id].sprite.position.y = 1;
-          }
-      }
-  }
-
   addZombie(zombie) {
     this.zombies.push(zombie);
   }
@@ -125,7 +117,7 @@ class Game {
   addBurger(id) {
     let player = this.players[id];
     if (player) {
-      let burger = new Burger(player.sprite.position.x, player.sprite.position.y);
+      let burger = new Burger(player.position.x, player.position.y);
       console.log(["adding burger", burger]);
       this.burgers.push(burger);
     }

public/host.html

@@ -15,6 +15,7 @@
     <!-- p5.multiplayer-->
     <script src="lib/p5.multiplayer.js"></script>
     <!-- p5 sketch -->
+    <script src="util.js"></script>
     <script src="images.js"></script>
     <script src="burger.js"></script>
     <script src="player.js"></script>

public/host.js

@@ -74,7 +74,7 @@ function onClientConnect (data) {
     game.add(data.id,
             random(0.25*width, 0.75*width),
             random(0.25*height, 0.75*height),
-            20, 20
+            64, 64
     );
   }
 

public/player.js

@@ -4,36 +4,40 @@ class Player {
     this.game = options.game;
     this.id = options.id;
     this.image = random(Images.players);
-    this.width = options.width;
+    this.width = options.width || 64;
-    this.height = options.height;
+    this.height = options.height || 64;
     this.burgers = 5;
-
+    this.position = {x: options.x, y: options.y};
-    let sprite = createSprite(options.x, options.y, options.width, options.height);
+    this.velocity = {x: 0, y: 0};
-    sprite.addImage(this.image);
-    sprite.setCollider("rectangle", 0, 0, options.width, options.height);
-    sprite.scale = 1;
-    sprite.mass = 1;
-    this.sprite = sprite;
-    this.joyX = 0;
-    this.joyY = 0;
   }
 
   update() {
-    this.sprite.velocity.x = this.joyX * 10;
+    let dt = deltaTime / 1000;
-    this.sprite.velocity.y = this.joyY * -10;
+    this.position.x += this.velocity.x * dt;
+    this.position.y += this.velocity.y * dt;
   }
 
   draw() {
+    let corner = {
+      x: this.position.x - this.width*0.5,
+      y: this.position.y - this.height*0.5
+    };
     tint(Colors.Purple);
-    image(this.image, this.sprite.position.x, this.sprite.position.y, 64, 64);
+    image(this.image, corner.x, corner.y, this.width, this.height);
+    if (debug) {
       strokeWeight(4);
       stroke('#FF0000');
-    point(this.sprite.position.x, this.sprite.position.y);
+      point(this.position.x, this.position.y);
+
+      strokeWeight(1);
+      noFill();
+      rect(corner.x, corner.y, this.width, this.height);
+    }
   }
 
   joystickInput(x, y) {
-    this.joyX = x;
+    this.velocity.x = x * 200;
-    this.joyY = y;
+    this.velocity.y = y * -200;
   }
 
   buttonInput(val) {
@@ -48,3 +52,7 @@ class Player {
     }
   }
 }
+
+Player.prototype.bounds = bounds;
+Player.prototype.outOfBounds = outOfBounds;
+Player.prototype.overlaps = overlaps;

public/util.js

@@ -0,0 +1,63 @@
+function outOfBounds() {
+  let halfWidth = this.width * 0.5;
+  let halfHeight = this.height * 0.5;
+
+  if (this.position.x - halfWidth < 0) {
+    return true;
+  }
+
+  if (this.position.x + halfWidth > width) {
+    return true;
+  }
+
+  if (this.position.y - halfHeight > height) {
+    return true;
+  }
+
+  if (this.position.y + halfHeight < 0) {
+    return true;
+  }
+}
+
+function bounds() {
+  let halfWidth = this.width * 0.5;
+  let halfHeight = this.height * 0.5;
+
+  return {
+    min: {
+      x: this.position.x - halfWidth,
+      y: this.position.y - halfHeight,
+    },
+    max: {
+      x: this.position.x + halfHeight,
+      y: this.position.y + halfHeight,
+    },
+  };
+}
+
+function overlaps(other) {
+  let me = this.bounds();
+  let them = other.bounds();
+
+  // i'm to the right of them
+  if (me.min.x > them.max.x) {
+    return false;
+  }
+
+  // i'm to the left of them
+  if (me.max.x < them.min.x) {
+    return false;
+  }
+
+  // i'm entirely above them
+  if (me.max.y < them.min.y) {
+    return false;
+  }
+
+  // i'm entirely below them
+  if (me.min.y > them.max.y) {
+    return false;
+  }
+
+  return true;
+}

public/zombie.js

@@ -1,29 +1,53 @@
 class Zombie {
   constructor(options) {
     options = options || {};
-    this.x = options.x;
+    this.position = {
-    this.y = options.y;
+      x: options.x,
+      y: options.y
+    };
+    this.velocity = {
+      x: 0,
+      y: 16,
+    };
     this.image = random(Images.zombies);
     this.alive = true;
+    this.height = 64;
+    this.width = 64;
   }
 
   update() {
-    this.y += (deltaTime / 1000) * 16;
+    let dt = deltaTime / 1000;
+    this.position.x += this.velocity.x * dt;
+    this.position.y += this.velocity.y * dt;
   }
 
   draw() {
     tint(Colors.DarkGreen);
-    image(this.image, this.x, this.y, 64, 64);
+    image(this.image, this.position.x - 32, this.position.y - 32, 64, 64);
+    
+    if (debug) {
       strokeWeight(4);
       stroke('#FF0000');
-    point(this.x, this.y);
+      point(this.position.x, this.position.y);
+      strokeWeight(1);
+      noFill();
+      rect(this.position.x - 32, this.position.y - 32, 64, 64);
+    }
+  }
+
+  kill() {
+    this.alive = false;
   }
 
   isDead() {
-    return !this.alive || this.y > height;
+    return !this.alive || this.outOfBounds();
   }
 }
 
+Zombie.prototype.bounds = bounds;
+Zombie.prototype.outOfBounds = outOfBounds;
+Zombie.prototype.overlaps = overlaps;
+
 class ZombieSpawner {
   constructor(options) {
     options = options || {};