Merge branch 'add_hp_bar'

app/sprites/hp_bar.js

@@ -0,0 +1,32 @@
+define(["createjs"], function (createjs) {
+
+    var HpBar = function (options) {
+        this.options = options;
+    };
+
+    HpBar.prototype.initialize = function (assets) {
+        this.drawing = new createjs.Shape();
+        this.hp = 1;
+    };
+
+    HpBar.prototype.update = function (delta) {
+        var graphics = this.drawing.graphics;
+        graphics.c().ss(1).s("Azure").r(0, 0, 26, 4).es(); //The frame
+
+        graphics.ss(2);
+        if (this.hp > 0.75){
+            graphics.s("green");
+        }
+        else {
+            if (this.hp>0.25){
+                graphics.s("yellow");
+            } else {
+                graphics.s("red");
+            }
+
+        }
+        graphics.mt(1, 2).lt(25 * this.hp, 2).es();
+    };
+
+    return HpBar;
+});

app/sprites/hull.js

@@ -0,0 +1,16 @@
+define(["require", "createjs"], function (require, createjs) {
+
+
+    var Hull = function (options) {
+        this.options = options.hull;
+    };
+
+    Hull.prototype.initialize = function (assets) {
+        this.drawing = new createjs.Bitmap(assets[this.options.graphics.hull.id]);
+    };
+
+    Hull.prototype.update = function (delta) {
+    };
+
+    return Hull;
+});

app/sprites/tank.js

@@ -1,69 +1,82 @@
-define(["require", "createjs", "common/math", "./turret"], function (require, createjs, math) {
+define(["require", "createjs", "common/math", "./hull", "./turret","./hp_bar"], function (require, createjs, math) {
 
+    var Hull = require("./hull");
     var Turret = require("./turret");
+    var HpBar = require("./hp_bar");
 
     var Tank = function (options) {
-        this.options = options.hull;
+        this.options = options;
         this.turret = new Turret(options);
-
+        this.hull = new Hull(options);
+        this.hpBar = new HpBar();
     };
 
     Tank.prototype.initialize = function (assets) {
-        this.hull = new createjs.Bitmap(assets[this.options.graphics.hull.id]);
+        this.drawing = new createjs.Container();
+        this.tank = new createjs.Container();
+
         this.turret.initialize(assets);
+        this.hull.initialize(assets);
+        this.hpBar.initialize(assets);
 
-        this.drawing = new createjs.Container();
-        this.drawing.addChild(this.hull, this.turret.drawing);
 
-        this.drawing.regX = this.options.centerX;
-        this.drawing.regY = this.options.centerY;
+        this.tank.addChild(this.hull.drawing, this.turret.drawing);
+        this.drawing.addChild(this.tank, this.hpBar.drawing);
+
+        this.tank.regX = this.options.hull.centerX;
+        this.tank.regY = this.options.hull.centerY;
+
+        this.turret.drawing.x = this.options.hull.turretAxisX;
+        this.turret.drawing.y = this.options.hull.turretAxisY;
 
-        this.turret.drawing.x = this.options.turretAxisX;
-        this.turret.drawing.y = this.options.turretAxisY;
+        this.hpBar.drawing.x = -this.options.hull.centerX;
+        this.hpBar.drawing.y = -this.options.hull.centerY-10;
 
-        this.drawing.x = 200;
-        this.drawing.y = 200;
     };
 
     Tank.prototype.update = function (delta) {
+        this.hull.update(delta);
         this.turret.update(delta);
+        this.hpBar.update(delta);
     };
 
     Tank.prototype.rotateHullRight = function () {
-        this.drawing.rotation = math.incMod(this.drawing.rotation, this.options.rotationSpeed, 360);
+        this.tank.rotation = math.incMod(this.tank.rotation, this.options.hull.rotationSpeed, 360);
         this.turret.rotateHull();
     };
 
     Tank.prototype.rotateHullLeft = function () {
-        this.drawing.rotation = math.incMod(this.drawing.rotation, -this.options.rotationSpeed, 360);
+        this.tank.rotation = math.incMod(this.tank.rotation, -this.options.hull.rotationSpeed, 360);
         this.turret.rotateHull();
     };
 
     Tank.prototype.rotateTurretRight = function () {
         this.turret.rotateTurretRight();
+        this.hpBar.hp = math.incMax(this.hpBar.hp, 0.01, 1);
     };
 
     Tank.prototype.rotateTurretLeft = function () {
         this.turret.rotateTurretLeft();
+        this.hpBar.hp = math.incMin(this.hpBar.hp, -0.01, 0);
     };
 
     Tank.prototype.moveForward = function () {
-        var angle = math.degToRad(this.drawing.rotation);
+        var angle = math.degToRad(this.tank.rotation);
         this.drawing.x += Math.sin(angle);
         this.drawing.y -= Math.cos(angle);
     };
 
     Tank.prototype.moveBackward = function () {
-        var angle = math.degToRad(this.drawing.rotation);
+        var angle = math.degToRad(this.tank.rotation);
         this.drawing.x -= Math.sin(angle);
         this.drawing.y += Math.cos(angle);
     };
 
     Tank.prototype.fire = function () {
         return this.turret.fire({
-            angle: this.drawing.rotation,
-            x: this.drawing.x,
-            y: this.drawing.y,
+            angle: this.tank.rotation,
+            x: this.tank.x,
+            y: this.tank.y,
             speed: 20
         });
     };

app/states/battle.js

@@ -26,6 +26,8 @@
             manifest = State.mergeManifest([], t72.hull, t72.turret, t72.gun, barrel32, fireExplosion);
             loader.loadManifest(manifest, function (assets) {
                 battle.sprites.initialize(assets);
+                battle.player.drawing.x = 200;
+                battle.player.drawing.y = 200;
                 deferred.resolve();
             });
         };

common/sprite_list.js

@@ -24,16 +24,18 @@
         id = id || "$$" + this.counter;
         this.counter += 1;
 
+        if (this.data[id] === undefined) {
+            this.length += 1;
+        }
         this.data[id] = item;
-        this.length += 1;
+
     };
 
     SpriteList.prototype.at = function (id) {
         return this.data[id];
     };
 
     SpriteList.prototype.each = function (callback) {
-        var _this = this;
         _.forOwn(this.data, function (sprite) {
             callback(sprite);
         });

common/state_manager.js

@@ -8,6 +8,7 @@
         if (!stateManager.activeState) {
             return;
         }
+        $("#fps").html(createjs.Ticker.getMeasuredFPS());
         var delta = (event.delta / 1000) * requiredFps;
         stateManager.activeState.update(delta);
         stateManager.activeState.draw(game.stage);

index.html

@@ -10,7 +10,8 @@
     <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>
-    Use arrow keys to move, "a" and "d" to rotate turret and "f" to fire the gun <span id="fps"></span>
+    Use arrow keys to move, "a" and "d" to rotate turret and "f" to fire the gun <br />
+    FPS: <span id="fps"></span>
     <script data-main="app/main" src="lib/require.js"></script>
 </body>
 </html>