Question

I’m fairly new to object orientated stuff so this may very well be the wrong way to be going about getting this done.

This is a very slimmed down version of what I currently have, but the concept is essentially the same. When the user clicks on a canvas element on my page, I create 20 instances of the particle object below, append them to an array whilst at the same time updating the canvas at 30FPS and drawing circles based on the x property of the instances of each object. Once a particle is off the screen, it’s removed from the array.

var particle = function()
{
    var _this = this;
    this.velocity = 1;
    this.x = 0; 

    this.updateVelocity = function(newVelocity)
    {
        _this.multiplier = newVelocity;
    }

    var updateObject = function()
    {
        _this.x += velocity;
    }

}

I would like the user to be able to control the velocity of new particles that are created using an input element on the page. When this is updated I have an event listener call

particle.updateVelocity(whateverTheUserEntered);

However I get the error “particle has no method updateVelocity”. After a bit of reading up on the subject I understand that to call that function I need to create an instance of the object, but this will only update the velocity value of that instance which isn’t going to work for me.

My question is, is there a way to achieve what I’m doing or have I approached this in completely the wrong way? As I said, I’m still getting to grips with OOP principles so I may have just answered my own question…

Answer 1

Try this:

var particle = new (function()
{
    var _this = this;
    this.velocity = 1;
    this.x = 0; 

    this.updateVelocity = function(newVelocity)
    {
        _this.multiplier = newVelocity;
    }

    var updateObject = function()
    {
        _this.x += velocity;
    }

})();

Your’s is creating a function and then setting the variable particle to that value. particle will not have any special properties because of this. My example above, however, by using new and the function as a constructor assigns particle an instance of a (now anonymous) class.