From 6f85d638391bcebd1c5b6705e7f23c51cdadc93f Mon Sep 17 00:00:00 2001 From: Asraelite Date: Fri, 25 Mar 2016 17:42:03 +0000 Subject: [PATCH] add stupid explosion effect --- public/js/starbugs/net.js | 20 +++++---- public/js/starbugs/render/effect.js | 62 +++++++++++++++++++++++++++ public/js/starbugs/render/particle.js | 39 +++++++++++++++++ public/js/starbugs/render/render.js | 10 +++++ server/game/room/world/missile.js | 5 +++ 5 files changed, 128 insertions(+), 8 deletions(-) create mode 100644 public/js/starbugs/render/effect.js create mode 100644 public/js/starbugs/render/particle.js diff --git a/public/js/starbugs/net.js b/public/js/starbugs/net.js index 95b580e..7c91be4 100644 --- a/public/js/starbugs/net.js +++ b/public/js/starbugs/net.js @@ -6,37 +6,41 @@ class Net { connect() { this.socket = io.connect('/'); - this.socket.on('connect', function() { + this.socket.on('connect', data => { game.connected = true; game.state = 'connected'; }); - this.socket.on('disconnect', function() { + this.socket.on('disconnect', data => { game.connected = false; game.state = 'disconnected'; }); - this.socket.on('update', function(data) { + this.socket.on('update', data => { game.world.update(data); //console.log('.'); }); - this.socket.on('world', function(data) { + this.socket.on('world', data => { game.world.clear(); game.world.bounds = data.bounds; - for (var i in data.bodies) { - game.world.add(data.bodies[i]); + for (var b of data.bodies) { + game.world.add(b); } game.world.setPlayerShip(data.playerShipId); }); - this.socket.on('create', function(data) { + this.socket.on('create', data => { game.world.add(data); }); - this.socket.on('destroy', function(data) { + this.socket.on('destroy', data => { game.world.remove(data); }); + + this.socket.on('effect', data => { + game.renderer.addEffect(data); + }); }; sendUpdate(inputs) { diff --git a/public/js/starbugs/render/effect.js b/public/js/starbugs/render/effect.js new file mode 100644 index 0000000..fc2fc05 --- /dev/null +++ b/public/js/starbugs/render/effect.js @@ -0,0 +1,62 @@ +class Effect { + constructor(data) { + for (var i in data) { + this[i] = data[i]; + } + + this.pos.x; + this.pos.y; + + this.particles = new Set(); + this.pallet = game.renderer.pallet; + + if (this.type == 'explosion') { + this.createExplosion(); + } else { + + } + } + + generateParticles(_x, _y, radius, number, colors, sizes, bhv, lf, vel) { + for (var i = 0; i < number; i++) { + let x = _x + (Math.random() - 0.5) * radius * 2; + let y = _y + (Math.random() - 0.5) * radius * 2; + let color = colors[Math.random() * colors.length | 0]; + let size = sizes[Math.random() * sizes.length | 0]; + let angle = Math.random() * Math.PI * 2; + let v = Math.random() * vel + 0.1; + let xvel = Math.cos(angle) * v + (Math.random() - 0.5); + let yvel = Math.sin(angle) * v + (Math.random() - 0.5); + let p = new Particle(this, x, y, xvel, yvel, color, size, bhv, lf); + this.particles.add(p); + } + } + + render() { + let x = this.pos.x * SCALE; + let y = this.pos.y * SCALE; + let vx = -game.world.getCenter().x; + let vy = -game.world.getCenter().y; + this.pallet.view(x + vx, y + vy, false, 0); + + this.particles.forEach(p => { + p.render(); + p.tick(); + }); + + if (this.particles.size == 0) { + game.renderer.effects.delete(this); + } + + this.pallet.restore(); + } + + // Effect generation. + + createExplosion() { + let num = this.size * this.size; + let colors = ['#f52', '#ff7']; + let b = 'sizzle'; + this.generateParticles(0, 0, 1, num, colors, [1, 2], b, 50, 3); + } +} diff --git a/public/js/starbugs/render/particle.js b/public/js/starbugs/render/particle.js new file mode 100644 index 0000000..c3b018c --- /dev/null +++ b/public/js/starbugs/render/particle.js @@ -0,0 +1,39 @@ +class Particle { + constructor(effect, x, y, xvel, yvel, color, size, behaviour, lifetime) { + this.effect = effect; + this.x = x; + this.y = y; + this.xvel = xvel || 0; + this.yvel = yvel || 0; + this.color = color || '#f00'; + this.size = size || 1; + this.behaviour = behaviour; + this.lifetime = lifetime * (1 + (Math.random() - 0.5) * 0.5) || 100; + } + + tick() { + this.x += this.xvel; + this.y += this.yvel; + + if (this.behaviour == 'sizzle') { + this.xvel *= 0.98; + this.yvel *= 0.98; + this.x += (Math.random() - 0.5) * 2; + this.y += (Math.random() - 0.5) * 2; + } + + if (this.lifetime-- <= 0) { + this.destroy(); + } + } + + render() { + let x = this.x; + let y = this.y; + this.effect.pallet.square(this.color, x, y, this.size); + } + + destroy() { + this.effect.particles.delete(this); + } +} diff --git a/public/js/starbugs/render/render.js b/public/js/starbugs/render/render.js index cbcfdcf..0b161bd 100644 --- a/public/js/starbugs/render/render.js +++ b/public/js/starbugs/render/render.js @@ -10,6 +10,8 @@ class Renderer { this.canvas = canvas; this.context = context; + this.effects = new Set(); + pallet.fillScreen(); window.addEventListener('resize', pallet.fillScreen); } @@ -71,10 +73,18 @@ class Renderer { } } + this.effects.forEach(effect => { + effect.render(); + }); + pallet.restore(); } renderGrid() { } + + addEffect(data) { + this.effects.add(new Effect(data)); + } } diff --git a/server/game/room/world/missile.js b/server/game/room/world/missile.js index 6a98963..1146456 100644 --- a/server/game/room/world/missile.js +++ b/server/game/room/world/missile.js @@ -28,6 +28,11 @@ class Missile extends Body { detonate() { this.world.explosion(this.center, 10); + this.world.room.broadcast('effect', { + type: 'explosion', + size: 10, + pos: this.center + }); this.world.removeBody(this); }