Переменные подкласса не определены - js - PullRequest
Новая
       16

Переменные подкласса не определены - js

0 голосов
/ 01 мая 2020

Я программирую игру, и у меня возникают проблемы с переменными и наследованием, всякий раз, когда я пытаюсь получить к ним доступ в унаследованном классе, они появляются как undefined. Я пытался использовать super, чтобы помочь с проблемой, но это не сработало, это может быть потому, что я относительно новичок в JavaScript.

Переменные работают в базовом классе, но не работают в подклассе. Это унаследованный класс Это Базовый класс .

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

Код более четкий на картинках. 

class charachter {

    constructor(xPos, yPos) {
        this.rightVelocity = 0;
        this.leftVelocity = 0;
        this.upVelocity = 0;
        this.downVelocity = 0;
        this.xyCordsRaw = [xPos, yPos];
        this.xyCordsBlock = [Math.round(this.xyCordsRaw[0] / 50),
            Math.round(this.xyCordsRaw[1] / 100)
        ]
    }

    updateCharachter() {
        ctx.drawImage(charachterRight, this.xyCordsRaw[0],
            this.xyCordsRaw[1])
    }

    findTileStandingOnType() {
        return
        solidObjects.includes(biome[this.xyCordsBlock[1] + 1][this.xyCordsBlock[0]])
    }

    isOnTheGround() {
        return this.findTileStandingOnType() == true &&
            this.xyCordsRaw[1] == (this.xyCordsBlock[1] * 100) + 25
    }

    isTileAbove() {
        return solidObjects.includes(biome[this.xyCordsBlock[1] - 1]
            [this.xyCordsBlock[0]])
    }

    isTouchingTileAbove() {
        return this.isTileAbove() == true && this.xyCordsBlock[1] * 100 == this.xyCordsRaw[1]
    }

    isWallLeft() {
        return solidObjects.includes(biome[this.xyCordsBlock[1]][this.xyCordsBlock[0] - 1])
    }

    isWallRight() {
        return solidObjects.includes(biome[this.xyCordsBlock[1]][this.xyCordsBlock[0] + 1])
    }

    isTouchingWallRight() {
        return this.isWallRight() == true && this.xyCordsBlock[0] * 50 == this.xyCordsRaw[0]
    }

    isTouchingWallLeft() {
        return this.isWallLeft() == true && this.xyCordsBlock[0] * 50 == this.xyCordsRaw[0]
    }
}

class playerChar extends charachter {

    constructor(xPos, yPos, leftVelocity, rightVelocity, upVelocity, downVelocity, xyCordsRaw, xyCordsBlock) {
        super(xPos, yPos, leftVelocity, rightVelocity, upVelocity, downVelocity, xyCordsRaw, xyCordsBlock);
        document.addEventListener('keydown', this.takeInput);
    }

    takeInput(e) {
        if (e.code == 'KeyA') {
            console.log(this.leftVelocity);
        }
        if (e.code == 'KeyW') {
            console.log("The letter W was pressed");
        }
        if (e.code == 'KeyD') {
            console.log(this.xyCordsRaw);
        }
    }
}

var player = new playerChar(150, 325);

1 Ответ

0 голосов
/ 01 мая 2020

Непосредственной проблемой, которая возникает, является использование this в прослушивателях событий. 

document.addEventListener('keydown', this.takeInput);

передает ссылку на функциональный объект takeInput при вызове addEventListener, и, поскольку это обработчик событий document, takeInput будет иметь значение this document когда звонили. Попробуйте 

document.addEventListener('keydown', this.takeInput.bind(this));

, чтобы увидеть, в чем разница.

Следующая исправляемая ошибка - перевод строки после return в 

findTileStandingOnType(){
return 
solidObjects.includes(biome[this.xyCordsBlock[1]

Это должно быть 

findTileStandingOnType(){
return solidObjects.includes(biome[this.xyCordsBlock[1] + 1][this.xyCordsBlock[0]])}

Операторы возврата без разделителя точки с запятой продолжаются только на следующей строке, если это будет синтаксической ошибкой, если они этого не сделали. Это не тот случай.

...