javascript - 了解示例 Phaser 游戏代码

Question

所以我偶然发现了一些在 Phaser 的 html 5 游戏引擎上运行的示例游戏代码。下面是示例代码

var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });

function preload() {
    game.load.image('someKey','someUrl');

}

function create() {
}

function update() {
}

我正在尝试弄清楚 Phaser 如何通过引用函数声明和添加图像(例如，通过变量向对象添加图像)来完成向游戏对象传递函数(预加载、创建和更新)名称为“游戏”。上面提供的示例是我在网络上普遍看到的(或至少类似的东西)。

下面，我开始研究自己的游戏引擎(为了好玩)，以模仿 Phaser 并了解他们的思考过程。不幸的是，我无法成功实现与上述相同的效果。

我的 Engine.js(Phaser 山寨文件)

function Game(holderId,canvasOptions,functionDeclarations){
    this.test="testing";
    functionDeclarations.init();//this does not work :( because game in init() is undefined.
}

我的 Main.js

var game= new Game("canvas-holder",{width:1500,height:600, unit:"px"},{init:init,core:core,update:update});

function init(){
    console.log(game.test);//game is undefined. Seems like a scope issue
}

我觉得这是一个范围界定问题。我尝试查看 Phaser 的源代码，但它包含 97k 行，并且 ctrl+f 没有帮助。

Answer 1

传递给 Phaser 构造函数的对象是游戏状态。查看 Phaser 存储库中的 src/core/State.js 以获取示例状态文件，以及关于每个函数和属性的作用的描述。

我怎么说都不为过:永远不要试图通读一个单独的 phaser.js 文件!取而代之的是检查 repo 并一个一个地检查文件。它们在逻辑上和理智的结构中，并且更容易遵循路径。

创建 Phaser 游戏后，它会等待 DOM Ready 事件。只有当它收到时，它才会开始遍历 State 对象，依次调用函数。这就是为什么您可以在 preload 函数中引用 game 而不会出现范围错误的原因，因为在它被调用时，它已经存在。

在上面的示例中(以及所有在 Phaser 示例站点上找到的示例)game 被创建为全局 JS 对象。我们这样做纯粹是为了使示例代码不那么冗长，并且易于摆弄。但在生产级别的游戏中，您实际上很少这样做。查看 Phaser 存储库，项目模板中的“资源”文件夹，那里有结构更好的替代方案。