Added HUDs

Game.js

@@ -58,6 +58,12 @@ invadersApp.Game.prototype = {
         // Initialize basic physics
         this.game.physics.startSystem(Phaser.Physics.ARCADE);
 
+        // Add HUDs
+        this.scoreText = invadersApp.utils.addText(this, 60, 20, 'SCORE:', 2);
+        this.scoreHud = invadersApp.utils.addText(this, this.scoreText.img.x + this.scoreText.img.width / 2 + 30, 20, invadersApp.utils.pad(0, 3), 2);
+        this.invadersText = invadersApp.utils.addText(this, this.scoreHud.img.x + this.scoreHud.img.width + 80, 20, 'INVADERS:', 2);
+        this.invadersHud = invadersApp.utils.addText(this, this.invadersText.img.x + this.invadersText.img.width / 2 + 30, 20, invadersApp.utils.pad(0, 3), 2);
+
         // Group of invaders
         this.objects.invaders = this.add.group();
         this.objects.invaders.enableBody = true;
@@ -94,9 +100,14 @@ invadersApp.Game.prototype = {
         var readyText = invadersApp.utils.addText(this, this.game.width / 2, this.game.height / 2, 'READY!', 5);
         this.game.input.keyboard.onDownCallback = function () {
             that.game.paused = false;
-            if (readyText.visible) readyText.kill();
+            if (readyText.img.visible) readyText.img.kill();
         };
+
+        this.updateCounter();
+
         this.game.paused = true;
+
+
     },
 
     update: function () {
@@ -110,7 +121,10 @@ invadersApp.Game.prototype = {
         this.game.physics.arcade.overlap(this.player.bullets, this.objects.invaders, function (bullet, invader) {
             bullet.kill();
             var living = that.objects.invaders.countLiving();
-            if (living > MIN_INVADERS) invader.kill();
+            if (living > MIN_INVADERS) {
+                invader.kill();
+                that.updateCounter();
+            }
             if (living == MIN_INVADERS + 1) {
                 that.objects.invaders.forEachAlive(function (invader) {
                     invader.showField();
@@ -174,6 +188,9 @@ invadersApp.Game.prototype = {
                 this.currentGenerationTime -= 150;
                 console.log(this.currentGenerationTime);
             }
+
+            this.updateCounter();
+            this.updateScore();
         }
 
     },
@@ -192,6 +209,14 @@ invadersApp.Game.prototype = {
         this.wall = this.add.sprite(0, this.game.height - WALL_MARGIN, wallBmp);
         this.game.physics.enable(this.wall, Phaser.Physics.ARCADE);
         this.wall.body.immovable = true;
+    },
+
+    updateScore: function () {
+        this.scoreHud.font.text = invadersApp.utils.pad(this.currentGeneration, 3);
+    },
+
+    updateCounter: function () {
+        this.invadersHud.font.text = invadersApp.utils.pad(this.objects.invaders.countLiving(), 3);
     }
 
 };

MainMenu.js

@@ -40,13 +40,13 @@ invadersApp.MainMenu.prototype = {
 		//var titleText = this.add.bitmapText(this.game.width / 2, 50, 'minecraftia', 'CiTIUS INVADERS', 50);
 		//titleText.anchor.x = 0.5;
         var textPressStart = invadersApp.utils.addText(this, this.game.width / 2, titleYPos + 200, 'PRESS START', 2);
-        textPressStart.visible = false;
+        textPressStart.img.visible = false;
 
 		//var startEntry = this.addMenuEntry('START GAME', titleYPos + 160, this.startGame);
 		//this.addMenuEntry('CONFIGURE', startEntry.y + 40);
 
         var textCopyright = invadersApp.utils.addText(this, this.game.width / 2, logo.y + 40, 'CENTRO SINGULAR DE INVESTIGACION EN TECNOLOXIAS DA INFORMACION', 1);
-        textCopyright.visible = false;
+        textCopyright.img.visible = false;
 
 
 
@@ -62,12 +62,12 @@ invadersApp.MainMenu.prototype = {
         tweenTitle.onComplete.add(function () {
             // Show bottom info
             logo.visible = true;
-            textCopyright.visible = true;
-            textPressStart.visible = true;
+            textCopyright.img.visible = true;
+            textPressStart.img.visible = true;
 
             // Start blinking event for 'PRESS START'
             this.game.time.events.loop(Phaser.Timer.HALF, function () {
-                textPressStart.visible = !textPressStart.visible;
+                textPressStart.img.visible = !textPressStart.img.visible;
             }, this);
 
             //this.music.play('', 0, 1, true, true);

Preloader.js

@@ -20,7 +20,7 @@ invadersApp.Preloader.prototype = {
 		//loadingText.anchor.x = 0.5;
 		//loadingText.anchor.setTo(0.5, 0.5);
 
-		this.preloadBar = this.add.sprite(this.game.width / 2, loadingText.y + 40, 'preloaderBar');
+		this.preloadBar = this.add.sprite(this.game.width / 2, loadingText.img.y + 40, 'preloaderBar');
 		this.preloadBar.anchor.setTo(0.5, 0.5);
         //this.preloadBar.tint =
 

js/Utils.js

@@ -11,5 +11,11 @@ invadersApp.utils.addText = function (game, x, y, text, size) {
     var img = game.add.image(x, y, font);
     img.scale.setTo(scale, scale);
     img.anchor.setTo(0.5, 0.5);
-    return img;
+    return {'font': font, 'img': img};
+};
+
+invadersApp.utils.pad = function (n, width, z) {
+    z = z || '0';
+    n = n + '';
+    return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
 };
\ No newline at end of file