add stupid explosion effect

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) {
+			for (var b of data.bodies) {
-				game.world.add(data.bodies[i]);
+				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) {

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);
+	}
+}

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);
+	}
+}

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));
+	}
 }

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);
 	}