Calling object methods in Javascript

Question

I have practically no experience in JS (I mostly program in C#). I'm trying to create a random layout of circles (stars) in an html5 canvas and I have them moving at a random x and y velocity. I created a Star class to make many of these objects and manipulate them, but when I call the Update() method, I receive this 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

Here is the code that is throwing the error:

//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();

enxaneta · Accepted Answer · 2018-10-01 22:30:03Z

2

You have a typo at the for loop that calls the Update method: an extra semicolon ; 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>

answered Oct 1, 2018 at 22:30

enxaneta

33.2k6 gold badges33 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Zach R Over a year ago

Ahhh I feel incredibly dumb now haha, thanks for catching that!

Mark Over a year ago

Nice catch … I stared at that for minutes and couldn't see it.

Collectives™ on Stack Overflow

Calling object methods in Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related