:Sparkles: Particles :Sparkles:

1 files changed, 49 insertions, 4 deletions

diff --git a/index.js b/index.js
index f9269a4..96db27e 100644
--- a/index.js
+++ b/index.js
@@ -838,7 +838,9 @@ class BattleCharacter extends Sprite {
     }
 
     if (this.targetCharacter) {
-      this.battle.miscSprites.push(new MagicProjectile(this, this.targetCharacter, action))
+      this.battle.miscSprites.push(new MagicProjectile({
+        battle: this.battle, caster: this, target: this.targetCharacter, action
+      }))
     }
   }
 
@@ -1017,7 +1019,7 @@ class Battle {
     window.spriteData = spriteData
 
     for (const { x, y, drawW, drawH, sprite } of spriteData) {
-      ctx.drawImage(sprite.canvas, x, y, drawW, drawH)
+      ctx.drawImage(sprite.canvas, Math.round(x), Math.round(y), drawW, drawH)
     }
 
     for (const { centerX, y, sprite } of spriteData) {
@@ -1361,7 +1363,7 @@ class BattleCamera extends Camera {
 }
 
 class MagicProjectile extends Sprite {
-  constructor(caster, target, action) {
+  constructor({battle, caster, target, action}) {
     super()
 
     const center = caster.getCenterCoordinates()
@@ -1369,10 +1371,10 @@ class MagicProjectile extends Sprite {
     this.y = center.y
     this.z = center.z
 
+    this.battle = battle
     this.target = target
     this.action = action
 
-    this.canvas = document.createElement('canvas')
     this.canvas.width = 8
     this.canvas.height = 8
 
@@ -1405,6 +1407,10 @@ class MagicProjectile extends Sprite {
       // this.target.yvel += 2 * yvel * this.target.knockbackMultiplier * actionKB
       // this.target.zvel += 2 * zvel * this.target.knockbackMultiplier * actionKB
 
+      for (let i = 0; i < 10 + Math.random() * 20; i++) {
+        this.battle.miscSprites.push(new SplashProjectile(this, this.action.color))
+      }
+
       this.discarded = true
     }
   }
@@ -1417,6 +1423,45 @@ class MagicProjectile extends Sprite {
   }
 }
 
+class SplashProjectile extends Sprite {
+  constructor(position, color) {
+    super()
+
+    this.x = position.x
+    this.y = position.y
+    this.z = position.z
+
+    this.xvel = 120 * (Math.random() - 0.5)
+    this.yvel = 120 * (Math.random() - 0.25)
+    this.zvel = 120 * (Math.random() - 0.5)
+    this.color = color
+
+    this.canvas.width = 2
+    this.canvas.height = 2
+
+    delete this.image
+  }
+
+  update(dt) {
+    this.x += dt * this.xvel
+    this.y += dt * this.yvel
+    this.z += dt * this.zvel
+    this.yvel += 0.1
+    this.zvel *= 0.9
+    this.xvel *= 0.9
+    if (this.xvel <= 0.1 && this.zvel <= 0.1) {
+      this.discarded = true
+    }
+  }
+
+  draw() {
+    const ctx = this.canvas.getContext('2d')
+    ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
+    ctx.fillStyle = this.color
+    ctx.fillRect(0, 0, this.canvas.width, this.canvas.height)
+  }
+}
+
 class SlideacrossMessage {
   constructor() {
     this.text = null