/** * 实时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. 动画系统在实际环境中的表现');