Basic attack animations

1 files changed, 56 insertions, 10 deletions

diff --git a/index.js b/index.js
index 7665129..63b8895 100644
--- a/index.js
+++ b/index.js
@@ -471,11 +471,7 @@ class BattleCharacter extends Sprite {
     this.actionExecuteTime = 0.4 + 0.2 * action.size
 
     if (this.targetCharacter) {
-      this.targetCharacter.takeDamage(action.size * 60)
-
-      if (this.targetCharacter.dead) {
-        this.determineNewOffenseTarget()
-      }
+      this.battle.animationEntities.push(new MagicProjectile(this, this.targetCharacter, action))
     }
   }
 
@@ -498,8 +494,18 @@ class BattleCharacter extends Sprite {
     if (!this.dead) {
       this.hp -= damage
       if (this.hp <= 0) {
-        this.hp = 0
-        this.dead = true
+        this.died()
+      }
+    }
+  }
+
+  died() {
+    this.hp = 0
+    this.dead = true
+
+    for (const battleCharacter of this.battle.getAllBattleCharacters()) {
+      if (battleCharacter.targetCharacter === this) {
+        battleCharacter.determineNewOffenseTarget()
       }
     }
   }
@@ -526,6 +532,8 @@ class Battle {
 
     this.canvas = document.createElement('canvas')
 
+    this.animationEntities = []
+
     // State
 
     this.gameState = 'battle' // battle, pre-win, win
@@ -544,9 +552,9 @@ class Battle {
 
     ctx.save()
     ctx.translate(-camera.x, -camera.y)
-    for (const sprite of [this.backdrop, ...this.getAllBattleCharacters()]) {
-      const x = sprite.x - sprite.canvas.width / 2
-      const y = sprite.y - sprite.canvas.height / 2
+    for (const sprite of [this.backdrop, ...this.getAllBattleCharacters(), ...this.animationEntities]) {
+      const x = Math.round(sprite.x - sprite.canvas.width / 2)
+      const y = Math.round(sprite.y - sprite.canvas.height / 2)
       sprite.draw()
       ctx.drawImage(sprite.canvas, x, y)
 
@@ -634,6 +642,12 @@ class Battle {
       }
     }
 
+    for (const entity of this.animationEntities) {
+      entity.update(dt)
+    }
+
+    this.animationEntities = this.animationEntities.filter(e => !e.discarded)
+
     if (!this.getAllBattleCharacters().find(c => c.team !== this.playerCharacter.team && !c.dead)) {
       this.gameState = 'pre-win'
       this.preWinAnim = {time: 1}
@@ -702,6 +716,38 @@ class Camera extends Sprite {
   }
 }
 
+class MagicProjectile {
+  constructor(caster, target, action) {
+    this.x = caster.x
+    this.y = caster.y
+
+    this.target = target
+    this.action = action
+
+    this.canvas = document.createElement('canvas')
+    this.canvas.width = 8
+    this.canvas.height = 8
+  }
+
+  update(dt) {
+    // TODO: Good animation, make distance affect acceleration, not velocity
+    this.x += dt * 5 * (this.target.x - this.x)
+    this.y += dt * 5 * (this.target.y - this.y)
+
+    if (Math.abs(this.target.x - this.x) <= 5 && Math.abs(this.target.y - this.y) <= 5) {
+      this.target.takeDamage(this.action.size * 60)
+      this.discarded = true
+    }
+  }
+
+  draw() {
+    const ctx = this.canvas.getContext('2d')
+    ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
+    ctx.fillStyle = 'red'
+    ctx.fillRect(0, 0, this.canvas.width, this.canvas.height)
+  }
+}
+
 const battle = new Battle()
 
 for (let ti = 0; ti < battle.teams.length; ti++) {