Enemy turns (looks) towards the Player when attacking

Author: DimiTech

src/app/domain/Creature.ts

@@ -1,8 +1,9 @@
 import * as CONFIG from '@app/configuration/config.json'
 
+import { angleBetweenPoints } from '@app/infrastructure/geometry/Point'
 import GameTime from '@app/infrastructure/GameTime'
 import CollisionBox, { collisionBoxesIntersect, ICollidable } from '@app/infrastructure/CollisionBox'
-import { Directions, MovingDirections } from '@app/infrastructure/Directions'
+import { Directions, MovingDirections, getDirectionBasedOnAngle } from '@app/infrastructure/Directions'
 
 import Map from '@app/domain/map/Map'
 import CreatureState from '@app/domain/CreatureState'
@@ -375,7 +376,16 @@ export default abstract class Creature {
     if (this.prevY.length > this.prevHistoryLength) { this.prevY.shift() }
   }
 
-  protected updateDirection(): void {
+  protected updateDirection(targetCreature: Creature): void {
+    if (this.state === CreatureState.Attacking) {
+      this.updateDirectionWhenAttacking(targetCreature)
+    }
+    else {
+      this.updateDirectionWhenMoving()
+    }
+  }
+
+  private updateDirectionWhenMoving(): void {
     const direction: string[] = []
 
     if (this.movingDirections.down && this.blocked.down === false) {
@@ -397,6 +407,11 @@ export default abstract class Creature {
     this.direction = Directions[directionString as keyof typeof Directions]
   }
 
+  private updateDirectionWhenAttacking(targetCreature: Creature): void {
+    const theta = angleBetweenPoints(targetCreature, this)
+    this.direction = getDirectionBasedOnAngle(theta)
+  }
+
   protected checkIfMoving(): boolean {
     // Check if all of the recorded prevX & prevY positions are the same
     const xUnchanged = this.prevX.every((prevX, i) => (i === 0) ? true : (prevX === this.prevX[0]))

src/app/domain/enemies/ConcreteEnemy/ConcreteEnemy.ts

@@ -133,7 +133,7 @@ export default class ConcreteEnemy extends Enemy {
 
     this.adjustCollisionWithWalls() // Must come after move()
 
-    this.updateDirection() // Must come after adjustCollisionWithWalls()
+    this.updateDirection(player) // Must come after adjustCollisionWithWalls()
 
     super.update(player)
 

src/app/infrastructure/Directions.ts

@@ -1,3 +1,5 @@
+import { Pi2Decimals, radiansToDegrees } from '@app/infrastructure/math/MathUtils'
+
 export enum Directions {
   N  = 'N',
   NE = 'NE',
@@ -14,4 +16,44 @@ export enum MovingDirections {
   right = 'right',
   down  = 'down',
   left  = 'left',
-}
+}
+
+const directionsAngleRangesLUT: { [key in Directions]: { min: number, max: number }} = {
+  [Directions.E ]: { min: 337, max: 22,  }, // min & max are degrees
+  [Directions.SE]: { min: 22,  max: 67,  },
+  [Directions.S ]: { min: 67,  max: 112, },
+  [Directions.SW]: { min: 112, max: 157, },
+  [Directions.W ]: { min: 157, max: 202, },
+  [Directions.NW]: { min: 202, max: 247, },
+  [Directions.N ]: { min: 247, max: 292, },
+  [Directions.NE]: { min: 292, max: 337, },
+}
+
+/*
+ * Angles:
+ *            N
+ *            |
+ *           270
+ *   W - 180     0 - E
+ *           90
+ *            |
+ *            S
+*/
+export function getDirectionBasedOnAngle(theta: number): Directions {
+  if (theta < 0) {
+    theta = 2 * Math.PI - Math.abs(theta)
+  }
+  theta = radiansToDegrees(theta)
+
+  if (
+    theta >= 0 && theta < directionsAngleRangesLUT[Directions.E].max ||
+    theta >= directionsAngleRangesLUT[Directions.E].min && theta < 360 // deg
+  ) {
+    return Directions.E
+  }
+
+  const [ direction ] = Object.entries(directionsAngleRangesLUT).find(([direction, angleRange]) => {
+    return (theta >= angleRange.min && theta < angleRange.max)
+  })
+  return Directions[direction as Directions]
+}

src/app/infrastructure/math/MathUtils.ts

@@ -2,4 +2,8 @@ export const Pi2Decimals = +Math.PI.toFixed(2)
 
 export function random(min: number, max: number) {
   return min + Math.floor(Math.random() * (max - min + 1))
+}
+
+export function radiansToDegrees(radians: number) {
+  return radians * (180 / Math.PI)
 }