tanqiu/test_realtime_gameend_debug.js

/**
 * 实时GameEnd调试脚本
 * 模拟实际游戏环境，检查墙体血量为0时GameEnd的显示问题
 */

// 模拟GameEvents
const GameEvents = {
    GAME_DEFEAT: 'GAME_DEFEAT',
    GAME_RESUME: 'GAME_RESUME',
    RESET_UI_STATES: 'RESET_UI_STATES'
};

// 模拟EventBus
class MockEventBus {
    constructor() {
        this.listeners = new Map();
    }
    
    on(event, callback, context) {
        if (!this.listeners.has(event)) {
            this.listeners.set(event, []);
        }
        this.listeners.get(event).push({ callback, context });
    }
    
    emit(event, ...args) {
        console.log(`[EventBus] 触发事件: ${event}`);
        if (this.listeners.has(event)) {
            this.listeners.get(event).forEach(({ callback, context }) => {
                callback.call(context, ...args);
            });
        }
    }
    
    off(event, callback, context) {
        if (this.listeners.has(event)) {
            const listeners = this.listeners.get(event);
            const index = listeners.findIndex(l => l.callback === callback && l.context === context);
            if (index !== -1) {
                listeners.splice(index, 1);
            }
        }
    }
}

// 模拟UIOpacity组件
class MockUIOpacity {
    constructor() {
        this.opacity = 255;
    }
}

// 模拟Node
class MockNode {
    constructor(name, siblingIndex = 0) {
        this.name = name;
        this.active = true;
        this.siblingIndex = siblingIndex;
        this.scale = { x: 1, y: 1, z: 1 };
        this.position = { x: 0, y: 0, z: 0 };
        this.children = [];
        this.parent = null;
        this.components = new Map();
    }
    
    setScale(x, y, z) {
        this.scale = { x, y, z };
    }
    
    setPosition(x, y, z) {
        this.position = { x, y, z };
    }
    
    getComponent(componentClass) {
        return this.components.get(componentClass);
    }
    
    addComponent(componentClass) {
        const component = new componentClass();
        this.components.set(componentClass, component);
        return component;
    }
    
    getSiblingIndex() {
        return this.siblingIndex;
    }
    
    setSiblingIndex(index) {
        this.siblingIndex = index;
    }
    
    getNodeStatus() {
        return {
            name: this.name,
            active: this.active,
            siblingIndex: this.siblingIndex,
            scale: this.scale,
            position: this.position,
            opacity: this.getComponent(MockUIOpacity)?.opacity || 'N/A'
        };
    }
}

// 模拟GameEnd组件（重点关注实际问题）
class MockGameEnd {
    constructor(eventBus) {
        this.eventBus = eventBus;
        this.node = new MockNode('GameEnd', 2);
        this.animationDuration = 0.3; // 默认动画时长
        this.hasProcessedGameEnd = false;
        this.isVisible = false;
        this.animationCount = 0;
        this.debugMode = true;
        
        // 添加UIOpacity组件
        this.node.addComponent(MockUIOpacity);
        
        this.setupEventListeners();
        this.initializeHiddenStateKeepActive();
    }
    
    setupEventListeners() {
        console.log('[GameEnd] 设置事件监听器');
        this.eventBus.on(GameEvents.GAME_DEFEAT, this.onGameDefeat, this);
        this.eventBus.on(GameEvents.RESET_UI_STATES, this.onResetUI, this);
    }
    
    onGameDefeat() {
        console.log('\n=== GameEnd.onGameDefeat() 开始 ===');
        console.log('[GameEnd] 接收到GAME_DEFEAT事件');
        
        // 检查是否已处理过
        if (this.hasProcessedGameEnd) {
            console.log('[GameEnd] ⚠️  已处理过游戏结束，跳过重复处理');
            return;
        }
        
        console.log('[GameEnd] 开始处理游戏失败逻辑');
        
        // 记录处理状态
        this.hasProcessedGameEnd = true;
        
        // 调试：检查节点状态
        if (this.debugMode) {
            console.log('[GameEnd] 🔍 调试信息 - 处理前节点状态:');
            console.log('  - 节点激活:', this.node.active);
            console.log('  - 节点层级:', this.node.siblingIndex);
            console.log('  - 节点缩放:', this.node.scale);
            console.log('  - 透明度:', this.node.getComponent(MockUIOpacity)?.opacity);
            console.log('  - 动画时长:', this.animationDuration);
        }
        
        // 显示结算面板
        this.showEndPanelWithAnimation();
        
        console.log('=== GameEnd.onGameDefeat() 结束 ===\n');
    }
    
