Javascript: Phaser вызов метода внутри другого класса метода - PullRequest
Новая
       10

Javascript: Phaser вызов метода внутри другого класса метода

0 голосов
/ 23 декабря 2018

Я сталкиваюсь с проблемой при разработке javascript с помощью Phaser.Я пытаюсь вызвать метод внутри метода класса, но у меня есть ошибка.

Вот мой класс: 

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

Спасибо за чтение :).

1 Ответ

0 голосов
/ 23 декабря 2018

Попробуйте заменить: 

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

на: 

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

(слегка отредактировано после вашего комментария ниже)

В основном, когда выпередать ваш метод в качестве обратного вызова, он становится простой ссылкой на функцию.Когда эта функция вызывается позже, this не будет ссылаться на ожидаемый экземпляр класса, поскольку он больше не вызывается в контексте вашего класса.

Используя синтаксис жирной стрелки, вы создаетевместо этого конкретный обратный вызов и явно указывает ему вызывать метод в контексте текущего (например, в то время, когда этот обратный вызов определен) this.

В качестве альтернативы, вы также можете сделать: 

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

Вместо создания новой анонимной функции, этот метод использует ваш метод в качестве ссылки (как это было вначале), но вручную привязывает к нему текущий this.

Пожалуйста, обратитесь этот пост для более подробного объяснения.

...