delta now propagates to all the update functions

app/sprites/aiming_guide.js

@@ -14,14 +14,14 @@
         this.fireCounter = this.options.fireRate;
     };
 
-    AimingGuide.prototype.update = function () {
+    AimingGuide.prototype.update = function (delta) {
         var graphics = this.drawing.graphics.c().ss(1).s("red");
         var y = 500;
         var x = y * Math.tan(math.degToRad(this.currentAngle));
 
         graphics.mt(0, 0).lt(-x, -y).mt(0, 0).lt(x, -y).es();
 
-        this.currentAngle -= this.options.aimSpeed;
+        this.currentAngle -= delta*this.options.aimSpeed;
         if (this.currentAngle <= this.options.minAngle) {
             this.currentAngle = this.options.minAngle;
         }

app/sprites/shell.js

@@ -15,8 +15,8 @@
     Shell.prototype.update = function (delta) {
         var graphics = this.drawing.graphics.c().ss(1).s("red");
         graphics.dc(0, 0, 1).es();
-        this.drawing.x += this.speedX;
-        this.drawing.y += this.speedY;
+        this.drawing.x += delta * this.speedX;
+        this.drawing.y += delta * this.speedY;
 
         if (!game.bbox.contains(this.drawing.x, this.drawing.y)) {
             this.isDead = true;

app/sprites/tank.js

@@ -25,8 +25,8 @@
         this.drawing.y = 200;
     };
 
-    Tank.prototype.update = function () {
-        this.turret.update();
+    Tank.prototype.update = function (delta) {
+        this.turret.update(delta);
     };
 
     Tank.prototype.rotateHullRight = function () {

app/sprites/turret.js

@@ -26,8 +26,8 @@
         this.fireCounter = this.options.fireRate;
     };
 
-    Turret.prototype.update = function () {
-        this.aimingGuide.update();
+    Turret.prototype.update = function (delta) {
+        this.aimingGuide.update(delta);
 
     };
 

common/state_manager.js

@@ -1,4 +1,5 @@
 define(["createjs", "lodash", "./game", "./input"], function (createjs, _, game, input) {
+    var requiredFps = 30;
 
     function _handleTick(event) {
         if (event.paused) {
@@ -7,16 +8,16 @@
         if (!stateManager.activeState) {
             return;
         }
-
-        stateManager.activeState.update(event.delta);
+        var delta = (event.delta / 1000) * requiredFps;
+        stateManager.activeState.update(delta);
         stateManager.activeState.draw(game.stage);
     }
 
     createjs.Ticker.init();
     createjs.Ticker.addEventListener("tick", _handleTick);
     createjs.Ticker.setPaused(true);
     createjs.Ticker.useRAF = true;
-    createjs.Ticker.setFPS(30);
+    createjs.Ticker.setFPS(requiredFps);
     var stateManager = {
         start: function () {
             createjs.Ticker.setPaused(false);

index.html

@@ -10,7 +10,7 @@
     <div style="width:650px; height:560px; margin:auto; border:2px solid black;" >
     <canvas width=650 height=560 id="canvas" style="cursor:none; background-color:black"></canvas>
     </div>
-    FPS: <span id="fps"></span>
+    Use arrow keys to move, "a" and "d" to rotate turret and "f" to fire the gun <span id="fps"></span>
     <script data-main="app/main" src="lib/require.js"></script>
 </body>
 </html>