    showEndPanelWithAnimation() {
        console.log('[GameEnd] 🎬 开始显示结算面板动画');
        
        // 调试：检查动画前状态
        if (this.debugMode) {
            console.log('[GameEnd] 🔍 动画前状态检查:');
            console.log('  - animationDuration:', this.animationDuration);
            console.log('  - 节点激活状态:', this.node.active);
            console.log('  - 当前透明度:', this.node.getComponent(MockUIOpacity)?.opacity);
            console.log('  - 当前缩放:', this.node.scale);
        }
        
        // 确保节点激活
        if (!this.node.active) {
            this.node.active = true;
            console.log('[GameEnd] ✅ 激活GameEnd节点');
        }
        
        // 检查动画配置
        if (this.animationDuration <= 0) {
            console.log('[GameEnd] ⚠️  动画时长为0或负数，直接显示面板');
            this.directShow();
            return;
        }
        
        // 播放动画
        console.log(`[GameEnd] 🎭 开始播放动画，持续时间: ${this.animationDuration}秒`);
        this.playShowAnimation();
        
        this.animationCount++;
        this.isVisible = true;
        
        console.log('[GameEnd] ✅ 显示面板流程完成');
    }
    
    playShowAnimation() {
        console.log('[GameEnd] 🎯 执行显示动画');
        
        // 获取UIOpacity组件
        const uiOpacity = this.node.getComponent(MockUIOpacity);
        if (!uiOpacity) {
            console.error('[GameEnd] ❌ UIOpacity组件缺失！');
            return;
        }
        
        // 设置初始状态
        this.node.setScale(0.3, 0.3, 1);
        uiOpacity.opacity = 0;
        
        console.log('[GameEnd] 🎬 设置动画初始状态 - 缩放: 0.3, 透明度: 0');
        
        // 模拟动画执行
        setTimeout(() => {
            this.node.setScale(1, 1, 1);
            uiOpacity.opacity = 255;
            
            console.log('[GameEnd] ✨ 动画完成 - 缩放: 1, 透明度: 255');
            
            // 调试：检查最终状态
            if (this.debugMode) {
                console.log('[GameEnd] 🔍 动画完成后最终状态:');
                console.log('  - 节点激活:', this.node.active);
                console.log('  - 节点缩放:', this.node.scale);
                console.log('  - 透明度:', uiOpacity.opacity);
                console.log('  - 是否可见:', this.isVisible);
            }
        }, this.animationDuration * 1000);
    }
    
    directShow() {
        console.log('[GameEnd] 🚀 直接显示面板（无动画）');
        
        this.node.setScale(1, 1, 1);
        const uiOpacity = this.node.getComponent(MockUIOpacity);
        if (uiOpacity) {
            uiOpacity.opacity = 255;
        }
        
        this.isVisible = true;
        console.log('[GameEnd] ✅ 直接显示完成');
    }
    
    initializeHiddenStateKeepActive() {
        const uiOpacity = this.node.getComponent(MockUIOpacity) || this.node.addComponent(MockUIOpacity);
        uiOpacity.opacity = 0;
        this.node.setScale(0.3, 0.3, 1);
        console.log('[GameEnd] 🔧 初始化为隐藏状态（保持激活）');
    }
    
    onResetUI() {
        console.log('[GameEnd] 🔄 重置UI状态');
        this.hasProcessedGameEnd = false;
        this.isVisible = false;
        this.node.active = false;
    }
    
    getStatus() {
        return {
            animationCount: this.animationCount,
            isVisible: this.isVisible,
            hasProcessedGameEnd: this.hasProcessedGameEnd,
            nodeStatus: this.node.getNodeStatus()
        };
    }
}

// 模拟Wall组件
class MockWall {
    constructor(eventBus) {
        this.eventBus = eventBus;
        this.currentHealth = 100;
        this.maxHealth = 100;
    }
    
    takeDamage(damage) {
        this.currentHealth -= damage;
        console.log(`[Wall] 受到伤害: ${damage}, 剩余血量: ${this.currentHealth}`);
        
        if (this.currentHealth <= 0) {
            this.onWallDestroyed();
        }
    }
    
    onWallDestroyed() {
        console.log('\n🧱 [Wall] 墙体被摧毁！');
        console.log('[Wall] 即将触发GAME_DEFEAT事件');
        
        // 触发游戏失败事件
        this.eventBus.emit(GameEvents.GAME_DEFEAT);
        
        console.log('[Wall] GAME_DEFEAT事件已触发\n');
    }
}

