Made a GameLoop helper module to make game class cleaner

This commit is contained in:
Jeremiah Billmann
2013-07-09 21:23:48 -04:00
parent 7b7021bf09
commit a31865142c
4 changed files with 57 additions and 72 deletions
-34
View File
@@ -1,34 +0,0 @@
var Accumulator = (function () {
var _currentTime = new Date().getTime(),
_accumulator = 0.0,
reset = function () {
_currentTime = new Date().getTime();
_accumulator = 0.0;
},
tick = function () {
var newTime = new Date().getTime(), frameTime = newTime - _currentTime;
if (frameTime > 250) {
frameTime = 250;
}
_currentTime = newTime;
_accumulator += frameTime;
},
time = function () {
return _accumulator;
},
reduceTime = function (time) {
_accumulator -= time;
};
return {
tick: tick,
reset: reset,
time: time,
reduceTime: reduceTime
};
}) ();
+23 -37
View File
@@ -1,10 +1,5 @@
$(function () {
var canvas = document.getElementById('gameCanvas'),
ctxCanvas = canvas.getContext('2d'),
keyboard = new THREEx.KeyboardState(),
requestAnimFrame = (function () {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000/60); };
})();
var canvas = document.getElementById('gameCanvas'), ctxCanvas = canvas.getContext('2d'), keyboard = new THREEx.KeyboardState();
GarageServerIO.initializeGarageServer('http://garageserver_io.jbillmann.c9.io', {
logging: true,
@@ -18,22 +13,12 @@ $(function () {
});
GarageServerIO.setPlayerState({ x: 0, y: 0 });
Accumulator.reset();
render();
GameLoop.start(
//Render Loop
function () {
ctxCanvas.clearRect(0, 0, canvas.width, canvas.height);
function render () {
requestAnimFrame(render);
ctxCanvas.clearRect(0, 0, canvas.width, canvas.height);
Accumulator.tick();
while (Accumulator.time() >= 15)
{
captureInput();
Accumulator.reduceTime(15);
}
GarageServerIO.getStates(function (selfState, playerStates, entityStates) {
GarageServerIO.getStates(function (selfState, playerStates, entityStates) {
playerStates.forEach(function (player) {
ctxCanvas.fillRect(player.currentState.x, player.currentState.y, 15, 15);
});
@@ -43,21 +28,22 @@ $(function () {
});
ctxCanvas.fillRect(selfState.x, selfState.y, 15, 15);
});
}
function captureInput () {
if (keyboard.pressed('left')) {
GarageServerIO.addPlayerInput('left');
});
},
//Update Loop
function () {
if (keyboard.pressed('left')) {
GarageServerIO.addPlayerInput('left');
}
if (keyboard.pressed('right')) {
GarageServerIO.addPlayerInput('right');
}
if (keyboard.pressed('down')) {
GarageServerIO.addPlayerInput('down');
}
if (keyboard.pressed('up')) {
GarageServerIO.addPlayerInput('up');
}
}
if (keyboard.pressed('right')) {
GarageServerIO.addPlayerInput('right');
}
if (keyboard.pressed('down')) {
GarageServerIO.addPlayerInput('down');
}
if (keyboard.pressed('up')) {
GarageServerIO.addPlayerInput('up');
}
}
);
});
+33
View File
@@ -0,0 +1,33 @@
window.GameLoop = (function (window) {
var requestAnimFrame = (function () {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000/60); };
})(),
_currentTime = new Date().getTime(),
_accumulator = 0.0,
start = function (renderCallback, updateCallback) {
loop();
function loop () {
requestAnimFrame(loop);
var newTime = new Date().getTime(), frameTime = newTime - _currentTime;
if (frameTime > 250) {
frameTime = 250;
}
_currentTime = newTime;
_accumulator += frameTime;
while (_accumulator >= 15) {
updateCallback();
_accumulator -= 15;
}
renderCallback();
}
};
return {
start: start
};
}) (window);