Phaser TypeScript函数不会启动答案

【问题标题】：Phaser Typescript function don't launchPhaser TypeScript函数不会启动
【发布时间】：2016-12-21 15:57:47
【问题描述】：

我正在尝试使用 Phaser.io 制作一个小型 HTM5 游戏。

我有一个无法解决的小问题。

在我的 MainClass（游戏）中，我只想创建一个循环，该循环将创建一个新对象（一枚硬币）并将其添加到一个组中。

但我不知道为什么，我调用的那个小函数永远不会启动。

这是我的代码：

  create() {

    //coins group
    this.coins = this.game.add.group;



    //set background
    this.game.stage.backgroundColor = "#00F6FA";
    //load the map
    this.map = this.game.add.tilemap('level', 195, 195, 2, 4);
    this.map.addTilesetImage('free-2d-game-tiles-post-pic-1', 'tiles');
    //load collision layer
    this.layer = this.map.createLayer('collision');
    //this.layer.debug = true;
    //make the layer collide  
    this.map.setCollisionBetween(8, 9, true, this.layer.index, true);
    //enable physics
    this.game.physics.startSystem(Phaser.Physics.ARCADE);
    //set the player
    this.player = new Player(this.game, 0, 0);


    this.game.time.events.repeat(Phaser.Timer.SECOND * 2, 10, this.createCoin, this);
}

就在后面：

    createCoin(): void {
    /*

    generate a coin

    */
    console.log('test');

}

很简单，但什么都不会发生。

你看到我想念什么了吗？

编辑 1：

好的，这是我在 Github 上的代码：

https://github.com/c4n4r/coinFall/blob/master/JS/app.ts

我还是不知道怎么了……

【问题讨论】：

标签： html typescript phaser-framework

【解决方案1】：

很少。首先，我们需要完整的代码：如何创建游戏以及如何应用创建函数？其次，this 是动态绑定的。要将其绑定到您的对象，您可以使用例如粗箭头语法：createCoin = () => { ... }。看看你的this（创建方法中的console.log(this)）——这不是你所期望的:)

看一下工作示例：

export default class SimpleGame {
    private game;

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

    //Used by Phaser to create real game - prepare it. Use fat arrow syntax here!
    create = () => {
        this.someInternalMethod();
    }

    //This is ok to make it as normal method, as only bounded this ( create) use it
    private someInternalMethod(){
        //Ok!
    }
}

查看我的源代码（TS & Phaser 中的简单游戏）了解更多信息：https://github.com/Ami777/AmyInSpace

更多关于 TS 中的胖箭头：https://basarat.gitbooks.io/typescript/content/docs/arrow-functions.html

更多关于 ES6 中这种语法的信息：https://www.sitepoint.com/es6-arrow-functions-new-fat-concise-syntax-javascript/。

问候，Jakub Król。

【讨论】：

感谢您的宝贵时间，这是我的完整代码：github.com/c4n4r/coinFall/blob/master/JS/app.ts，也许我对 TS 缺乏了解，但我仍然不明白...
@HadrienDelphin 是的，你的代码和我的评论是有效的。只需将preload、render、create 和update 定义更改为methodName => ()。例如preload => () { 等，它将起作用:)

【解决方案2】：

实际上我会推荐使用Phaser.State，我认为这会让事情变得更容易一些。然后你可以在 TypeScript 中使用 extends 关键字，如下所示：

class SimpleGame extends Phaser.State {

    // define your properties for SimpleGame
    coins: Phaser.Group;
    //game: Phaser.Game; // <- not needed! SimpleGame extends Phaser.State
    map: Phaser.Tilemap;
    // etc

    // define methods for SimpleGame
    create() {
        //.. create code here
        this.coins = this.add.group();

        // 'this' extends type Phaser.State, so notice you can use this.time:
        this.time.events.repeat(Phaser.Timer.SECOND * 2, 10, this.createCoin, this);
    }

    update() {
        //.. update code here
    }

    createCoin() {
        //.. create a coin
        var newCoin = new Banana(this, this.world.randomX, 0)
        this.coins.add(newCoin)
    }
}

【讨论】：