diff --git a/example/public/javascripts/accumulator.js b/example/public/javascripts/accumulator.js new file mode 100644 index 0000000..da9b2c1 --- /dev/null +++ b/example/public/javascripts/accumulator.js @@ -0,0 +1,34 @@ +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 + }; + +}) (); \ No newline at end of file diff --git a/example/public/javascripts/game.js b/example/public/javascripts/game.js index 4d7f472..1023cf6 100644 --- a/example/public/javascripts/game.js +++ b/example/public/javascripts/game.js @@ -1,10 +1,10 @@ $(function () { - var canvas = document.getElementById('gameCanvas'), ctxCanvas = canvas.getContext('2d'), keyboard = new THREEx.KeyboardState(), + 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); }; - })(), - currentTime = new Date().getTime(), - accumulator = 0.0; + })(); GarageServerIO.initializeGarageServer('http://garageserver_io.jbillmann.c9.io', { logging: true, @@ -18,6 +18,7 @@ $(function () { }); GarageServerIO.setPlayerState({ x: 0, y: 0 }); + Accumulator.reset(); render(); function render () { @@ -25,33 +26,14 @@ $(function () { ctxCanvas.clearRect(0, 0, canvas.width, canvas.height); - var newTime = new Date().getTime(), frameTime = newTime - currentTime; - if (frameTime > 250) { - frameTime = 250; - } - - currentTime = newTime; - accumulator += frameTime; - - while (accumulator >= 15) + Accumulator.tick(); + while (Accumulator.time() >= 15) { - 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'); - } - accumulator -= 15; + captureInput(); + Accumulator.reduceTime(15); } GarageServerIO.getStates(function (selfState, playerStates, entityStates) { - playerStates.forEach(function (player) { ctxCanvas.fillRect(player.currentState.x, player.currentState.y, 15, 15); }); @@ -63,4 +45,19 @@ $(function () { ctxCanvas.fillRect(selfState.x, selfState.y, 15, 15); }); } + + function captureInput () { + 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'); + } + } }); \ No newline at end of file diff --git a/example/views/layout.jade b/example/views/layout.jade index 1c149a9..fdd1f7f 100644 --- a/example/views/layout.jade +++ b/example/views/layout.jade @@ -7,6 +7,7 @@ html script(src='/garageserver.io.js') script(src='/javascripts/jquery-2.0.0.min.js') script(src='/javascripts/keyboard.min.js') + script(src='/javascripts/accumulator.js') script(src='core.js') script(src='/javascripts/game.js') body