// 测试函数
function testWallDefeatGameEndDisplay() {
    console.log('\n🎮 === 墙体血量为0时GameEnd显示测试 ===\n');
    
    const eventBus = new MockEventBus();
    const gameEnd = new MockGameEnd(eventBus);
    const wall = new MockWall(eventBus);
    
    console.log('📋 初始状态:');
    console.log('  - GameEnd状态:', gameEnd.getStatus());
    console.log('  - Wall血量:', wall.currentHealth);
    
    console.log('\n🎯 开始测试：让墙体血量归零...');
    
    // 模拟墙体受到致命伤害
    wall.takeDamage(100);
    
    // 等待动画完成
    setTimeout(() => {
        console.log('\n📊 测试结果:');
        const finalStatus = gameEnd.getStatus();
        console.log('  - 动画执行次数:', finalStatus.animationCount);
        console.log('  - 面板是否可见:', finalStatus.isVisible);
        console.log('  - 是否已处理游戏结束:', finalStatus.hasProcessedGameEnd);
        console.log('  - 节点最终状态:', finalStatus.nodeStatus);
        
        // 判断测试结果
        const success = finalStatus.animationCount === 1 && 
                       finalStatus.isVisible === true && 
                       finalStatus.hasProcessedGameEnd === true &&
                       finalStatus.nodeStatus.active === true &&
                       finalStatus.nodeStatus.opacity === 255;
        
        console.log('\n🏆 测试结论:', success ? '✅ 成功' : '❌ 失败');
        
        if (success) {
            console.log('🎉 墙体血量为0时GameEnd动画正常显示！');
        } else {
            console.log('⚠️  墙体血量为0时GameEnd动画显示异常！');
            console.log('🔍 可能的问题:');
            
            if (finalStatus.animationCount === 0) {
                console.log('  - 动画未执行：可能是事件监听器未正确注册');
            }
            if (!finalStatus.isVisible) {
                console.log('  - 面板不可见：可能是动画执行失败或被其他UI遮挡');
            }
            if (!finalStatus.hasProcessedGameEnd) {
                console.log('  - 未处理游戏结束：可能是onGameDefeat方法未被调用');
            }
            if (!finalStatus.nodeStatus.active) {
                console.log('  - 节点未激活：可能是节点状态被意外修改');
            }
            if (finalStatus.nodeStatus.opacity !== 255) {
                console.log('  - 透明度异常：可能是动画未正确执行或被重置');
            }
        }
        
        return success;
    }, 500); // 等待动画完成
}

// 对比测试：菜单退出vs墙体血量为0
function compareDefeatScenarios() {
    console.log('\n🔄 === 对比测试：菜单退出 vs 墙体血量为0 ===\n');
    
    // 测试1：菜单退出
    console.log('📱 测试1：菜单退出触发GAME_DEFEAT');
    const eventBus1 = new MockEventBus();
    const gameEnd1 = new MockGameEnd(eventBus1);
    
    eventBus1.emit(GameEvents.GAME_DEFEAT); // 直接触发
    
    setTimeout(() => {
        const status1 = gameEnd1.getStatus();
        console.log('  结果:', status1.isVisible ? '✅ 显示正常' : '❌ 显示异常');
        
        // 测试2：墙体血量为0
        console.log('\n🧱 测试2：墙体血量为0触发GAME_DEFEAT');
        const eventBus2 = new MockEventBus();
        const gameEnd2 = new MockGameEnd(eventBus2);
        const wall2 = new MockWall(eventBus2);
        
        wall2.takeDamage(100); // 通过Wall组件触发
        
        setTimeout(() => {
            const status2 = gameEnd2.getStatus();
            console.log('  结果:', status2.isVisible ? '✅ 显示正常' : '❌ 显示异常');
            
            // 对比结果
            console.log('\n📊 对比结果:');
            console.log('  菜单退出 - 动画次数:', status1.animationCount, '可见性:', status1.isVisible);
            console.log('  墙体血量0 - 动画次数:', status2.animationCount, '可见性:', status2.isVisible);
            
            const consistent = status1.isVisible === status2.isVisible && 
                             status1.animationCount === status2.animationCount;
            
            console.log('\n🎯 一致性检查:', consistent ? '✅ 一致' : '❌ 不一致');
            
            if (!consistent) {
                console.log('⚠️  发现不一致！这可能解释了为什么墙体血量为0时动画不显示。');
                console.log('🔍 建议检查:');
                console.log('  1. Wall组件的事件触发时机');
                console.log('  2. EventBus实例是否一致');
                console.log('  3. 是否有其他组件在Wall触发事件后干扰GameEnd');
            }
        }, 500);
    }, 500);
}

// 运行测试
console.log('🚀 开始实时GameEnd调试测试...');
testWallDefeatGameEndDisplay();

setTimeout(() => {
    compareDefeatScenarios();
}, 1500);

console.log('\n💡 如果测试显示正常但实际游戏仍有问题，请检查:');
console.log('  1. Cocos Creator编辑器中GameEnd节点的animationDuration属性');
console.log('  2. GameEnd节点在Canvas中的层级位置（siblingIndex）');
console.log('  3. 是否有其他UI组件在运行时修改GameEnd节点状态');
console.log('  4. EventBus实例在实际游戏中是否一致');
console.log('  5. 动画系统在实际环境中的表现');