add ship rendering and damping
Before Width: | Height: | Size: 390 B After Width: | Height: | Size: 355 B |
Before Width: | Height: | Size: 148 B After Width: | Height: | Size: 154 B |
Before Width: | Height: | Size: 151 B After Width: | Height: | Size: 156 B |
Before Width: | Height: | Size: 133 B After Width: | Height: | Size: 126 B |
Before Width: | Height: | Size: 124 B After Width: | Height: | Size: 122 B |
Before Width: | Height: | Size: 125 B After Width: | Height: | Size: 124 B |
Before Width: | Height: | Size: 123 B After Width: | Height: | Size: 121 B |
Before Width: | Height: | Size: 141 B After Width: | Height: | Size: 127 B |
Before Width: | Height: | Size: 151 B After Width: | Height: | Size: 144 B |
Before Width: | Height: | Size: 181 B After Width: | Height: | Size: 167 B |
Before Width: | Height: | Size: 197 B After Width: | Height: | Size: 179 B |
Before Width: | Height: | Size: 212 B After Width: | Height: | Size: 210 B |
Before Width: | Height: | Size: 208 B After Width: | Height: | Size: 219 B |
35
public/js/starbugs/assets.js
Normal file
|
@ -0,0 +1,35 @@
|
||||||
|
function loadAssets() {
|
||||||
|
var sources = {
|
||||||
|
images: {
|
||||||
|
ships: {
|
||||||
|
'01': {
|
||||||
|
hull: 'img/ships/01/hull.png',
|
||||||
|
teama: 'img/ships/01/teama.png',
|
||||||
|
teamb: 'img/ships/01/teamb.png',
|
||||||
|
thrust0: 'img/ships/01/thrust0.png',
|
||||||
|
thrust5: 'img/ships/01/thrust5.png',
|
||||||
|
thrust8: 'img/ships/01/thrust8.png'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var result = {};
|
||||||
|
|
||||||
|
// Magical recursive magic.
|
||||||
|
(function r(o, t) {
|
||||||
|
for (var i in o) {
|
||||||
|
console.log(i);
|
||||||
|
if (typeof o[i] == 'string') {
|
||||||
|
t[i] = new Image();
|
||||||
|
t[i].src = o[i];
|
||||||
|
} else {
|
||||||
|
t[i] = {};
|
||||||
|
r(o[i], t[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
t = o;
|
||||||
|
})(sources, result);
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}
|
|
@ -15,6 +15,8 @@ function init() {
|
||||||
function Game() {
|
function Game() {
|
||||||
var self = this;
|
var self = this;
|
||||||
|
|
||||||
|
this.assets = loadAssets();
|
||||||
|
|
||||||
this.connected = false;
|
this.connected = false;
|
||||||
this.state = 'connecting';
|
this.state = 'connecting';
|
||||||
|
|
||||||
|
|
|
@ -19,6 +19,7 @@ function Net() {
|
||||||
});
|
});
|
||||||
|
|
||||||
this.socket.on('world', function(data) {
|
this.socket.on('world', function(data) {
|
||||||
|
game.world.clear();
|
||||||
game.world.playerShipId = data;
|
game.world.playerShipId = data;
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
|
@ -43,7 +43,11 @@ function Renderer() {
|
||||||
for (var id in game.world.bodies) {
|
for (var id in game.world.bodies) {
|
||||||
var body = game.world.bodies[id];
|
var body = game.world.bodies[id];
|
||||||
|
|
||||||
pallet.rect('#338', body.x, body.y, 10, 10);
|
if (body.bodyType == 'ship') {
|
||||||
|
renderShip(pallet, body);
|
||||||
|
} else {
|
||||||
|
pallet.rect('#338', body.x, body.y, 10, 10);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
context.restore();
|
context.restore();
|
||||||
|
|
|
@ -1,3 +1,11 @@
|
||||||
function RenderShip(ship) {
|
function renderShip(pallet, ship) {
|
||||||
|
var img = game.assets.images.ships[ship.hull].hull;
|
||||||
|
var col = game.assets.images.ships[ship.hull].teamb;
|
||||||
|
var thr0 = game.assets.images.ships[ship.hull].thrust0;
|
||||||
|
var thr5 = game.assets.images.ships[ship.hull].thrust5;
|
||||||
|
var thr8 = game.assets.images.ships[ship.hull].thrust8;
|
||||||
|
//pallet.view(ship.x, ship.y, false, ship.r);
|
||||||
|
pallet.image(col, ship.x, ship.y, ship.r);
|
||||||
|
pallet.image(img, ship.x, ship.y, ship.r);
|
||||||
|
pallet.image(ship.move[0] ? thr8 : thr0, ship.x, ship.y, ship.r);
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,8 +2,11 @@ function Ship(id) {
|
||||||
this.id = id;
|
this.id = id;
|
||||||
this.x = 0;
|
this.x = 0;
|
||||||
this.y = 0;
|
this.y = 0;
|
||||||
|
this.r = 0;
|
||||||
|
this.hull = '01';
|
||||||
this.move = [];
|
this.move = [];
|
||||||
this.lastMove = [];
|
this.lastMove = [];
|
||||||
|
this.bodyType = 'ship';
|
||||||
|
|
||||||
this.updateMove = function() {
|
this.updateMove = function() {
|
||||||
if (JSON.stringify(this.move) != JSON.stringify(this.lastMove) || true) {
|
if (JSON.stringify(this.move) != JSON.stringify(this.lastMove) || true) {
|
||||||
|
|
|
@ -3,6 +3,11 @@ function World() {
|
||||||
this.playerShip = false;
|
this.playerShip = false;
|
||||||
this.playerShipId = false;
|
this.playerShipId = false;
|
||||||
|
|
||||||
|
this.clear = function() {
|
||||||
|
this.bodies = {};
|
||||||
|
this.playerShip = false;
|
||||||
|
}
|
||||||
|
|
||||||
this.update = function(data) {
|
this.update = function(data) {
|
||||||
this.playerShip = this.bodies[this.playerShipId];
|
this.playerShip = this.bodies[this.playerShipId];
|
||||||
|
|
||||||
|
|
|
@ -25,6 +25,8 @@ class Physics {
|
||||||
bodyDef.active = true;
|
bodyDef.active = true;
|
||||||
bodyDef.linearVelocity = new b2Vec2(body.xvel / s || 0, body.yvel / s || 0);
|
bodyDef.linearVelocity = new b2Vec2(body.xvel / s || 0, body.yvel / s || 0);
|
||||||
bodyDef.angularVelocity = body.rvel || 0;
|
bodyDef.angularVelocity = body.rvel || 0;
|
||||||
|
bodyDef.linearDamping = 0.001;
|
||||||
|
bodyDef.angularDamping = 0.001;
|
||||||
bodyDef.type = body.type == 'static' ?
|
bodyDef.type = body.type == 'static' ?
|
||||||
Box2D.b2BodyType.b2_staticBody : Box2D.b2BodyType.b2_dynamicBody;
|
Box2D.b2BodyType.b2_staticBody : Box2D.b2BodyType.b2_dynamicBody;
|
||||||
if (body.player) bodyDef.allowSleep = false;
|
if (body.player) bodyDef.allowSleep = false;
|
||||||
|
|
|
@ -22,18 +22,18 @@ class Ship extends Body {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (data.forward) {
|
if (data.forward) {
|
||||||
let power = 0.02;
|
let power = 0.05;
|
||||||
let x = Math.cos(this.b2body.GetAngleRadians()) * power;
|
let x = Math.cos(this.b2body.GetAngleRadians()) * power;
|
||||||
let y = Math.sin(this.b2body.GetAngleRadians()) * power;
|
let y = Math.sin(this.b2body.GetAngleRadians()) * power;
|
||||||
this.applyForce(x, y);
|
this.applyForce(x, y);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (data.left) {
|
if (data.left) {
|
||||||
this.applyTorque(-0.02);
|
this.applyTorque(-0.0001);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (data.right) {
|
if (data.right) {
|
||||||
this.applyTorque(0.02);
|
this.applyTorque(0.0001);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|