From 973b85ff1fb8e22204afcb9c5ac6e0d27f545abb Mon Sep 17 00:00:00 2001 From: Florrie Date: Sun, 19 Aug 2018 16:08:10 -0300 Subject: Red bars acros screen when HP is low --- index.js | 43 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/index.js b/index.js index ca01536..8162c01 100644 --- a/index.js +++ b/index.js @@ -877,12 +877,14 @@ class Battle { this.animationEntities = [] this.canvas = document.createElement('canvas') + // State this.gameState = 'battle' // battle, pre-win, win, pre-lose, lose this.currentMenu = this.targetTypeMenu this.changeMenuAnim = {time: 1, direction: 1, old: null} + this.nearlyDeadAnim = null this.preEndAnim = null } @@ -955,6 +957,22 @@ class Battle { } ctx.restore() // End camera-translated drawing + if (this.nearlyDeadAnim) { + // TODO: Gradient + const height = Math.min(60, this.canvas.height / 4) + const opacity = (1 - this.nearlyDeadAnim.time) * (0.35 + Math.sin(Date.now() / 300) / 5) + const gradient = ctx.createLinearGradient(0, 0, 0, height) + gradient.addColorStop(0, `rgba(255, 0, 0, ${opacity})`) + gradient.addColorStop(1, 'transparent') + ctx.fillStyle = gradient + ctx.fillRect(0, 0, this.canvas.width, height) + const gradient2 = ctx.createLinearGradient(0, this.canvas.height - height, 0, this.canvas.height) + gradient2.addColorStop(0, 'transparent') + gradient2.addColorStop(1, `rgba(255, 0, 0, ${opacity})`) + ctx.fillStyle = gradient2 + ctx.fillRect(0, this.canvas.height - height, this.canvas.width, height) + } + const { atbBar } = this.playerCharacter ctx.save() @@ -1046,6 +1064,31 @@ class Battle { } } + const mostHurtCharacter = this.playerCharacter.team.getMostHurtCharacter() + const deadCharacter = this.playerCharacter.team.characters.find(c => c.dead) + if (deadCharacter || mostHurtCharacter.hp / mostHurtCharacter.maxHP <= 0.3) { + if (!this.nearlyDeadAnim) { + this.nearlyDeadAnim = {time: 1, direction: -1} + } + } else { + if (this.nearlyDeadAnim && this.nearlyDeadAnim.direction === -1) { + this.nearlyDeadAnim = {time: 0, direction: 1} + } + } + + if (this.nearlyDeadAnim) { + this.nearlyDeadAnim.time += 3 * dt * this.nearlyDeadAnim.direction + if (this.nearlyDeadAnim.direction === -1) { + if (this.nearlyDeadAnim.time < 0) { + this.nearlyDeadAnim.time = 0 + } + } else { + if (this.nearlyDeadAnim.time > 1) { + this.nearlyDeadAnim = null + } + } + } + for (const entity of this.animationEntities) { entity.update(dt) } -- cgit 1.3.0-6-gf8a5