开发者问题收集

启动 Phaser 游戏

2016-02-20
235

我是 javascript/typescript 的新手,我正在尝试在使用 Phaser 构建一个简单的游戏时学习它。我在启动游戏实例时遇到了困难:当我像 Phaser 网站上的第一个示例一样创建它时,它会启动,但如果我在表单提交时调用的函数内创建游戏对象,它会启动但立即结束;代码如下:

index.html

<form class="well" onsubmit="submitForm()">
    ...
    ...
    <button type="submit" class="btn btn-primary">Play</button>
</form>

app.ts

var game: SimpleGame;

function submitForm() {
    console.log('Form submitted');
    game = new SimpleGame();
}

game.ts

class SimpleGame {

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

这就像每次函数 submitForm() 返回时游戏对象都会被销毁一样。

1个回答

问题在于表单提交。如果您在所选浏览器中打开开发人员工具,您将看到表单有效地 POST 回页面,从而导致刷新。

一种解决方案是更新 index.html 中的 form 元素,如下所示:

<form class="well" onsubmit="submitForm(); return false;">
    // ...
    <button type="submit" class="btn btn-primary">Play</button>
</form>

return false; 将阻止 POST。

如果您不需要表单实际 POST 任何数据,您可以删除提交类型并在按钮本身上挂接事件。

James Skemp
2016-02-20