Enemy.js

const DEFAULT_VELOCITY = 1,
  DEFAULT_HEALTH = 100,
  DEFAULT_WIDTH = 50,
  DEFAULT_HEIGHT = 50,
  DEFAULT_DAMAGE = 10,
  DEFAULT_HIT_BOX_RADIUS = 30,
  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 {

  static 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.DEFAULT_ENEMY_COLOR;
    context.beginPath();
    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();
  }

}

export default Enemy;