Accessing Class properties returns "Undefined"

Question

I'm trying to create a simple game using the paper.js library to achieve crisp results on all displays by leveraging it's vector drawing framework.

The basic game logic is that the user has to move the "worm" towards the balls within a certain time or they disappear, every time a ball is "hit" or "collected" by the worm then the ball disappears and a new one is generated elsewhere on the screen, thus allowing for more points to be gained.

I've managed to get a prototyped method firing on each ball when the worm hits it, but I'm struggling to manipulate the balls size when it happens.

See the working example here http://goo.gl/uNcl5y

The distance is checked using the method below and within this method the "destruct" (or when the ball should shrink to a radius of zero) is called within it:

Ball.prototype = {
    checkCollision: function(linepoint, ball) {

       var dist = this.point.getDistance(linepoint);

       if (dist <= this.radius) {
           this.destruct(ball);
       }
    },
    destruct: function(ball) {
        console.log(ball.bounds.width); //returns undefined
    }
}

This is called using Paper.js onFrame function (essentially a setInterval called every 30ms or so used for animation):

//set animations
function onFrame() {
    for (var i = 0; i < balls.length; i++) {
        balls[i].checkCollision(path.firstSegment.point, balls[i]);
    }   
}

As far as I can tell passing in the "balls[i]" array object should give me access to it's properties and therefore allow me to alter them, sure enough

    destruct: function(ball) {
        console.log(ball);
    }

logs

{
  point: { x: 89, y: 628 },
  path: Path @4,
  radius: 30
}

but using (scale() is an inbuilt transform function in paper.js)

 ball.scale(0);

returns

 "Uncaught TypeError: undefined is not a function"

I can't wrap my head around what is going on, any pointers would be greatly appreciated.

You don't need to pass balls[i] nor ball. The value of `this` is the invoking object so you can use `this` instead: http://stackoverflow.com/questions/16063394/prototypical-inheritance-writing-up/16063711#16063711 — HMR, Nov 16 '14 at 15:13
Thanks HMR, I had been using "this" but to no avail, hence the desperate attempt to pass the ball array index in. — user3586963, Nov 16 '14 at 16:11
Maybe you call the code from a timeout or event handler. If that's the case try to use bind or pass a closure (see link in my other comment) — HMR, Nov 16 '14 at 23:24

score 0 · Accepted Answer · answered Nov 16 '14 at 13:15

0

The scale method is defined on the path object. In the destruct function, you have to call scale on the path object.

 destruct: function(ball) {
        ball.path.scale(0,0);
 }

answered Nov 16 '14 at 13:15

Aravind

3,169
3
23
37

That did it! Thanks so much, do you happen to know if scale can be animated inside onFrame(); I can't find anything about it in the documentation. – user3586963 Nov 16 '14 at 16:12

Accessing Class properties returns "Undefined"

1 Answers1