How to create random objects and destroy them?

[menzoni]

Hey, Guys. I'm new to Canvas and javascript and I'm making a endless runner like Traffic Racer. I'm already able to move my player and I created a object, which is supposed to become an obstacle. But since it is an endless runner I need to be able to create a bunch of random objects at time and destroy them when they're no longer visible. 

I wanted the objects to be able to destroy themselves, but I can't find a way how to do this. This is my class "Banana

function Banana() {
	this.height = 1.96;
	this.width = 3.955;
	this.pos_x = 300;
	this.pos_y = -30;
	this.banana_image = new Image();
	this.banana_image.src = 'img/banana.png';
};

I was thinking about creating an array of objects that are on screen, but I still don't know how to create them on runtime.

Anything helps.

Thanks. 

[BobF]

You could implement a pool of obstacle objects: When you need a new obstacle you request it from the free pool. If the free pool is empty it should create a new obstacle and return it. When an obstacle is no longer needed you send it back to the free pool where it is ready to be reused.

[menzoni]

Thank you for your help, @BobF

What would this pool of objects be? And array? I tried some stuff, and I got stuck with this (which doesn't work):

Game.update = function() {

	  this.player.move();
	  
	  //creating bananas
	  if (objs.length <= 0) {
		  this.banana = new Banana();
	  } else {
		  for (i = 0; i < 10; i++) {
			  objs.push(new Banana());
		  }  
	  }
	  
	  //moving bananas
	  for (i = 0; i < objs.length; i++) {
		  this.objs[0].move();
	  }
	  

};

I created an Objects array and I made a For loop to create the objects, but besides not working it only would be able to create 10 objets, and I don't want it. I never used a pool of objects. Do you have any tip on where to start? 

[BobF]

Here's an example of a very simple object pool and an incomplete example of its use:

var pool = (function () {
    var obstacles = [];

    return {
        get: function () {
            return obstacles.pop() || new Obstacle();
        },

        free: function (obstacle) {
            obstacles.push(obstacle);
        }
    };
})();


function moveBananas() {

    if (needNewBanana) {
        var banana = pool.get();

        banana.move();
    }

    if (bananaOutOfView) {
        pool.free(banana);
    }

}

 

[DexterZ]

Put a life on  your banana object

 

var Banana = (function () {

        function Banana( pTime, pLife ) {
	    this.height = 1.96;
	    this.width = 3.955;
	    this.pos_x = 300;
	    this.pos_y = -30;
	    this.banana_image = new Image();
	    this.banana_image.src = 'img/banana.png';

	    this._TimeToDestroy = pTime + pLife; 
        }

	Banana.prototype.Destroy = function () {

                this.banana_image     = null;
                this.banana_image.src = null;
            };        

        Rect.prototype.IsTimeToKill = function (pTime) {
                return pTime >= this._TimeToDestroy ? true; false;
            };
}




Game.update = function() {

            var mTime = new Date().getTime();
          
	    if (objs.length <= 0) {
		  this.banana = new Banana( mTime, 3000 ); // Lives 3 Seconds
	    } else {
		  for (i = 0; i < 10; i++) {
			  objs.push(new Banana( mTime, 3000 )); // Lives 3 Seconds
		  }  
	    }

	    var mItr  = 0;
            var mLen  = this.objs.length;
            var mObj  = null;

            for (mItr = mLen - 1; mItr >= 0; mItr--) {

                mObj = this.objs[ mItr ];                

                //--> Move object
                //
                mObj.move();                

		//--> Inquire if time to destroy object
                //
		if mObj.IsTimeToKill( mTime ) {

                     // Destroy object
		     mObj.Destroy();
		     mObj = null;

                     // Remove from list
                     this.objs[mItr] = null;
                     this.objs[mItr].splice( mItr, 1 );
                }
            }
}