Add health bars for enemies

resources/js/config/GameConfiguration.js

@@ -36,8 +36,8 @@ class GameConfiguration {
     gazePointColor = "#4cd494";
     maxNumberOfEnemies = 10;
     enemySpawnDelay = 500;
-    playerDamage = 50;
-    worldBackgroundColor = "#333";
+    playerDamage = 100;
+    worldBackgroundColor = "#332f3a";
     debugInfoPosition = {
       x: 10,
       y: screenHeight - 10,

resources/js/game/GameManager.js

@@ -51,6 +51,8 @@ function updateEnemies(now, delta) {
     }
   }
   for (let i = enemies.length - 1; i >= 0; i--) {
+    // Remove focus from enemy
+    enemies[i].removeFocus();
     // Update enemy's position 
     enemies[i].update(delta);
     // Check if enemy has hit target
@@ -76,6 +78,8 @@ function updateEnemies(now, delta) {
         x: currentGazePosition.targetX,
         y: currentGazePosition.targetY,
       })) {
+      // Set focus on currently watched enemy
+      enemies[i].setFocus();
       // Update enemy's health 
       enemies[i].health -= GameConfig.getPlayerDamage() / (1000/delta);
       // Remove enemy if destroyed

resources/js/game/objects/Enemy.js

@@ -6,31 +6,63 @@ const DEFAULT_VELOCITY = 1,
   DEFAULT_HEIGHT = 50,
   DEFAULT_DAMAGE = 10,
   DEFAULT_HIT_BOX_RADIUS = 30,
-  DEFAULT_ENEMEY_COLOR = "#dd3939";
+  DEFAULT_ENEMY_COLOR = "#3f0d76",
+  DEFAULT_ENEMEY_TIP_COLOR = "#d2ccf3",
+  DEFAULT_ENEMY_HEALTH_COLOR = "#d2ccf3",
+  DEFAULT_ENEMY_HEALTH_WIDTH = 10,
+  DEFAULT_ENEMY_HEALTH_RADIUS = 50;
 
 class Enemy extends GameObject {
 
   constructor(x, y, direction) {
     super(x, y, DEFAULT_WIDTH, DEFAULT_HEIGHT, DEFAULT_HIT_BOX_RADIUS,
-      DEFAULT_VELOCITY, direction, DEFAULT_ENEMEY_COLOR);
+      DEFAULT_VELOCITY, direction, DEFAULT_ENEMY_COLOR);
+    this.focus = false;
     this.health = DEFAULT_HEALTH;
     this.damage = DEFAULT_DAMAGE;
   }
 
   draw(context) {
     context.save();
+    // Draw health bar  if focused
+    context.translate(this.x, this.y);
+    if (this.focus === true) {
+      context.strokeStyle = DEFAULT_ENEMY_HEALTH_COLOR;
+      context.lineWidth = DEFAULT_ENEMY_HEALTH_WIDTH;
+      context.beginPath();
+      context.arc(0, 0, DEFAULT_ENEMY_HEALTH_RADIUS, 0, 3.6 * this.health *
+        Math.PI / 100);
+      context.stroke();
+      context.closePath();
+    }
+    // Draw enemy
     context.fillStyle = this.color;
     context.beginPath();
-    context.translate(this.x, this.y);
     context.rotate((90 + this.direction) * Math.PI / 180);
     context.moveTo(0, -this.height / 2);
     context.lineTo(-(this.width / 2), this.height / 2);
     context.lineTo(this.width / 2, this.height / 2);
+    context.fill();
     context.closePath();
+    // Draw tip
+    context.fillStyle = DEFAULT_ENEMEY_TIP_COLOR;
+    context.beginPath();
+    context.moveTo(0, -this.height / 2);
+    context.lineTo(-(this.width / 4), 0);
+    context.lineTo(this.width / 4, 0);
     context.fill();
+    context.closePath();
     context.restore();
   }
 
+  setFocus() {
+    this.focus = true;
+  }
+
+  removeFocus() {
+    this.focus = false;
+  }
+
   static createEnemy(rangeX, rangeY, targetX, targetY) {
     let xPos = parseInt(Math.random() * rangeX),
       yPos = parseInt(Math.random() * rangeY),

resources/js/game/objects/Planet.js

@@ -4,7 +4,7 @@ const DEFAULT_HEALTH = 100,
   DEFAULT_WIDTH = 500,
   DEFAULT_HEIGHT = 500,
   DEFAULT_HIT_BOX_RADIUS = 270,
-  DEFAULT_PLANET_COLOR = "#5bbe61",
+  DEFAULT_PLANET_COLOR = "#900c47",
   DEFAULT_PLANET_BORDER_COLOR = "#dafffe",
   DEFAULT_PLANET_BORDER_WIDTH = "20";