Refactoring out physics loop on client for #17

example/public/javascripts/game.js

@@ -2,7 +2,9 @@ $(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); };
-        })();
+        })(),
+        currentTime = new Date().getTime(),
+        accumulator = 0.0;
 
     GarageServerIO.initializeGarageServer('http://garageserver_io.jbillmann.c9.io', { 
         logging: true,
@@ -12,8 +14,27 @@ $(function () {
             interpolationState.x = (previousState.x + amount * (targetState.x - previousState.x));
             interpolationState.y = (previousState.y + amount * (targetState.y - previousState.y));
             return interpolationState;
-        },
-        onUpdate: function () {
+        }
+    });
+    GarageServerIO.setPlayerState({ x: 0, y: 0 });
+
+    render();
+
+    function render () {
+        requestAnimFrame(render);
+
+        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)
+        {
             if (keyboard.pressed('left')) {
                 GarageServerIO.addPlayerInput('left');
             }
@@ -26,17 +47,8 @@ $(function () {
             if (keyboard.pressed('up')) {
                 GarageServerIO.addPlayerInput('up');
             }
+            accumulator -= 15;
         }
-    });
-
-    GarageServerIO.start();
-    GarageServerIO.setPlayerState({ x: 0, y: 0 });
-    render();
-
-    function render () {
-        requestAnimFrame(render);
-
-        ctxCanvas.clearRect(0, 0, canvas.width, canvas.height);
 
         GarageServerIO.getStates(function (selfState, playerStates, entityStates) {