了解示例移相器游戏代码

Posted 2023-03-15

【中文标题】了解示例移相器游戏代码

【英文标题】：Understanding Example Phaser Game Code

【发布时间】：2016-06-01 12:03:33

【问题描述】：

所以我偶然发现了一些在 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 并了解他们的过程。不幸的是，我无法成功实现如上所示的相同效果。

我的 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没有任何帮助。

【问题讨论】：

我无法启动任何示例，也无法使用任何其他 html 文件 ....

【参考方案1】：

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

我说的再多也不过分：永远不要试图通读一个单一的 phaser.js 文件！而是签出 repo 并一一浏览文件。它们的结构合乎逻辑且理智，并且更容易遵循路径。

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

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

【参考方案2】：

在您的代码中，init 使用 game。 game 由 Game 构造函数定义，它试图在完成之前调用init（因此，在分配game 之前）。这会导致循环依赖，在init 调用期间game 将是undefined。

解决此问题的一种方法是延迟init 的执行。使用setTimeout(functionDeclarations.init, 0) 而不是直接调用init，您将完成构造函数，将正确的值分配给game 并执行您的JS 文件中可能存在的任何其他内容。完成所有操作后，init 将被调用，每个人都会很高兴。

【讨论】：

不会因为第二个参数为 0 而不断调用 init() 函数吗？ setTimeout 不会重复调用函数吗？

@alaboudi 不，那是setInterval。 setTimeout 只执行一次函数。

哦该死，我的错。谢谢你，先生。我将保持这个问题开放一段时间，只是为了看看其他答案。话虽如此，我对你的回答做了一些谷歌搜索。我从不知道您可以将内容添加到队列中。很好的建议