From 958655ff46eece907858ae7d11d5bf3cd41bf35b Mon Sep 17 00:00:00 2001 From: Florrie Date: Sun, 12 Aug 2018 10:31:18 -0300 Subject: Battle class --- index.js | 175 +++++++++++++++++++++++++++++++++++++++++---------------------- 1 file changed, 113 insertions(+), 62 deletions(-) diff --git a/index.js b/index.js index 0789074..e6aae70 100644 --- a/index.js +++ b/index.js @@ -322,11 +322,13 @@ class ActionMenu { } class BattleCharacter extends Sprite { - constructor() { + constructor({team, battle}) { super() // Parts + this.team = team + this.battle = battle this.atbBar = new ATBBar(this) this.image.src = 'img/char.png' @@ -382,6 +384,101 @@ class BattleCharacter extends Sprite { } } +class Battle { + constructor() { + // Parts + + this.teams = [ + new Team({battle: this}), + new Team({battle: this}) + ] + + this.playerCharacter = this.teams[0].characters[0] + + this.actionMenu = new ActionMenu() + + this.backdrop = new Backdrop() + + this.camera = new Camera() + this.camera.follow(this.playerCharacter) + + this.canvas = document.createElement('canvas') + } + + draw() { + const ctx = canvas.getContext('2d') + let targetX = 0, targetY = 0 + + 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 + sprite.draw() + ctx.drawImage(sprite.canvas, x, y) + + if (this.playerCharacter.targetCharacter === sprite) { + targetX = sprite.x - camera.x + targetY = y - camera.y + } + } + ctx.restore() + + const { atbBar, hpBar } = this.playerCharacter + + let y = canvas.height - 20 + if (!this.playerCharacter.isExecutingChain) { + this.actionMenu.draw() + y -= this.actionMenu.canvas.height + ctx.drawImage(this.actionMenu.canvas, 20, y) + y -= 2 + } + atbBar.draw() + y -= atbBar.canvas.height + ctx.drawImage(atbBar.canvas, 20, y) + + y = canvas.height - 20 + y -= hpBar.canvas.height + hpBar.draw() + ctx.drawImage(hpBar.canvas, canvas.width - 20 - hpBar.canvas.width, y) + + if (this.playerCharacter.targetCharacter) { + const hpBar = this.playerCharacter.targetCharacter.hpBar + const x = targetX - hpBar.canvas.width / 2 + const y = targetY - hpBar.canvas.height + hpBar.draw() + ctx.drawImage(hpBar.canvas, x, y) + } + } + + update(dt) { + for (const team of this.teams) { + team.update(dt) + } + + this.camera.update(dt) + } + + getAllBattleCharacters() { + return this.teams.reduce((acc, team) => acc.concat(team.characters), []) + } +} + +class Team { + constructor({battle}) { + this.battle = battle + this.characters = [ + new BattleCharacter({team: this, battle}) + ] + } + + update(dt) { + for (const character of this.characters) { + character.update(dt) + } + } +} + class Camera extends Sprite { constructor() { super() @@ -403,29 +500,21 @@ class Camera extends Sprite { } } -const battleCharacter = new BattleCharacter() -battleCharacter.x = 0 -battleCharacter.y = 240 - -const enemyCharacter = new BattleCharacter() -enemyCharacter.x = 0 -enemyCharacter.y = 200 +const battle = new Battle() -battleCharacter.targetCharacter = enemyCharacter +Object.assign(battle.teams[0].characters[0], {x: 0, y: 240}) +Object.assign(battle.teams[1].characters[0], {x: 0, y: 200}) -const atbBar = battleCharacter.atbBar -const hpBar = battleCharacter.hpBar -//atbBar.queuedActions = [{label: 'Fire', size: 1}, {label: 'Blizz', size: 1}, {label: 'Zap', size: 1}, {label: 'Firaga', size: 3}] +// battleCharacter.targetCharacter = enemyCharacter -const actionMenu = new ActionMenu() - -const camera = new Camera() +const camera = battle.camera camera.width = canvas.width camera.height = canvas.height -camera.follow(battleCharacter) -const backdrop = new Backdrop() -backdrop.y = 300 / 2 +battle.canvas.width = canvas.width +battle.canvas.height = canvas.height + +battle.backdrop.y = 300 / 2 let lastTime = Date.now() @@ -433,61 +522,23 @@ function drawLoop() { const dt = (Date.now() - lastTime) / 1000 lastTime = Date.now() - battleCharacter.update(dt) - enemyCharacter.update(dt) - camera.update(dt) + battle.update(dt) const ctx = canvas.getContext('2d') ctx.clearRect(0, 0, canvas.width, canvas.height) ctx.fillStyle = '#EEE' ctx.fillRect(0, 0, canvas.width, canvas.height) - let targetX = 0, targetY = 0 - - ctx.save() - ctx.translate(-camera.x, -camera.y) - for (const sprite of [backdrop, enemyCharacter, battleCharacter]) { - const x = sprite.x - sprite.canvas.width / 2 - const y = sprite.y - sprite.canvas.height / 2 - sprite.draw() - ctx.drawImage(sprite.canvas, x, y) - - if (battleCharacter.targetCharacter === sprite) { - targetX = sprite.x - camera.x - targetY = y - camera.y - } - } - ctx.restore() - - let y = canvas.height - 20 - if (!battleCharacter.isExecutingChain) { - actionMenu.draw() - y -= actionMenu.canvas.height - ctx.drawImage(actionMenu.canvas, 20, y) - y -= 2 - } - atbBar.draw() - y -= atbBar.canvas.height - ctx.drawImage(atbBar.canvas, 20, y) - - y = canvas.height - 20 - y -= hpBar.canvas.height - hpBar.draw() - ctx.drawImage(hpBar.canvas, canvas.width - 20 - hpBar.canvas.width, y) - - if (battleCharacter.targetCharacter) { - const hpBar = battleCharacter.targetCharacter.hpBar - const x = targetX - hpBar.canvas.width / 2 - const y = targetY - hpBar.canvas.height - hpBar.draw() - ctx.drawImage(hpBar.canvas, x, y) - } + battle.draw() + ctx.drawImage(battle.canvas, 0, 0) requestAnimationFrame(drawLoop) } canvas.addEventListener('keypress', evt => { - if (!battleCharacter.isExecutingChain) { + const { actionMenu } = battle + const { atbBar } = battle.playerCharacter + if (!battle.playerCharacter.isExecutingChain) { if (evt.keyCode === 38) { actionMenu.upOption() } else if (evt.keyCode === 40) { -- cgit 1.3.0-6-gf8a5