Вызов методов объекта в Javascript

Question

У меня практически нет опыта в JS (я в основном программирую на C #).Я пытаюсь создать случайное расположение кругов (звезд) на холсте html5, и у меня они движутся со случайной скоростью x и y.Я создал класс Star, чтобы создать многие из этих объектов и манипулировать ими, но когда я вызываю метод Update(), я получаю следующую ошибку TypeError:

TypeError: Cannot read property 'Update' of undefined at animate (file:///F:/Code/Website/main.js:67:20) at file:///F:/Code/Website/main.js:71:1

Воткод, который выдает ошибку:

//Circle object
class Star 
{
    constructor(X, Y, VX, VY, R) 
    {
        this.x = X;
        this.y = Y;
        this.vx = VX;
        this.vy = VY;
        this.r = R;
    }

draw() {
    c.beginPath();
    c.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
    c.strokeStyle = "blue";
    c.stroke();
};

Update() {
    if (this.x + this.r > pageWidth || this.x - this.r < 0) {
        this.vx = -this.vx;
    }

    if (this.y + this.r > pageHeight || this.y - this.r < 0) {
        this.vy = -this.vy;
    }

    //add velocity
    this.x += this.vx;
    this.y += this.vy;

    this.draw();
};


}

for (var i = 0; i < 50; i++) {
    var x = Math.random() * canvas.width;
    var y = Math.random() * canvas.height;
    var vx = Math.random();
    var vy = Math.random();
    var radius = 30;
    let star = new Star(x, y, vx, vy, radius);
    starArr.push(star);
}
console.log(starArr);

function animate() {
    "use strict";
    window.requestAnimationFrame(animate);

    c.clearRect(0, 0, pageWidth, pageHeight);

    for (var j = 0; j < starArr.length; j++); {
        starArr[j].Update();
    }
}

animate();

Answer 1

В цикле for есть опечатка, вызывающая метод Update: лишняя точка с запятой;for (var j = 0; j < starArr.length; j++); {

const canvas = document.querySelector("canvas");
const c = canvas.getContext("2d");
let pageWidth = canvas.width = window.innerWidth;
let pageHeight = canvas.height = window.innerHeight;
let starArr = []

//Circle object
class Star{
constructor(X, Y, VX, VY, R){
        this.x = X;
        this.y = Y;
        this.vx = VX;
        this.vy = VY;
        this.r = R;
    }

draw() {
    c.beginPath();
    c.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
    c.strokeStyle = "blue";
    c.stroke();
};

Update() {
    if (this.x + this.r > pageWidth || this.x - this.r < 0) {
        this.vx = -this.vx;
    }

    if (this.y + this.r > pageHeight || this.y - this.r < 0) {
        this.vy = -this.vy;
    }

    //add velocity
    this.x += this.vx;
    this.y += this.vy;

    this.draw();
};


}

for (var i = 0; i < 50; i++) {
    var x = Math.random() * canvas.width;
    var y = Math.random() * canvas.height;
    var vx = Math.random();
    var vy = Math.random();
    var radius = 30;
    let star = new Star(x, y, vx, vy, radius);
    starArr.push(star);
}


function animate() {
    //"use strict";
    window.requestAnimationFrame(animate);

    c.clearRect(0, 0, pageWidth, pageHeight);

    for (var j = 0; j < starArr.length; j++) {
        starArr[j].Update();
    }
}

animate();

<canvas></canvas>