From ab93bd0fc9031cb85f87cfe931337a714661c62a Mon Sep 17 00:00:00 2001 From: Jordan Orelli Date: Sun, 17 Nov 2019 22:26:55 +0000 Subject: [PATCH] show player avatars --- public/bank.js | 4 +-- public/game.js | 87 +++++++++++++++++++++++++++--------------------- public/host.html | 1 + public/host.js | 9 +---- public/images.js | 2 +- public/player.js | 33 ++++++++++++++++++ public/store.js | 4 +-- public/zombie.js | 2 +- 8 files changed, 90 insertions(+), 52 deletions(-) create mode 100644 public/player.js diff --git a/public/bank.js b/public/bank.js index 91f8ffb..d379d7a 100644 --- a/public/bank.js +++ b/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); diff --git a/public/game.js b/public/game.js index 719282b..5e1de62 100644 --- a/public/game.js +++ b/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--; } @@ -67,43 +76,45 @@ class Game { 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; - } + 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; + 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; } } } diff --git a/public/host.html b/public/host.html index 2f01b75..aaba55c 100644 --- a/public/host.html +++ b/public/host.html @@ -16,6 +16,7 @@ + diff --git a/public/host.js b/public/host.js index 6eabc0a..ec79964 100644 --- a/public/host.js +++ b/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) { diff --git a/public/images.js b/public/images.js index 329f9a8..da65474 100644 --- a/public/images.js +++ b/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"), diff --git a/public/player.js b/public/player.js new file mode 100644 index 0000000..0e0070f --- /dev/null +++ b/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; + } +} diff --git a/public/store.js b/public/store.js index 822d0db..830e408 100644 --- a/public/store.js +++ b/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); diff --git a/public/zombie.js b/public/zombie.js index ece7e16..3f47c05 100644 --- a/public/zombie.js +++ b/public/zombie.js @@ -8,7 +8,7 @@ class Zombie { } update() { - this.y += 1; + this.y += (deltaTime / 1000) * 16; } draw() {