Launch Phaser game

Question

i'm new to javascript/typescript and i'm trying to learn it while building a simple game with Phaser. I'm stuck at launching the game instance: when i create it as in the first example on phaser website, it starts, but if i create the game object inside a function called on a form submit, it starts but ends immediately; here is the code:

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
            });
    }
    ...
    ...
}

It's like if the game object were destroyed each time the function submitForm() returns.

Answer 1

The problem is the form submit. If you pull up developer tools in your browser of choice you'll see that the form is effectively POSTing back to the page, causing a refresh.

One solution is to update your form element in index.html as follows:

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

The return false; will prevent the POST.

If you don't need the form to actually POST any data, you could probably remove the submit type and hook up an event on the button itself.