it's a zombie game now

public/bank.js

@@ -0,0 +1,15 @@
+class Bank {
+  constructor() {
+
+  }
+
+  draw(x, y, w, h) {
+    tint(Colors.Purple);
+    let purple = color(Colors.Purple);
+    noFill();
+    stroke(purple);
+    strokeWeight(2);
+    rect(x, y, w, h);
+    image(Images.bank, x, y, w, h);
+  }
+}

public/frame.js

@@ -1,19 +0,0 @@
-// Frame represents an embroidery frame
-class Frame {
-  constructor(options) {
-    this.x = options.x;
-    this.y = options.y;
-    this.width = options.width;
-    this.height = options.height;
-  }
-
-  draw() {
-    stroke(Colors.DarkTan);
-    strokeWeight(4);
-    fill(Colors.Tan);
-    rectMode(CORNERS);
-    rect(this.x, this.y, this.width, this.height);
-  }
-
-
-}

public/game.js

@@ -0,0 +1,116 @@
+class Game {
+  constructor (w, h) {
+    this.w          = w;
+    this.h          = h;
+    this.players	  = {};
+    this.numPlayers	= 0;
+    this.id         = 0;
+    this.colliders	= new Group();
+    this.spawner    = new ZombieSpawner({
+      game: this,
+      minX: 0,
+      maxX: w,
+      minY: 0,
+      maxY: 100,
+    });
+    this.zombies    = [];
+    this.store      = new Store();
+    this.bank       = new Bank();
+  }
+
+  add (id, x, y, w, h) {
+    this.players[id] = createSprite(x, y, w, h);
+    this.players[id].id = "p"+this.id;
+    this.players[id].setCollider("rectangle", 0, 0, w, h);
+    this.players[id].color = color(255, 255, 255);
+    this.players[id].shapeColor = color(255, 255, 255);
+    this.players[id].scale = 1;
+    this.players[id].mass = 1;
+    this.colliders.add(this.players[id]);
+    print(this.players[id].id + " added.");
+    this.id++;
+    this.numPlayers++;
+  }
+
+  update() {
+    this.checkBounds();
+    this.zombies.forEach(z => z.update());
+    this.zombies = this.zombies.filter(z => !z.isDead());
+  }
+
+  draw() {
+    this.update();
+    this.bank.draw(width*0.25 - 64, height - 128 - 32, 128, 128);
+    this.store.draw(width*0.75 - 64, height - 128 - 32, 128, 128);
+    this.zombies.forEach(z => z.draw());
+    drawSprites();
+  }
+
+  setColor (id, r, g, b) {
+    this.players[id].color = color(r, g, b);
+    this.players[id].shapeColor = color(r, g, b);
+
+    print(this.players[id].id + " color added.");
+  }
+
+  remove (id) {
+      this.colliders.remove(this.players[id]);
+      this.players[id].remove();
+      delete this.players[id];
+      this.numPlayers--;
+  }
+
+  checkId (id) {
+      if (id in this.players) { return true; }
+      else { return false; }
+  }
+
+  printPlayerIds (x, y) {
+      push();
+          noStroke();
+          fill(Colors.Eggplant);
+          textSize(16);
+          text("# players: " + this.numPlayers, x, y);
+
+          y = y + 16;
+          fill(Colors.Eggplant);
+          for (let id in this.players) {
+              text(this.players[id].id, x, y);
+              y += 16;
+          }
+
+      pop();
+  }
+
+  setVelocity(id, velx, vely) {
+      this.players[id].velocity.x = velx;
+      this.players[id].velocity.y = vely;
+  }
+
+  checkBounds() {
+      for (let id in this.players) {
+
+          if (this.players[id].position.x < 0) {
+              this.players[id].position.x = this.w - 1;
+          }
+
+          if (this.players[id].position.x > this.w) {
+              this.players[id].position.x = 1;
+          }
+
+          if (this.players[id].position.y < 0) {
+              this.players[id].position.y = this.h - 1;
+          }
+
+          if (this.players[id].position.y > this.h) {
+              this.players[id].position.y = 1;
+          }
+      }
+  }
+
+  addZombie(zombie) {
+    console.log(["adding zombie", zombie]);
+    this.zombies.push(zombie);
+  }
+}
+

public/host.html

@@ -15,7 +15,11 @@
     <!-- p5.multiplayer-->
     <script src="lib/p5.multiplayer.js"></script>
     <!-- p5 sketch -->
-    <script src="frame.js"></script>
+    <script src="images.js"></script>
+    <script src="store.js"></script>
+    <script src="bank.js"></script>
+    <script src="zombie.js"></script>
+    <script src="game.js"></script>
     <script src="host.js"></script>
     <style> body {padding: 0; margin: 0;} </style>
   </head>

public/host.js

