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

1

Я сталкиваюсь с проблемой во время разработки 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;

И во время моей игры возникает ошибка:

Ошибка типа: this.canPlaceTurret не является функцией

Ошибка происходит из метода placeTurret где я canPlaceTurret метод canPlaceTurret.

Я пробовал некоторые вещи, такие как добавление атрибута в мой класс: self = this; и вызвать мою функцию с помощью self.canPlaceTurret но всегда есть проблема. Я думаю, что это проблема масштаба, но я не знаю, как ее решить.

Еще одна важная информация: мы используем Webpack

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

Теги:
class
methods
phaser

1 ответ

1
Лучший ответ

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

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

с:

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

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

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

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

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

  • 1
    Да, это было так! Большое спасибо. Просто я должен заменить на это: this.input.on('pointerdown', (pointer) => this.placeTurret(pointer)); Потому что мне нужен объект-указатель для функции :)
  • 1
    @Buisson. Ах да, я действительно пропустил этот параметр. Рад помочь!
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню