From 72f499b6b3e4a543ec0fb395f2de53ba7602af84 Mon Sep 17 00:00:00 2001 From: Alexander Bazo Date: Thu, 29 Aug 2019 14:46:45 +0200 Subject: [PATCH] Add health bars for enemies --- resources/js/config/GameConfiguration.js | 4 ++-- resources/js/game/GameManager.js | 4 ++++ resources/js/game/objects/Enemy.js | 38 +++++++++++++++++++++++++++++++++++--- resources/js/game/objects/Planet.js | 2 +- 4 files changed, 42 insertions(+), 6 deletions(-) diff --git a/resources/js/config/GameConfiguration.js b/resources/js/config/GameConfiguration.js index ceaf84b..70ea3ac 100644 --- a/resources/js/config/GameConfiguration.js +++ b/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, diff --git a/resources/js/game/GameManager.js b/resources/js/game/GameManager.js index 80e3bf4..5433857 100644 --- a/resources/js/game/GameManager.js +++ b/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 diff --git a/resources/js/game/objects/Enemy.js b/resources/js/game/objects/Enemy.js index fbef9c0..bf21c4c 100644 --- a/resources/js/game/objects/Enemy.js +++ b/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), diff --git a/resources/js/game/objects/Planet.js b/resources/js/game/objects/Planet.js index 8bd31ee..1fead74 100644 --- a/resources/js/game/objects/Planet.js +++ b/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"; -- libgit2 0.26.0