CODEWITHSUNDEEP
javascripthtmlecmascript-6
Cowmoogun
Cowmoogun

Reputation: 2567

ES6 class methods not a function

I'm messing around with Javascript "classes" and I have a paddle that has a proper method to draw, but for some reason my moveBall function is messed up. Could anyone point out why? I get an error saying that moveBall() is not a function.

Edit: I included some more code, I call init() to start it all.

class Ball {
    constructor(x, y, r, sAngle, rAngle) {
        this.x = x;
        this.y = y;
        this.r = r;
        this.sAngle = sAngle;
        this.rAngle = rAngle;
        this.speed = null;
    }

    drawBall() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, this.sAngle, this.rAngle);
        ctx.fillStyle = "#FF0000";
        ctx.fill();
    }
    moveBall() {
        this.x += this.speed;

    }

}


function init() {
    var  ball = new Ball(c.height / 2, c.width / 2, 10, 0, 2 * Math.PI);
    var paddleLeft = new Paddle(0, 0, 20, 100);
    ball.ballPhysics = 1.0;
    draw(ball, paddleLeft);
    main(ball);
}


window.main = function (ball) {
    window.requestAnimationFrame(main);
    ball.moveBall();
    window.onload = function () {
    document.addEventListener('keydown', function (event) {
        if (event.keyCode === 65) {

        }
    }, false);
}

};

Upvotes: 6

Views: 23108

Answers (3)

Felix Kling
Felix Kling

Reputation: 816334

You define main to accept an argument ball. But you are never calling main, so you cannot pass an argument to it.

While window.requestAnimationFrame(main); will call the function, it won't pass anything to it.

It seems you want to refer to the ball variable that is defined inside init. In that case, remove the parameter ball from the function definition so that it doesn't shadow that variable:

window.main = function() { ... };

You also don't want to assign to window.onload inside main, because that wouldn't happen over and over again.

Upvotes: 1

Ammar Hasan
Ammar Hasan

Reputation: 2516

If you are using it like Ball.moveBall() than it's incorrect, you must instantiate Ball class first or use static methods like

class A {
 static f() {
 }
}

and call like

A.f();

otherwise check the snippet below

class Ball {
  constructor(x, y, r, sAngle, rAngle) {
    this.x = x;
    this.y = y;
    this.r = r;
    this.sAngle = sAngle;
    this.rAngle = rAngle;
    this.speed = null;
  }

  drawBall() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.r, this.sAngle, this.rAngle);
    ctx.fillStyle = "#FF0000";
    ctx.fill();
  }
  moveBall() {
    this.x += this.speed;

  }
}

var greenBall = new Ball(0, 0 , 10, 0, 0);

greenBall.speed = 5;

greenBall.moveBall();

document.write(greenBall.x);

Upvotes: 4

Byren Higgin
Byren Higgin

Reputation: 562

make sure you have an instance of ball in the scope of the code you are trying to run, and try var moveball = function(){this.x += this.speed; }; to see if it's a compile issue, and make sure you are accessing it like ball.moveball()

Upvotes: 1

Related Questions