如何从DOM触发Phaser 3事件？调用场景方法遇未定义错误

问题根源 #

game.scene.keys.MainScene存储的是场景的注册键名/配置信息，并非实例化后的场景对象，所以直接调用scene.greeting()会报"Cannot read properties of undefined"错误。

正确解决方案 #

1. 获取实例化的场景对象 #

使用Phaser提供的game.scene.get('场景键名')方法，获取已激活的场景实例：

const scene = game.scene.get('MainScene');

如果场景未启动，先调用game.scene.start('MainScene')启动场景，再获取实例。

2. 验证场景状态 #

在控制台先执行以下命令，确认场景已激活：

game.scene.isActive('MainScene'); // 返回true表示场景已启动

3. 确保场景类中存在目标方法 #

检查你的MainScene类，确保greeting方法已正确定义，且构造函数的super参数与配置中的场景键名一致：

class MainScene extends Phaser.Scene {
    constructor() {
        super('MainScene'); // 这里的键名必须和config中的场景键对应
    }

    greeting() {
        console.log('场景方法被触发');
    }

    // 其他场景逻辑...
}

4. 完整调用示例 #

控制台测试或DOM触发的完整代码：

// 从控制台调用
const scene = game.scene.get('MainScene');
if (scene) {
    scene.greeting();
} else {
    console.error('MainScene未找到或未启动');
}

// DOM按钮触发示例
// HTML：<button onclick="callSceneGreeting()">调用场景方法</button>
function callSceneGreeting() {
    const scene = game.scene.get('MainScene');
    scene?.greeting(); // 使用可选链避免报错
}

内容的提问来源于stack exchange，提问作者Neffer Barragan