Made a GameLoop helper module to make game class cleaner

example/public/javascripts/accumulator.js

@@ -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
-    };
-
-}) ();

example/public/javascripts/game.js

@@ -1,10 +1,5 @@
 $(function () {
-    var canvas = document.getElementById('gameCanvas'), 
+    var canvas = document.getElementById('gameCanvas'), ctxCanvas = canvas.getContext('2d'), keyboard = new THREEx.KeyboardState();
-        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); };
-        })();
 
     GarageServerIO.initializeGarageServer('http://garageserver_io.jbillmann.c9.io', { 
         logging: true,
@@ -18,22 +13,12 @@ $(function () {
     });
     GarageServerIO.setPlayerState({ x: 0, y: 0 });
 
-    Accumulator.reset();
+    GameLoop.start(
-    render();
+        //Render Loop
+        function () {
+            ctxCanvas.clearRect(0, 0, canvas.width, canvas.height);
 
-    function render () {
+            GarageServerIO.getStates(function (selfState, playerStates, entityStates) {
-        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) {
             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);
-        });
+            });
-    }
+        },
-    
+        //Update Loop
-    function captureInput () {
+        function () {
-        if (keyboard.pressed('left')) {
+            if (keyboard.pressed('left')) {
-            GarageServerIO.addPlayerInput('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');
-        }
-    }
 });

example/public/javascripts/gameloop.js

@@ -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);

example/views/layout.jade

@@ -7,7 +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='/javascripts/gameloop.js')
     script(src='core.js')
     script(src='/javascripts/game.js')
   body