Question

在使用Phaser开发JavaScript期间，我遇到了问题。我尝试在类的方法内调用方法，但是出现错误。

这是我的课程：

import Enemy from '../classes/Enemy';
import Turret from '../classes/Turret';
import Bullet from '../classes/Bullet';


class GameScene extends Phaser.Scene {

    constructor() {
        super({
            key: 'GameScene'
        });
    }

    preload()
    {
        this.load.image('turret', './www/assets/tour_simple.png');
    }

    drawGrid(graphics)
    {
        graphics.lineStyle(1, 0x0000ff, 0.8);
        for(var i = 0; i < 8; i++)
        {
            graphics.moveTo(0, i * 64);
            graphics.lineTo(640, i * 64);
        }
        for(var j = 0; j < 10; j++)
        {
            graphics.moveTo(j * 64, 0);
            graphics.lineTo(j * 64, 512);
        }
        graphics.strokePath();
    }

    canPlaceTurret(i, j)
    {
        return this.map[i][j] === 0;
    }

    placeTurret(pointer)
    {
        var i = Math.floor(pointer.y/64);
        var j = Math.floor(pointer.x/64);
        if(this.canPlaceTurret(i, j)) {
            var turret = this.turrets.get();
            if (turret)
            {
                turret.setActive(true);
                turret.setVisible(true);
                turret.place(i, j);
            }
        }
    }

    damageEnemy(enemy, bullet)
    {
        // only if both enemy and bullet are alive
        if (enemy.active === true && bullet.active === true) {
            // we remove the bullet right away
            bullet.setActive(false);
            bullet.setVisible(false);

            //todo mettre dans une classe constante
            var BULLET_DAMAGE = 25;
            // decrease the enemy hp with BULLET_DAMAGE
            enemy.receiveDamage(BULLET_DAMAGE);
        }
    }



    create() {
        this.add.text(200, 230, 'good!', { fill: '#0f0' });

        var graphics = this.add.graphics();

        this.map = [[ 0,-1, 0, 0, 0, 0, 0, 0, 0, 0],
            [ 0,-1, 0, 0, 0, 0, 0, 0, 0, 0],
            [ 0,-1,-1,-1,-1,-1,-1,-1, 0, 0],
            [ 0, 0, 0, 0, 0, 0, 0,-1, 0, 0],
            [ 0, 0, 0, 0, 0, 0, 0,-1, 0, 0],
            [ 0, 0, 0, 0, 0, 0, 0,-1, 0, 0],
            [ 0, 0, 0, 0, 0, 0, 0,-1, 0, 0],
            [ 0, 0, 0, 0, 0, 0, 0,-1, 0, 0]];

        //TODO creer une classe qui dessine le path
        // the path for our enemies
        // parameters are the start x and y of our path
        this.path = this.add.path(96, -32);
        this.path.lineTo(96, 164);
        this.path.lineTo(480, 164);
        this.path.lineTo(480, 544);

        graphics.lineStyle(3, 0xffffff, 1);
        // visualize the path
        this.path.draw(graphics);

        this.enemies = this.physics.add.group({ classType: Enemy, runChildUpdate: true });

        this.nextEnemy = 0;

        var graphics = this.add.graphics();
        this.drawGrid(graphics);

        this.turrets = this.add.group({ classType: Turret, runChildUpdate: true });
        this.input.on('pointerdown', this.placeTurret);

        this.bullets = this.physics.add.group({ classType: Bullet, runChildUpdate: true });

        this.physics.add.overlap(this.enemies, this.bullets, this.damageEnemy);
    }

    update(time, delta) {
        if (time > this.nextEnemy)
        {
            var enemy = this.enemies.get();
            console.log(enemy);
            if (enemy)
            {
                enemy.setActive(true);
                enemy.setVisible(true);
                // place the enemy at the start of the path
                enemy.startOnPath();

                this.nextEnemy = time + 2000;
            }
        }
    }


}

export default GameScene;

在我的游戏中发生错误：

TypeError：this.canPlaceTurret不是函数

错误来自我称为placeTurret方法的canPlaceTurret方法。

我尝试了一些操作，例如向类self = this;添加属性，并使用self.canPlaceTurret调用我的函数，但始终存在问题。我认为这是一个范围问题，但我不知道如何解决。

另一个重要信息：我们正在使用Webpack

感谢您的阅读：）。

Answer 1

尝试更换：

this.input.on('pointerdown', this.placeTurret);

具有：

this.input.on('pointerdown', pointer => this.placeTurret(pointer));

（在下面的评论中稍作修改）

基本上，当您将方法作为回调传递时，它将成为一个简单的函数引用。稍后再调用该函数时，this不会引用您期望的类实例，因为不再在您的类的上下文中调用它。

通过使用粗箭头语法，您可以创建一个特定的回调，然后明确地告诉它在当前上下文中（例如，在定义所述回调时）调用该方法this。 / p>

或者，您也可以执行以下操作：

this.input.on('pointerdown', this.placeTurret.bind(this));

这不会创建新的匿名函数，而是将您的方法作为参考（就像开始时所做的那样），而是将当前的this手动绑定到该方法。

有关详细说明，请参阅this post。

Answer 2

在调用canPlaceTurret（）时，在您的placeTurret（）方法中完全不使用 this 关键字是否行得通？

 placeTurret(pointer)
        {
            var i = Math.floor(pointer.y/64);
            var j = Math.floor(pointer.x/64);
            if(canPlaceTurret(i, j)) {
                var turret = this.turrets.get();
                if (turret)
                {
                    turret.setActive(true);
                    turret.setVisible(true);
                    turret.place(i, j);
                }
            }
        }

Javascript：Phaser在另一个方法类中调用一个方法

2 个答案: