mirror of
https://github.com/cliffe/BreakEscape.git
synced 2026-02-23 04:08:03 +00:00
78f08c32f8
Implement comprehensive combat feedback, UI, and mechanics: **Phase 2: Enhanced Feedback Systems** - damage-numbers.js: Floating damage numbers with object pooling - screen-effects.js: Screen flash and shake for combat feedback - sprite-effects.js: Sprite tinting, flashing, and visual effects - attack-telegraph.js: Visual indicators for incoming NPC attacks **Phase 3: UI Components** - health-ui.js: Player health display as hearts (5 hearts, shows when damaged) - npc-health-bars.js: Health bars above hostile NPCs with color coding - game-over-screen.js: KO screen with restart/main menu options **Phase 4-5: Combat Mechanics** - player-combat.js: Player punch system with AOE directional damage - npc-combat.js: NPC attack system with telegraph and cooldowns - Modified interactions.js to trigger punch on hostile NPC interaction - Integrated all systems into game.js create() and update() loops Combat now functional with complete visual/audio feedback pipeline. Player can punch hostile NPCs, NPCs can attack player, health tracking works.
96 lines
2.0 KiB
JavaScript
96 lines
2.0 KiB
JavaScript
/**
|
|
* Screen Effects System
|
|
* Handles screen flash and shake effects for combat feedback
|
|
*/
|
|
|
|
export class ScreenEffectsSystem {
|
|
constructor(scene) {
|
|
this.scene = scene;
|
|
this.camera = scene.cameras.main;
|
|
|
|
// Flash overlay - full screen colored rectangle
|
|
this.flashOverlay = scene.add.rectangle(
|
|
0, 0,
|
|
scene.cameras.main.width * 2,
|
|
scene.cameras.main.height * 2,
|
|
0xff0000,
|
|
0
|
|
);
|
|
this.flashOverlay.setDepth(10000); // Above everything
|
|
this.flashOverlay.setScrollFactor(0); // Fixed to camera
|
|
this.flashOverlay.setOrigin(0, 0);
|
|
|
|
// Shake state
|
|
this.isShaking = false;
|
|
this.shakeIntensity = 0;
|
|
this.shakeDuration = 0;
|
|
this.shakeStartTime = 0;
|
|
|
|
console.log('✅ Screen effects system initialized');
|
|
}
|
|
|
|
/**
|
|
* Flash the screen with a color
|
|
* @param {number} color - Hex color (e.g., 0xff0000 for red)
|
|
* @param {number} duration - Duration in ms
|
|
* @param {number} maxAlpha - Maximum alpha value (0-1)
|
|
*/
|
|
flash(color = 0xff0000, duration = 200, maxAlpha = 0.3) {
|
|
this.flashOverlay.setFillStyle(color, maxAlpha);
|
|
|
|
// Fade out animation
|
|
this.scene.tweens.add({
|
|
targets: this.flashOverlay,
|
|
alpha: 0,
|
|
duration: duration,
|
|
ease: 'Cubic.easeOut'
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Shake the camera
|
|
* @param {number} intensity - Shake intensity (pixel displacement)
|
|
* @param {number} duration - Duration in ms
|
|
*/
|
|
shake(intensity = 4, duration = 300) {
|
|
this.camera.shake(duration, intensity / 1000); // Phaser uses intensity as fraction
|
|
}
|
|
|
|
/**
|
|
* Flash red (damage taken)
|
|
*/
|
|
flashDamage() {
|
|
this.flash(0xff0000, 200, 0.3);
|
|
}
|
|
|
|
/**
|
|
* Flash green (heal)
|
|
*/
|
|
flashHeal() {
|
|
this.flash(0x00ff00, 200, 0.2);
|
|
}
|
|
|
|
/**
|
|
* Screen shake for player taking damage
|
|
*/
|
|
shakePlayerHit() {
|
|
this.shake(6, 300);
|
|
}
|
|
|
|
/**
|
|
* Screen shake for NPC taking damage
|
|
*/
|
|
shakeNPCHit() {
|
|
this.shake(3, 200);
|
|
}
|
|
|
|
/**
|
|
* Clean up system
|
|
*/
|
|
destroy() {
|
|
if (this.flashOverlay) {
|
|
this.flashOverlay.destroy();
|
|
}
|
|
}
|
|
}
|