wassname/GarageServer.IO
1
0
Fork 0
mirror of https://github.com/wassname/GarageServer.IO.git synced 2026-06-27 16:10:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

Jazzing up the example

Browse Source
This commit is contained in:
Jeremiah Billmann
2013-08-02 00:49:49 -04:00
parent 08250ad65d
commit 881f0bc335
4 changed files with 37 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/game.js
+3 -2
View File
@@ -7,14 +7,15 @@ function Game (sockets) {
this.physicsInterval = 15;
this.physicsDelta = this.physicsInterval / 1000;
this.physicsIntervalId = 0;
this.worldState = { height: 400, width: 800, playerSize: 15, entitySize: 5 };
this.worldState = { playerSize: 40, entitySize: 15 };
this.server = garageServer.createGarageServer(sockets,
{
logging: true,
interpolation: true,
clientSidePrediction: true,
worldState: this.worldState
worldState: this.worldState,
smoothingFactor: 0.2
});
}
example/public/javascripts/game.js
+9 -3
View File
@@ -5,25 +5,31 @@ $(function () {
var canvas = document.getElementById('gameCanvas'), ctxCanvas = canvas.getContext('2d'), keyboard = new THREEx.KeyboardState(),
playerSize = 0, entitySize = 0;
window.addEventListener('resize', resizeCanvas, false);
GarageServerIO.initializeGarageServer('http://garageserver_io.jbillmann.c9.io', {
logging: true,
onReady: startGame,
onUpdatePlayerPrediction: GamePhysics.getNewPlayerState,
onInterpolation: GamePhysics.getInterpolatedState,
onWorldState: function (state) {
document.getElementById('gameCanvas').style.width = state.width + 'px';
document.getElementById('gameCanvas').style.height = state.height + 'px';
playerSize = state.playerSize;
entitySize = state.entitySize;
}
});
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resizeCanvas();
function startGame() {
GameLoop.start(
//Render Loop
function () {
ctxCanvas.clearRect(0, 0, canvas.width, canvas.height);
ctxCanvas.fillStyle = 'white';
var playerStates = GarageServerIO.getPlayerStates(),
entityStates = GarageServerIO.getEntityStates();
playerStates.forEach(function (player) {
example/public/stylesheets/style.css
+17 -12
View File
@@ -1,16 +1,21 @@
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
}
body {
background-color: #001429;
}
#gameCanvas {
outline: 1px solid black;
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
background-color: #001429;
background: -webkit-gradient(linear, left top, left bottom, from(#000306), to(#001429));
background: -moz-linear-gradient(top, #000306 0%, #001429 100%);
display: block;
}
#fps {
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
width: 800px;
}
example/shared/core.js
+8 -8
View File
@@ -10,16 +10,16 @@
}
for (i = 0; i < inputs.length; i ++) {
if (inputs[i].input === 'left') {
state.x -= (50 * deltaTime);
state.x -= (125 * deltaTime);
state.direction = 'left';
} else if (inputs[i].input === 'right') {
state.x += (50 * deltaTime);
state.x += (125 * deltaTime);
state.direction = 'right';
} else if (inputs[i].input === 'down') {
state.y += (50 * deltaTime);
state.y += (125 * deltaTime);
state.direction = 'down';
} else if (inputs[i].input === 'up') {
state.y -= (50 * deltaTime);
state.y -= (125 * deltaTime);
state.direction = 'up';
} else if (inputs[i].input === 'space') {
if (garageServer) {
@@ -34,13 +34,13 @@
exports.getNewEntityState = function (state, deltaTime) {
if (state.direction === 'left') {
state.x -= (100 * deltaTime);
state.x -= (300 * deltaTime);
} else if (state.direction === 'right') {
state.x += (100 * deltaTime);
state.x += (300 * deltaTime);
} else if (state.direction === 'down') {
state.y += (100 * deltaTime);
state.y += (300 * deltaTime);
} else if (state.direction === 'up') {
state.y -= (100 * deltaTime);
state.y -= (300 * deltaTime);
}
return state;