show player avatars

public/bank.js

@@ -4,8 +4,8 @@ class Bank {
   }
 
   draw(x, y, w, h) {
-    tint(Colors.Purple);
-    let purple = color(Colors.Purple);
+    tint(Colors.Eggplant);
+    let purple = color(Colors.Eggplant);
     noFill();
     stroke(purple);
     strokeWeight(2);

public/game.js

@@ -11,7 +11,7 @@ class Game {
       minX: 0,
       maxX: w,
       minY: 0,
-      maxY: 100,
+      maxY: 0,
     });
     this.zombies    = [];
     this.store      = new Store();
@@ -19,22 +19,27 @@ class Game {
   }
 
   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.");
+    let player = new Player({
+      id: id,
+      x: x,
+      y: y,
+      width: w,
+      height: h,
+    })
+    this.players[id] = player;
+    // this.colliders.add(player.sprite);
+    print(player.id + " added.");
     this.id++;
     this.numPlayers++;
   }
 
   update() {
-    this.checkBounds();
+    // this.checkBounds();
     this.zombies.forEach(z => z.update());
+    for (let id in this.players) {
+      let player = this.players[id];
+      player.update();
+    }
     this.zombies = this.zombies.filter(z => !z.isDead());
   }
 
@@ -42,20 +47,24 @@ class Game {
     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);
+    for (let id in this.players) {
+      let player = this.players[id];
+      player.draw();
+    }
     this.zombies.forEach(z => z.draw());
-    drawSprites();
+    // drawSprites();
   }
 
   setColor (id, r, g, b) {
-    this.players[id].color = color(r, g, b);
-    this.players[id].shapeColor = color(r, g, b);
+    // this.players[id].sprite.color = color(r, g, b);
+    // this.players[id].sprite.shapeColor = color(r, g, b);
 
     print(this.players[id].id + " color added.");
   }
 
   remove (id) {
-      this.colliders.remove(this.players[id]);
-      this.players[id].remove();
+      // this.colliders.remove(this.players[id].sprite);
+      // this.players[id].sprite.remove();
       delete this.players[id];
       this.numPlayers--;
   }
@@ -82,28 +91,30 @@ class Game {
       pop();
   }
 
-  setVelocity(id, velx, vely) {
-      this.players[id].velocity.x = velx;
-      this.players[id].velocity.y = vely;
+  joystickInput(id, x, y) {
+    let player = this.players[id];
+    if (player) {
+      player.joystickInput(x, y);
+    }
   }
 
   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].sprite.position.x < 0) {
+              this.players[id].sprite.position.x = this.w - 1;
           }
 
-          if (this.players[id].position.x > this.w) {
-              this.players[id].position.x = 1;
+          if (this.players[id].sprite.position.x > this.w) {
+              this.players[id].sprite.position.x = 1;
           }
 
-          if (this.players[id].position.y < 0) {
-              this.players[id].position.y = this.h - 1;
+          if (this.players[id].sprite.position.y < 0) {
+              this.players[id].sprite.position.y = this.h - 1;
           }
 
-          if (this.players[id].position.y > this.h) {
-              this.players[id].position.y = 1;
+          if (this.players[id].sprite.position.y > this.h) {
+              this.players[id].sprite.position.y = 1;
           }
       }
   }

public/host.html

@@ -16,6 +16,7 @@
     <script src="lib/p5.multiplayer.js"></script>
     <!-- p5 sketch -->
     <script src="images.js"></script>
+    <script src="player.js"></script>
     <script src="store.js"></script>
     <script src="bank.js"></script>
     <script src="zombie.js"></script>

public/host.js

@@ -125,14 +125,7 @@ function mousePressed() {
 ////////////
 // Input processing
 function processJoystick (data) {
-  
-  game.setVelocity(data.id, data.joystickX*velScale, -data.joystickY*velScale);
-
-  if (debug) {
-    console.log(data.id + ': {' +
-                data.joystickX + ',' +
-                data.joystickY + '}');
-  }
+  game.joystickInput(data.id, data.joystickX, data.joystickY);
 }
 
 function processButton (data) {

public/images.js

@@ -44,7 +44,7 @@ const Images = {
       loadImage("images/noun_Zombie_1322643.png"),
       loadImage("images/noun_Zombie_1322644.png")
     ];
-    this.playerAvatars = [
+    this.players = [
       loadImage("images/noun_Baby_851140.png"),
       loadImage("images/noun_Bear_812815.png"),
       loadImage("images/noun_cool_925419.png"),

public/player.js

@@ -0,0 +1,33 @@
+class Player {
+  constructor(options) {
+    options = options || {};
+    this.id = "p"+options.id;
+    this.image = random(Images.players);
+    this.width = options.width;
+    this.height = options.height;
+
+    let sprite = createSprite(options.x, options.y, options.width, options.height);
+    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;
+    this.sprite.velocity.y = this.joyY * -10;
+  }
+
+  draw() {
+    tint(Colors.Purple);
+    image(this.image, this.sprite.position.x, this.sprite.position.y, 64, 64);
+  }
+
+  joystickInput(x, y) {
+    this.joyX = x;
+    this.joyY = y;
+  }
+}

public/store.js

@@ -4,8 +4,8 @@ class Store {
   }
 
   draw(x, y, w, h) {
-    tint(Colors.Purple);
-    let purple = color(Colors.Purple);
+    tint(Colors.Eggplant);
+    let purple = color(Colors.Eggplant);
     noFill();
     stroke(purple);
     strokeWeight(2);

public/zombie.js

@@ -8,7 +8,7 @@ class Zombie {
   }
 
   update() {
-    this.y += 1;
+    this.y += (deltaTime / 1000) * 16;
   }
 
   draw() {