From 5d99f66c4025a1e2bce1e20c60c7118d40b5f475 Mon Sep 17 00:00:00 2001 From: Florrie Date: Fri, 24 Aug 2018 09:08:40 -0300 Subject: :Sparkles: Particles :Sparkles: --- index.js | 53 +++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file 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 -- cgit 1.3.0-6-gf8a5