@@ -30,6 +30,7 @@ let game;
 
 function preload() {
   setupHost();
+  Images.loadAll();
 }
 
 function setup () {
@@ -47,7 +48,7 @@ function windowResized() {
 }
 
 function draw () {
-  background(255);
+  background(Colors.Sky);
 
   if(isHostConnected(display=true)) {
     // Host/Game draw here. --->
@@ -142,107 +143,3 @@ function processButton (data) {
                 data.button);
   }
 }
-
-////////////
-// Game
-// This simple placeholder game makes use of p5.play
-class Game {
-  constructor (w, h) {
-    this.w          = w;
-    this.h          = h;
-    this.players	= {};
-    this.numPlayers	= 0;
-    this.id         = 0;
-    this.colliders	= new Group();
-    this.frames = [
-      new Frame({
-        x: 100,
-        y: 100,
-        width: 200,
-        height: 200
-      })
-    ];
-  }
-
-  add (id, x, y, w, h) {
-    this.players[id] = createSprite(x, y, w, h);
-    this.players[id].id = "p"+this.id;
-    this.players[id].setCollider("rectangle", 0, 0, w, h);
-    this.players[id].color = color(255, 255, 255);
-    this.players[id].shapeColor = color(255, 255, 255);
-    this.players[id].scale = 1;
-    this.players[id].mass = 1;
-    this.colliders.add(this.players[id]);
-    print(this.players[id].id + " added.");
-    this.id++;
-    this.numPlayers++;
-  }
-
-  draw() {
-    this.frames.forEach(f => f.draw());
-    this.checkBounds();
-    drawSprites();
-  }
-
-  setColor (id, r, g, b) {
-    this.players[id].color = color(r, g, b);
-    this.players[id].shapeColor = color(r, g, b);
-
-    print(this.players[id].id + " color added.");
-  }
-
-  remove (id) {
-      this.colliders.remove(this.players[id]);
-      this.players[id].remove();
-      delete this.players[id];
-      this.numPlayers--;
-  }
-
-  checkId (id) {
-      if (id in this.players) { return true; }
-      else { return false; }
-  }
-
-  printPlayerIds (x, y) {
-      push();
-          noStroke();
-          fill(Colors.Blackish);
-          textSize(16);
-          text("# players: " + this.numPlayers, x, y);
-
-          y = y + 16;
-          fill(Colors.Blackish);
-          for (let id in this.players) {
-              text(this.players[id].id, x, y);
-              y += 16;
-          }
-
-      pop();
-  }
-
-  setVelocity(id, velx, vely) {
-      this.players[id].velocity.x = velx;
-      this.players[id].velocity.y = vely;
-  }
-
-  checkBounds() {
-      for (let id in this.players) {
-
-          if (this.players[id].position.x < 0) {
-              this.players[id].position.x = this.w - 1;
-          }
-
-          if (this.players[id].position.x > this.w) {
-              this.players[id].position.x = 1;
-          }
-
-          if (this.players[id].position.y < 0) {
-              this.players[id].position.y = this.h - 1;
-          }
-
-          if (this.players[id].position.y > this.h) {
-              this.players[id].position.y = 1;
-          }
-      }
-  }
-}

public/images.js

@@ -0,0 +1,72 @@
+const Images = {
+  loadAll() {
+    this.zombies = [
+      loadImage("images/noun_Zombie_1304637.png"),
+      loadImage("images/noun_Zombie_1304638.png"),
+      loadImage("images/noun_Zombie_1304639.png"),
+      loadImage("images/noun_Zombie_1304640.png"),
+      loadImage("images/noun_Zombie_1304641.png"),
+      loadImage("images/noun_Zombie_1304645.png"),
+      loadImage("images/noun_Zombie_1322609.png"),
+      loadImage("images/noun_Zombie_1322610.png"),
+      loadImage("images/noun_Zombie_1322611.png"),
+      loadImage("images/noun_Zombie_1322612.png"),
+      loadImage("images/noun_Zombie_1322613.png"),
+      loadImage("images/noun_Zombie_1322614.png"),
+      loadImage("images/noun_Zombie_1322615.png"),
+      loadImage("images/noun_Zombie_1322616.png"),
+      loadImage("images/noun_Zombie_1322617.png"),
+      loadImage("images/noun_Zombie_1322618.png"),
+      loadImage("images/noun_Zombie_1322619.png"),
+      loadImage("images/noun_Zombie_1322620.png"),
+      loadImage("images/noun_Zombie_1322621.png"),
+      loadImage("images/noun_Zombie_1322622.png"),
+      loadImage("images/noun_Zombie_1322623.png"),
+      loadImage("images/noun_Zombie_1322624.png"),
+      loadImage("images/noun_Zombie_1322625.png"),
+      loadImage("images/noun_Zombie_1322626.png"),
+      loadImage("images/noun_Zombie_1322627.png"),
+      loadImage("images/noun_Zombie_1322628.png"),
+      loadImage("images/noun_Zombie_1322629.png"),
+      loadImage("images/noun_Zombie_1322630.png"),
+      loadImage("images/noun_Zombie_1322631.png"),
+      loadImage("images/noun_Zombie_1322632.png"),
+      loadImage("images/noun_Zombie_1322633.png"),
+      loadImage("images/noun_Zombie_1322634.png"),
+      loadImage("images/noun_Zombie_1322635.png"),
+      loadImage("images/noun_Zombie_1322636.png"),
+      loadImage("images/noun_Zombie_1322637.png"),
+      loadImage("images/noun_Zombie_1322638.png"),
+      loadImage("images/noun_Zombie_1322639.png"),
+      loadImage("images/noun_Zombie_1322640.png"),
+      loadImage("images/noun_Zombie_1322641.png"),
+      loadImage("images/noun_Zombie_1322642.png"),
+      loadImage("images/noun_Zombie_1322643.png"),
+      loadImage("images/noun_Zombie_1322644.png")
+    ];
+    this.playerAvatars = [
+      loadImage("images/noun_Baby_851140.png"),
+      loadImage("images/noun_Bear_812815.png"),
+      loadImage("images/noun_cool_925419.png"),
+      loadImage("images/noun_cool_925435.png"),
+      loadImage("images/noun_evil_925412.png"),
+      loadImage("images/noun_evil_925432.png"),
+      loadImage("images/noun_girl_922146.png"),
+      loadImage("images/noun_Happy_925423.png"),
+      loadImage("images/noun_joy_925443.png"),
+      loadImage("images/noun_joyful_925420.png"),
+      loadImage("images/noun_joyful_925439.png"),
+      loadImage("images/noun_Lady_922143.png"),
+      loadImage("images/noun_Man_922145.png"),
+      loadImage("images/noun_Man_922164.png"),
+      loadImage("images/noun_monkey_face.png"),
+      loadImage("images/noun_Robot_835621.png"),
+      loadImage("images/noun_teddy_bear.png")
+    ];
+    this.bank = loadImage("images/noun_Bank_873947.png");
+    this.burger = loadImage("images/noun_cheeseburger_940494.png");
+    this.crown = loadImage("images/noun_Crown_801129.png");
+    this.cash = loadImage("images/noun_money_bag.png");
+    this.restaurant = loadImage("images/noun_restaurant.png");
+  }
+}

public/lib/p5.multiplayer.js

@@ -1,9 +1,9 @@
 const Colors = {
-  Tan: "#D8BDB3",
+  Eggplant: "#26011C",
-  DarkTan: "#A58072",
+  Purple: "#59024B",
-  Blackish: "#262523",
+  Sky: "#05F2DB",
-  Blood: "#8C021C",
+  DarkGreen: "#038C33",
-  Rust: "#590910",
+  LightGreen: "#84D930",
 };
 
 ////////////
@@ -91,10 +91,10 @@ function onHostConnect (data) {
 // Displays server address in lower left of screen
 function displayAddress() {
   push();
-    fill(Colors.Blackish);
+    fill(Colors.Eggplant);
     noStroke();
     textSize(50);
-    text(serverIp+"/?="+roomId, 10, height-50);
+    text(serverIp+"/?="+roomId, 10, 50);
   pop();
 }
 

public/store.js

@@ -0,0 +1,15 @@
+class Store {
+  constructor() {
+
+  }
+
+  draw(x, y, w, h) {
+    tint(Colors.Purple);
+    let purple = color(Colors.Purple);
+    noFill();
+    stroke(purple);
+    strokeWeight(2);
+    rect(x, y, w, h);
+    image(Images.restaurant, x, y, w, h);
+  }
+}

public/zombie.js

@@ -0,0 +1,51 @@
+class Zombie {
+  constructor(options) {
+    options = options || {};
+    this.x = options.x;
+    this.y = options.y;
+    this.image = random(Images.zombies);
+    this.alive = true;
+  }
+
+  update() {
+    this.y += 1;
+  }
+
+  draw() {
+    tint(Colors.DarkGreen);
+    image(this.image, this.x, this.y, 64, 64);
+  }
+
+  isDead() {
+    return !this.alive || this.y > height;
+  }
+}
+
+class ZombieSpawner {
+  constructor(options) {
+    options = options || {};
+    this.game = options.game;
+    this.minT = options.minT || 500;
+    this.maxT = options.maxT || 3000;
+    this.minX = options.minX || 0;
+    this.maxX = options.maxX || 500;
+    this.minY = options.minY || 100;
+    this.maxY = options.maxY || 100;
+    this.planNextSpawn();
+  }
+
+  planNextSpawn() {
+    let t = random(this.minT, this.maxT);
+    console.log(`will add next zombie in ${t}`);
+    this.nextSpawn = setTimeout(() => this.spawnZombie(), t);
+  }
+
+  spawnZombie() {
+    let zombie = new Zombie({
+      x: random(this.minX, this.maxX),
+      y: random(this.minY, this.maxY),
+    });
+    this.game.addZombie(zombie);
+    this.planNextSpawn();
+  }
+}