skill refactor, random skills during combat
This commit is contained in:
Mashy
parent
81ff0e3663
commit
f82a4167e1
18
client/src/scenes/combat.cryps.js
Normal file → Executable file
18
client/src/scenes/combat.cryps.js
Normal file → Executable file
@ -91,7 +91,7 @@ function renderCryp(scene, group, cryp, game, team, iter) {
|
||||
group.add(crypName);
|
||||
}
|
||||
|
||||
function renderSkills(scene, group, game, cryp, iter, team) {
|
||||
function renderSkills(scene, group, cryp, game, team, iter) {
|
||||
if (game.phase === 'Skill') {
|
||||
cryp.skills.forEach((skill, i) => {
|
||||
group.add(scene.add.existing(new CrypSkill(scene, i, iter, team, skill, cryp)));
|
||||
@ -103,19 +103,19 @@ function renderSkills(scene, group, game, cryp, iter, team) {
|
||||
}
|
||||
|
||||
class DrawCrypTeams extends Phaser.GameObjects.Group {
|
||||
constructor(scene, game, resolve) {
|
||||
constructor(scene, game) {
|
||||
super(scene);
|
||||
const account = scene.registry.get('account');
|
||||
const renderTeam = (cryp, iter, team) => {
|
||||
const renderTeam = (cryp, team, iter) => {
|
||||
renderCryp(scene, this, cryp, game, team, iter);
|
||||
renderSkills(scene, this, game, cryp, iter, team);
|
||||
renderSkills(scene, this, cryp, game, team, iter);
|
||||
};
|
||||
if (resolve) {
|
||||
renderTeam(game.teams.find(t => t.id === account.id).cryps[0], 1, 0);
|
||||
renderTeam(game.teams.filter(t => t.id !== account.id)[0].cryps[0], 1, 1);
|
||||
if (scene.registry.get('resolve')) {
|
||||
renderCryp(scene, this, game.teams.find(t => t.id === account.id).cryps[0], game, 0, 1);
|
||||
renderCryp(scene, this, game.teams.filter(t => t.id !== account.id)[0].cryps[0], game, 1, 1);
|
||||
} else {
|
||||
game.teams.find(t => t.id === account.id).cryps.forEach((cryp, i) => renderTeam(cryp, i, 0));
|
||||
game.teams.filter(t => t.id !== account.id)[0].cryps.forEach((cryp, i) => renderTeam(cryp, i, 1));
|
||||
game.teams.find(t => t.id === account.id).cryps.forEach((cryp, i) => renderTeam(cryp, 0, i));
|
||||
game.teams.filter(t => t.id !== account.id)[0].cryps.forEach((cryp, i) => renderTeam(cryp, 1, i));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
64
client/src/scenes/combat.js
Normal file → Executable file
64
client/src/scenes/combat.js
Normal file → Executable file
@ -3,9 +3,11 @@ const fs = require('fs');
|
||||
|
||||
const { POSITIONS: { COMBAT }, TEXT } = require('./constants');
|
||||
const { DrawCrypTeams, CrypImage, CrypSkill } = require('./combat.cryps');
|
||||
const combatRender = require('./combat.render');
|
||||
const CombatSkills = require('./combat.skills');
|
||||
|
||||
class Combat extends Phaser.Scene {
|
||||
constructor(props) {
|
||||
constructor() {
|
||||
super({ key: 'Combat' });
|
||||
}
|
||||
|
||||
@ -13,19 +15,12 @@ class Combat extends Phaser.Scene {
|
||||
/* Static Images */
|
||||
this.textures.addBase64('alk', `data:image/png;base64,${new Buffer.from(fs.readFileSync('./assets/alakazam-f.png')).toString('base64')}`);
|
||||
this.textures.addBase64('magmar', `data:image/png;base64,${new Buffer.from(fs.readFileSync('./assets/magmar.png')).toString('base64')}`);
|
||||
this.load.image('sky', 'http://labs.phaser.io/assets/skies/nebula.jpg');
|
||||
this.load.image('proj', 'http://labs.phaser.io/assets/sprites/bullet.png');
|
||||
this.load.image('blue', 'http://labs.phaser.io/assets/particles/blue.png');
|
||||
this.load.image('green', 'http://labs.phaser.io/assets/particles/green.png');
|
||||
this.load.image('red', 'http://labs.phaser.io/assets/particles/red.png');
|
||||
this.load.image('white', 'http://labs.phaser.io/assets/particles/white.png');
|
||||
this.load.image('yellow', 'http://labs.phaser.io/assets/particles/yellow.png');
|
||||
/* Spritesheets */
|
||||
this.load.spritesheet({
|
||||
key: 'explosion',
|
||||
url: 'http://labs.phaser.io/assets/sprites/explosion.png',
|
||||
frameConfig: { frameWidth: 64, frameHeight: 64, endFrame: 23 },
|
||||
});
|
||||
}
|
||||
|
||||
create() {
|
||||
@ -46,8 +41,9 @@ class Combat extends Phaser.Scene {
|
||||
const logX = COMBAT.LOG.x();
|
||||
const logY = COMBAT.LOG.y();
|
||||
const logWidth = COMBAT.LOG.width();
|
||||
this.skills = new CombatSkills(this);
|
||||
this.logIndex = 0;
|
||||
this.resolve = false;
|
||||
this.registry.set('resolve', false);
|
||||
this.log = this.add.text(logX, logY, '', TEXT.NORMAL);
|
||||
this.log.setWordWrapWidth(logWidth);
|
||||
return true;
|
||||
@ -56,49 +52,34 @@ class Combat extends Phaser.Scene {
|
||||
updateData(parent, key, data) {
|
||||
if (key === 'game') {
|
||||
if (!this.registry.get('activeSkill')) {
|
||||
this.checkLog(data);
|
||||
this.renderLog(data);
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
checkLog(game) {
|
||||
renderLog(game) {
|
||||
if (!game) return false;
|
||||
if (this.resolve) return true; // Animating combat
|
||||
while (this.logIndex !== game.log.length) {
|
||||
if (game.log[this.logIndex] === '<Resolve Phase>') {
|
||||
this.logIndex += 1;
|
||||
this.resolve = true;
|
||||
this.renderCombat(game);
|
||||
break;
|
||||
}
|
||||
this.logIndex += 1;
|
||||
}
|
||||
// shallow copy because reverse mutates
|
||||
if (!this.registry.get('resolve')) {
|
||||
this.iterateLog(game);
|
||||
}
|
||||
this.log.setText(Array.from(game.log).slice(0, this.logIndex).reverse());
|
||||
this.renderCryps(game);
|
||||
return true;
|
||||
}
|
||||
|
||||
renderCombat(game) {
|
||||
let delay = 0;
|
||||
if (game.log[this.logIndex].match(/(\w|\s)*\w(?=")|\w+/g)[1] === 'bamboo basher') {
|
||||
delay = this.skills('wall', 'green', COMBAT.width() * 0.175, 250);
|
||||
} else {
|
||||
delay = this.skills('wall', 'green', COMBAT.width() * 0.55, -250);
|
||||
}
|
||||
this.logIndex += 1;
|
||||
this.log.setText(Array.from(game.log).slice(0, this.logIndex).reverse());
|
||||
if (game.log[this.logIndex] === '<Skill Phase>' || this.logIndex === game.log.length) {
|
||||
this.time.delayedCall(delay, () => {
|
||||
this.resolve = false;
|
||||
this.renderCryps(game);
|
||||
});
|
||||
} else {
|
||||
this.time.delayedCall(delay, () => {
|
||||
this.renderCombat(game);
|
||||
this.renderCryps(game);
|
||||
});
|
||||
iterateLog(game) {
|
||||
if (this.registry.get('resolve')) {
|
||||
this.logIndex += 1;
|
||||
return true;
|
||||
} while (game.log.length !== this.logIndex) {
|
||||
if (game.log[this.logIndex] === '<Resolve Phase>') {
|
||||
this.registry.set('resolve', true);
|
||||
this.logIndex += 1;
|
||||
combatRender(this, game);
|
||||
break;
|
||||
} this.logIndex += 1;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
@ -107,10 +88,9 @@ class Combat extends Phaser.Scene {
|
||||
if (this.crypTeamRender) {
|
||||
this.crypTeamRender.destroy(true);
|
||||
}
|
||||
this.crypTeamRender = new DrawCrypTeams(this, game, this.resolve);
|
||||
this.crypTeamRender = new DrawCrypTeams(this, game);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
Combat.prototype.skills = require('./combat.skills.js');
|
||||
|
||||
module.exports = Combat;
|
||||
|
||||
31
client/src/scenes/combat.render.js
Executable file
31
client/src/scenes/combat.render.js
Executable file
@ -0,0 +1,31 @@
|
||||
const randomSkill = () => {
|
||||
const skills = ['wall', 'spit', 'gravBlast', 'gravBomb', 'chargeBall'];
|
||||
return skills[Math.floor(Math.random() * 5)];
|
||||
};
|
||||
|
||||
function combatRender(scene, game) {
|
||||
let delay = 0;
|
||||
const skill = randomSkill();
|
||||
// Need to update this with proper cryp / team / skill checking
|
||||
const target = game.log[scene.logIndex].match(/(\w|\s)*\w(?=")|\w+/g)[1] === 'bamboo basher';
|
||||
delay = scene.skills[skill](target);
|
||||
|
||||
scene.iterateLog(game);
|
||||
scene.log.setText(Array.from(game.log).slice(0, scene.logIndex).reverse());
|
||||
if (game.log[scene.logIndex] === '<Skill Phase>' || scene.logIndex === game.log.length) {
|
||||
scene.time.delayedCall(delay, () => {
|
||||
scene.skills.cleanup();
|
||||
scene.registry.set('resolve', false);
|
||||
scene.renderCryps(game);
|
||||
});
|
||||
} else {
|
||||
scene.time.delayedCall(delay, () => {
|
||||
scene.skills.cleanup();
|
||||
combatRender(scene, game);
|
||||
scene.renderCryps(game);
|
||||
});
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
module.exports = combatRender;
|
||||
270
client/src/scenes/combat.skills.js
Normal file → Executable file
270
client/src/scenes/combat.skills.js
Normal file → Executable file
@ -1,139 +1,151 @@
|
||||
// Skill function called by phaser combat
|
||||
const Phaser = require('phaser');
|
||||
const { POSITIONS: { COMBAT } } = require('./constants');
|
||||
|
||||
function skills(skill, img, location, spd) {
|
||||
const particles = this.add.particles(img);
|
||||
const randomColour = () => {
|
||||
const colours = ['green', 'blue', 'red', 'white', 'yellow'];
|
||||
return colours[Math.floor(Math.random() * 5)];
|
||||
};
|
||||
|
||||
switch (skill) {
|
||||
case 'blast':
|
||||
this.proj = this.physics.add.image(-100, 300, 'proj');
|
||||
this.emitter = particles.createEmitter({
|
||||
speed: 25,
|
||||
scale: { start: 1, end: 0 },
|
||||
blendMode: 'ADD',
|
||||
});
|
||||
this.emitter.startFollow(this.proj);
|
||||
this.physics.add.overlap(this.proj, this.players, this.explode, null, this);
|
||||
this.proj.x = location;
|
||||
this.proj.setVelocity(spd, 0);
|
||||
return 3000;
|
||||
const animationParams = (target) => {
|
||||
const spawnLocation = target ? COMBAT.width() * 0.175 : COMBAT.width() * 0.55;
|
||||
const speed = target ? 250 : -250;
|
||||
const img = randomColour();
|
||||
const angleMin = target ? 320 : 180;
|
||||
const angleMax = target ? 360 : 220;
|
||||
return { spawnLocation, speed, img, angleMin, angleMax };
|
||||
};
|
||||
|
||||
case 'wall':
|
||||
this.emitter = particles.createEmitter({
|
||||
x: location,
|
||||
y: { min: COMBAT.height() * 0.45, max: COMBAT.height() * 0.7 },
|
||||
lifespan: 2000,
|
||||
speedX: { min: spd, max: spd * 2 },
|
||||
scale: { start: 0.4, end: 0 },
|
||||
quantity: 4,
|
||||
blendMode: 'ADD',
|
||||
});
|
||||
this.time.delayedCall(1000, () => { this.emitter.stop(); }, [], this);
|
||||
return 3000;
|
||||
class CombatSkills extends Phaser.GameObjects.Group {
|
||||
constructor(scene) {
|
||||
super(scene);
|
||||
this.scene = scene;
|
||||
}
|
||||
|
||||
case 'spit':
|
||||
if (location > 250) {
|
||||
this.angleMin = 180;
|
||||
this.angleMax = 220;
|
||||
} else {
|
||||
this.angleMin = 320;
|
||||
this.angleMax = 360;
|
||||
}
|
||||
this.emitter = particles.createEmitter({
|
||||
x: location,
|
||||
y: 300,
|
||||
lifespan: 2000,
|
||||
angle: { min: this.angleMin, max: this.angleMax },
|
||||
speed: spd * 2,
|
||||
scale: { start: 0.4, end: 1 },
|
||||
gravityY: 250,
|
||||
quantity: 4,
|
||||
blendMode: 'ADD',
|
||||
});
|
||||
this.time.delayedCall(1000, () => { this.emitter.stop(); this.combat = false;}, [], this);
|
||||
return 3000;
|
||||
case 'gravBomb':
|
||||
this.well = particles.createGravityWell({
|
||||
x: 150,
|
||||
y: 150,
|
||||
power: 4,
|
||||
gravity: 500,
|
||||
});
|
||||
this.emitter = particles.createEmitter({
|
||||
x: 150,
|
||||
y: 150,
|
||||
lifespan: 1500,
|
||||
speed: 1000,
|
||||
scale: { start: 0.7, end: 1 },
|
||||
blendMode: 'ADD',
|
||||
});
|
||||
this.time.delayedCall(1000, () => {
|
||||
this.emitter.stop();
|
||||
this.well.active = false;
|
||||
}, [], this);
|
||||
return 2500;
|
||||
case 'gravBlast':
|
||||
this.well = particles.createGravityWell({
|
||||
x: 400,
|
||||
y: 300,
|
||||
power: 4,
|
||||
gravity: 500,
|
||||
});
|
||||
this.emitter = particles.createEmitter({
|
||||
x: 400,
|
||||
y: 300,
|
||||
lifespan: 2000,
|
||||
speed: 1000,
|
||||
scale: { start: 0.7, end: 1 },
|
||||
blendMode: 'ADD',
|
||||
bounds: {
|
||||
x: 0, y: 250, w: 450, h: 150,
|
||||
},
|
||||
});
|
||||
this.time.delayedCall(1000, () => {
|
||||
this.emitter.stop();
|
||||
this.well.x = 100;
|
||||
}, [], this);
|
||||
this.time.delayedCall(3000, () => {
|
||||
this.well.active = false;
|
||||
}, [], this);
|
||||
return 3000;
|
||||
case 'chargeBall':
|
||||
wall(target) {
|
||||
const { spawnLocation, speed, img } = animationParams(target);
|
||||
const particles = this.scene.add.particles(img);
|
||||
const emitter = particles.createEmitter({
|
||||
x: spawnLocation,
|
||||
y: { min: COMBAT.height() * 0.45, max: COMBAT.height() * 0.7 },
|
||||
lifespan: 2000,
|
||||
speedX: { min: speed, max: speed * 2 },
|
||||
scale: { start: 0.4, end: 0 },
|
||||
quantity: 4,
|
||||
blendMode: 'ADD',
|
||||
});
|
||||
this.add(particles);
|
||||
this.scene.time.delayedCall(1000, () => { emitter.stop(); }, [], this.scene);
|
||||
return 3000;
|
||||
}
|
||||
|
||||
this.emitter = particles.createEmitter({
|
||||
x: -400,
|
||||
y: -100,
|
||||
lifespan: 1000,
|
||||
moveToX: 450,
|
||||
moveToY: 150,
|
||||
scale: 0.75,
|
||||
quantity: 4,
|
||||
_frequency: 20,
|
||||
blendMode: 'ADD',
|
||||
emitZone: { source: new Phaser.Geom.Rectangle(0, 0, 1600, 700) },
|
||||
});
|
||||
this.emitter2 = particles.createEmitter({
|
||||
radial: false,
|
||||
x: { min: 450, max: 50, steps: 256 },
|
||||
y: { min: 150, max: 300, steps: 256 },
|
||||
lifespan: 1000,
|
||||
speedX: { min: 200, max: 400 },
|
||||
quantity: 4,
|
||||
gravityY: 0,
|
||||
scale: { start: 1.5, end: 0, ease: 'Power3' },
|
||||
blendMode: 'ADD',
|
||||
active: false,
|
||||
});
|
||||
this.time.delayedCall(1000, () => { this.emitter.stop(); }, [], this);
|
||||
this.time.delayedCall(2000, () => { this.emitter2.active = true; }, [], this);
|
||||
this.time.delayedCall(3000, () => { this.emitter2.stop();
|
||||
this.combat = false;}, [], this);
|
||||
return 4000;
|
||||
default:
|
||||
return false;
|
||||
spit(target) {
|
||||
const { spawnLocation, speed, img, angleMin, angleMax } = animationParams(target);
|
||||
const particles = this.scene.add.particles(img);
|
||||
const emitter = particles.createEmitter({
|
||||
x: spawnLocation,
|
||||
y: COMBAT.height() * 0.5,
|
||||
lifespan: 2000,
|
||||
angle: { min: angleMin, max: angleMax },
|
||||
speed: speed * 2,
|
||||
scale: { start: 0.4, end: 1 },
|
||||
gravityY: 250,
|
||||
quantity: 4,
|
||||
blendMode: 'ADD',
|
||||
});
|
||||
this.add(particles);
|
||||
this.scene.time.delayedCall(1000, () => { emitter.stop(); }, [], this);
|
||||
return 3000;
|
||||
}
|
||||
|
||||
gravBomb(target) {
|
||||
const { spawnLocation, img } = animationParams(!target);
|
||||
const particles = this.scene.add.particles(img);
|
||||
const location = target ? COMBAT.width() * 0.6 : COMBAT.width() * 0.1;
|
||||
const well = particles.createGravityWell({
|
||||
x: location,
|
||||
y: COMBAT.height() * 0.25,
|
||||
power: 4,
|
||||
gravity: 500,
|
||||
});
|
||||
this.emitter = particles.createEmitter({
|
||||
x: spawnLocation,
|
||||
y: COMBAT.height() * 0.25,
|
||||
lifespan: 1500,
|
||||
speed: 1000,
|
||||
scale: { start: 0.7, end: 1 },
|
||||
blendMode: 'ADD',
|
||||
});
|
||||
this.add(particles);
|
||||
this.scene.time.delayedCall(1000, () => { this.emitter.stop(); well.active = false; }, [], this.scene);
|
||||
return 2500;
|
||||
}
|
||||
|
||||
gravBlast(target) {
|
||||
const img = randomColour();
|
||||
const spawnLocation = target ? COMBAT.width() * 0.2 : COMBAT.width() * 0.45;
|
||||
const targetLocation = target ? COMBAT.width() * 0.6 : COMBAT.width() * 0.1;
|
||||
const particles = this.scene.add.particles(img);
|
||||
const bounds = target
|
||||
? { x: COMBAT.width() * 0.15, y: COMBAT.height() * 0.35, w: COMBAT.width() * 0.55, h: COMBAT.height() * 0.2 }
|
||||
: { x: 0, y: COMBAT.height() * 0.35, w: COMBAT.width() * 0.55, h: COMBAT.height() * 0.2 };
|
||||
const well = particles.createGravityWell({
|
||||
x: spawnLocation,
|
||||
y: COMBAT.height() * 0.5,
|
||||
power: 4,
|
||||
gravity: 500,
|
||||
});
|
||||
const emitter = particles.createEmitter({
|
||||
x: spawnLocation,
|
||||
y: COMBAT.height() * 0.5,
|
||||
lifespan: 2000,
|
||||
speed: 1000,
|
||||
scale: { start: 0.7, end: 1 },
|
||||
blendMode: 'ADD',
|
||||
bounds,
|
||||
});
|
||||
this.add(particles);
|
||||
this.scene.time.delayedCall(1000, () => { emitter.stop(); well.x = targetLocation; }, [], this.scene);
|
||||
this.scene.time.delayedCall(3000, () => { well.active = false; }, [], this.scene);
|
||||
return 3000;
|
||||
}
|
||||
|
||||
chargeBall(target) {
|
||||
const { img, spawnLocation } = animationParams(target);
|
||||
const targetLocation = target ? 0.7 * COMBAT.width() : 0;
|
||||
const particles = this.scene.add.particles(img);
|
||||
const emitter = particles.createEmitter({
|
||||
x: 0,
|
||||
y: 0,
|
||||
lifespan: 1000,
|
||||
moveToX: spawnLocation,
|
||||
moveToY: COMBAT.height() * 0.2,
|
||||
scale: 0.75,
|
||||
quantity: 4,
|
||||
_frequency: 20,
|
||||
blendMode: 'ADD',
|
||||
emitZone: { source: new Phaser.Geom.Rectangle(0, 0, COMBAT.width(), COMBAT.height()) },
|
||||
});
|
||||
const emitter2 = particles.createEmitter({
|
||||
radial: false,
|
||||
x: { min: spawnLocation, max: targetLocation, steps: 256 },
|
||||
y: { min: COMBAT.height() * 0.2, max: COMBAT.height() * 0.6, steps: 256 },
|
||||
lifespan: 1000,
|
||||
quantity: 4,
|
||||
gravityY: 0,
|
||||
scale: { start: 1.5, end: 0, ease: 'Power3' },
|
||||
blendMode: 'ADD',
|
||||
active: false,
|
||||
});
|
||||
this.add(particles);
|
||||
this.scene.time.delayedCall(1000, () => { emitter.stop(); }, [], this.scene);
|
||||
this.scene.time.delayedCall(2000, () => { emitter2.active = true; }, [], this.scene);
|
||||
this.scene.time.delayedCall(3000, () => { emitter2.stop(); }, [], this.scene);
|
||||
return 4000;
|
||||
}
|
||||
|
||||
cleanup() {
|
||||
this.children.entries.forEach(obj => obj.destroy());
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
module.exports = skills;
|
||||
module.exports = CombatSkills;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user