Question

我是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()返回时游戏对象都被销毁一样。

Answer 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。

如果您不需要表单实际发布任何数据，您可能会删除提交类型并在按钮本身上挂起事件。

发射Phaser游戏

的index.html

app.ts

game.ts

1 个答案: