Наследованный класс выдаёт NaN

Web Frontend: JavaScript, HTML/CSS
#1

Файл ball.js

export class Ball {
    constructor(x, y, radius, color) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.color = color;
    }

    draw(deviceContext, fill) {
        deviceContext.beginPath();
        deviceContext.arc(this.x, this.y, this.radius, 0, 6.28, false);
        if (fill)
        {
            deviceContext.fillStyle = this.color;
            deviceContext.fill();
        } else {
            deviceContext.strokeStyle = this.color;
            deviceContext.stroke();
        }
    }

    setDirection(dirX, dirY) {
        this.dirX = dirX;
        this.dirY = dirY;
    }

    move() {
        this.x += this.dirX;
        this.y += this.dirY;
    }

    bounds(minX, minY, maxX, maxY) {
        if (this.x < minX) {
            this.x = minX;
            this.dirX *= -1;
        } else if (this.x > maxX) {
            this.x = maxX;
            this.dirX *= -1;
        }

        if (this.y < minY) {
            this.y = minY;
            this.dirY *= -1;
        } else if (this.y > maxY) {
            this.y = maxY;
            this.dirY *= -1;
        }
    }
}

файл ballRainbow.js

import { Ball } from "./ball.js";

export class BallRainbow extends Ball {
    constructor(x, y, radius, color, count) {
        super(x, y, radius, color);
        this.count = count;
        console.log(this.x, this.y, this.radius, this.color, this.count);
    }

    draw(deviceContext, fill) {
        console.log(this.x, this.y, this.radius, this.color, this.count);
    }
}

В конструкторе класса BallRainbow значения this.x и this.y выдаются правильные, а в методе draw выдаёт NaN :man_shrugging:
Не пойму, в чем проблема :thinking: radius color count правильно же выдаёт.

#2

О, прикольно. Вызвал метод setDirection и заработало! :dizzy_face: Это как вообще? :thinking:

#3

Может в коде создания что-то странное?

Всё работает https://jsfiddle.net/Lpyvkd6r/

#4

А что может быть странного? :thinking:
Я чуток отрефакторил:

function setBalls(count) {
    for (let i = 0; i < count; ++i) {
        let xPos = randomRange(0, canvasWidth);
        let yPos = randomRange(0, canvasHeight);
        let xDir;
        let yDir;
        do {
            xDir = randomRange(-5, 5);
            yDir = randomRange(-5, 5);
        } while (xDir < 0.1 && yDir < 0.1);

        let radius = Math.round(randomRange(5, 30));
        let colorId = Math.round(randomRange(0, colors.length - 1));

        let multiColored = randomRange(0, 100) < 50;
        let ball;
        if (multiColored) {
            const colorCount = colors.length;
            let ballColors = [];
            for (let i = 0; i < colorCount; ++i) {
                const cororId = Math.floor(Math.random() * (colors.length - 1));
                ballColors.push(colors[cororId]);
            }
            ball = new Ball(xPos, yPos, radius, ballColors);
        } else {
            ball = new Ball(xPos, yPos, radius, [colors[colorId]]);
        }

        ball.setDirection(xDir, yDir);

        let rotation = randomRange(-0.25, 0.25);
        ball.setRotattionSpeed(rotation);

        balls.push(ball);
    }
}

Если не вызывать setDirection - не работает.

Не открывается. Ни с VPN, ни без него :man_shrugging:

#5

Тут вообще нет того наследования и вызова draw.

А так тоже всё работает.
https://replit.com/@AlexP11223/balls#script.js
https://balls–alexp11223.repl.co/

#6

не понял

Я не стал его постить потому что это и так понятно. Вызываем draw и получаем NaN вместо x и y.

Чёта странная фигня какая-то :thinking:

#7

Ну про наследование же был вопрос, а в коде выше Ball это базовый класс.

#8

А почему его нет? :thinking: Есть же.

#9

Ну Ball же не наследует ничего, а BallRainbow тут не используется.

#10

А, блин, точно :man_facepalming: Я же его при рефакторинге выпилил.
Но проблема осталась. До инициализации dirX dirY, x и y не видны (выдают NaN в draw()).
Я, просто, изначально этого не знал и подумал, что это как-то с наследованием связано.