add basic ship movement and tracking

public/js/starbugs/net.js

@@ -17,6 +17,10 @@ function Net() {
 		this.socket.on('update', function(data) {
 			game.world.update(data);
 		});
+
+		this.socket.on('world', function(data) {
+			game.world.playerShipId = data;
+		});
 	};
 
 	this.update = function(move) {

public/js/starbugs/render/render.js

@@ -8,37 +8,48 @@ function Renderer() {
 	this.canvas = canvas;
 
 	this.render = function(state) {
+		var ship = game.world.playerShip || { x: 0, y: 0 };
+		var cx = ship.x;
+		var cy = ship.y;
+		var cw = canvas.width;
+		var ch = canvas.height;
+
 		if (state == 'connecting' || state == 'disconnected') {
 			pallet.clear();
 			pallet.fill('#111');
 			var str = state == 'connecting' ? 'Connecting' : 'Shit\'s ' +
-			'diconnected, yo!';
-			pallet.text(str, canvas.width / 2, canvas.height / 2, '#fff', 'FreePixel', 16, 'center', 'middle');
+				'diconnected, yo!';
+			pallet.text(str, canvas.width / 2, canvas.height / 2, '#fff',
+				'FreePixel', 16, 'center', 'middle');
 			return;
 		}
 
 		pallet.clear();
 		pallet.fill('#000');
 
-		this.renderGrid();
+		context.save();
+
+		context.translate(-cx + cw / 2, -cy + ch / 2);
+
+		// Grid
+		var gridx = ((cx / 50) | 0) * 50;
+		var gridy = ((cy / 50) | 0) * 50;
+		for (var x = gridx - cw / 2 - 50; x < cx + cw + 50; x += 50) {
+			for (var y = gridy - ch / 2 - 50; y < cy + ch + 50; y += 50) {
+				pallet.outline('#0a0a0a', x, y, 51, 51, 1);
+			}
+		}
 
 		for (var id in game.world.bodies) {
 			var body = game.world.bodies[id];
 
 			pallet.rect('#338', body.x, body.y, 10, 10);
 		}
+
+		context.restore();
 	}
 
 	this.renderGrid = function() {
-		var ox = (game.world.playerShip.x || 0) % 50;
-		var oy = (game.world.playerShip.y || 0) % 50;
-
-
-		for (var x = -50 + ox; x < canvas.width + 50; x += 50) {
-			for (var y = -50 + oy; y < canvas.height + 50; y += 50) {
-				pallet.outline('#0a0a0a', x, y, 51, 51, 1);
-			}
-		}
 	}
 
 	pallet.fillScreen();

public/js/starbugs/render/ships.js

@@ -0,0 +1,3 @@
+function RenderShip(ship) {
+	
+}

public/js/starbugs/world/world.js

@@ -1,12 +1,14 @@
 function World() {
 	this.bodies = {};
 	this.playerShip = false;
+	this.playerShipId = false;
 
 	this.update = function(data) {
+		this.playerShip = this.bodies[this.playerShipId];
+
 		for (var id in data) {
 			if (!this.bodies[id]) {
 				this.bodies[id] = new Ship(id);
-				this.playerShip = this.bodies[id];
 			}
 
 			var body = this.bodies[id];
@@ -14,7 +16,7 @@ function World() {
 			body.y = data[id][1];
 			body.r = data[id][2];
 
-			
+
 		}
 	}
 }

server/game/player.js

@@ -25,6 +25,10 @@ class Player {
 		});
 	}
 
+	sendWorld() {
+		this.connection.send('world', this.ship.id);
+	}
+
 	sendUpdate() {
 		if (Object.keys(this.delta).length == 0) return;
 		this.connection.send('update', this.delta);

server/game/room/index.js

@@ -20,6 +20,7 @@ class Room {
 		this.players.add(player);
 		this.setTeam(player, this.teamA.size > this.teamB.size ? 'b' : 'a');
 		this.world.addPlayer(player);
+		player.sendWorld();
 	}
 
 	remove(player) {

server/game/room/world/body.js

@@ -2,6 +2,8 @@
 
 const uuid = require('uuid');
 
+const b2Vec2 = require('box2d-html5').b2Vec2;
+
 class Body {
 	constructor(world) {
 		this.x = 0;
@@ -18,6 +20,15 @@ class Body {
 		this.world.applyDelta(this.id, this.pack());
 	}
 
+	applyForce(x, y, center) {
+		let b = this.b2body;
+		b.ApplyForce(new b2Vec2(x, y), b.GetWorldCenter());
+	}
+
+	applyTorque(f) {
+		this.b2body.ApplyTorque(f);
+	}
+
 	pack() {
 		let pos = this.b2body.GetPosition();
 		let rot = this.b2body.GetAngleRadians();

server/game/room/world/index.js

@@ -51,7 +51,7 @@ class World {
 	tick(self) {
 		self.physics.step();
 
-		if (Math.random() < 0.01) {
+		if (Math.random() < 0.1) {
 			self.bodies.forEach(body => body.applyDelta());
 		}
 	}

server/game/room/world/physics.js

@@ -4,6 +4,8 @@
 // so most changes done to it should be mirrored there to keep consistent
 // physics between client and server.
 
+const SCALE = 32;
+
 const Box2D = require('box2d-html5');
 
 const b2Vec2 = Box2D.b2Vec2;
@@ -15,15 +17,17 @@ class Physics {
 	}
 
 	createBody(body) {
+		let s = SCALE;
 		let bodyDef = new Box2D.b2BodyDef();
 		bodyDef.userData = body;
-		bodyDef.position = new b2Vec2(body.x || 0, body.y || 0);
+		bodyDef.position = new b2Vec2(body.x / s || 0, body.y / s || 0);
 		bodyDef.fixedRotation = false;
 		bodyDef.active = true;
-		bodyDef.linearVelocity = new b2Vec2(body.xvel || 0, body.yvel || 0);
+		bodyDef.linearVelocity = new b2Vec2(body.xvel / s || 0, body.yvel / s || 0);
 		bodyDef.angularVelocity = body.rvel || 0;
 		bodyDef.type = body.type == 'static' ?
-			Box2D.b2Body.b2_staticBody : Box2D.b2Body.b2_dynamicBody;
+			Box2D.b2BodyType.b2_staticBody : Box2D.b2BodyType.b2_dynamicBody;
+		if (body.player) bodyDef.allowSleep = false;
 		let b2body = this.world.CreateBody(bodyDef);
 
 		let fixtureDef = new Box2D.b2FixtureDef();
@@ -32,7 +36,7 @@ class Physics {
 		fixtureDef.restitution = 0;
 
 		for (var poly of body.structure) {
-			poly = poly.map(vertex => new b2Vec2(vertex[0], vertex[1]));
+			poly = poly.map(vertex => new b2Vec2(vertex[0] / s, vertex[1] / s));
 			fixtureDef.shape = new Box2D.b2PolygonShape();
 			fixtureDef.shape.SetAsArray(poly, poly.length);
 			b2body.CreateFixture(fixtureDef);
@@ -46,7 +50,6 @@ class Physics {
 
 		for (var i = 0; i < this.toRemove.length; i++) {
 			this.world.DestroyBody(this.toRemove[i].b2body);
-			console.log(this.world.GetBodyList());
 		}
 
 		this.toRemove = [];

server/game/room/world/ship.js

@@ -5,8 +5,6 @@ const hulls = require('./traits/hulls.json');
 
 const Body = require('./body.js');
 
-const b2Vec2 = require('box2d-html5').b2Vec2;
-
 class Ship extends Body {
 	constructor(world, player, build) {
 		super(world);
@@ -24,17 +22,18 @@ class Ship extends Body {
 		}
 
 		if (data.forward) {
-			//console.log('forward');
-			b.ApplyLinearImpulse(b2Vec2(0, 500), b.GetWorldCenter());
-			b.ApplyTorque(2000);
+			let power = 0.02;
+			let x = Math.cos(this.b2body.GetAngleRadians()) * power;
+			let y = Math.sin(this.b2body.GetAngleRadians()) * power;
+			this.applyForce(x, y);
 		}
 
 		if (data.left) {
-			b.ApplyTorque(-20);
+			this.applyTorque(-0.02);
 		}
 
 		if (data.right) {
-			b.ApplyTorque(20);
+			this.applyTorque(0.02);
 		}
 	}
 }