Creating objects dynamically and self unreferencing

Question

guys. I'm making an endless runner in which I need some objects to come from the top of the screen and then get destroyed once they're no longer visible.

Screenshot of how it looks like right now

I created the 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';
};

And a Move function:

Banana.prototype.move = function(){
    if (this.pos_y > 500) {
        //destroy it
        this.constructor = undefined; //????
    }
    this.height += 0.5;
    this.width += 0.5;
    this.pos_y += 5;
    this.pos_x -= 2.2;
};

I created the object in my Game.Initialize function, but it only runs once so it doesn't really help me.

I want to be able to create them dynamically on my Game.update. I was thinking about using an array of objects, but since I'm new to Javascript I don't know how it would work.

What do you mean by "destroyed"? Are you trying to remove this.banana_image from document this.pos_y > 500 is true? — guest271314
– guest271314, Commented Jul 30, 2016 at 7:04
I meant get deleted. Once they reach the border of the screen, I want to delete them. — CaMenz
– CaMenz, Commented Jul 30, 2016 at 7:06

guest271314 · Accepted Answer · 2016-07-30 07:09:51Z

1

You can select .parentElement of this.banana_image, use Node.removeChild() chained to parent element to remove <img> element created at constructor from document

if (this.pos_y > 500) {
    this.banana_image.parentElement.removeChild(this.banana_image)
}

answered Jul 30, 2016 at 7:09

guest271314

1

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

Comments

slebetman · Accepted Answer · 2016-07-30 08:40:12Z

1

Objects are garbage collected once nothing else reference them. So to delete the Banana object just remove it from whatever variable or array or object that reference bananas:

var banana = new Banana();
banana = null; // the banana object will be deleted sooner or later

Looking at your code, the most obvious thing that gets referenced is the .move() method. It's probably referenced by a setTimeout() or setInterval() or requestAnimationFrame(). Just remove any reference to banana.move() in the animation loop and the object will get destroyed sooner or later.

Other things that may reference the object are DOM objects. But that's only if you do stuff like:

document.getElementById('banana_image').obj = banana;

Generally, most people will have links the other way round: the object will have references to DOM objects. That won't prevent the object from being garbage collected since the only requirement is that nothing else references the object.

Don't forget to destroy DOM objects that are no longer used (like the banana image) because they won't be garbage collected along with your object. The reason is there's still something referencing them: the browser window drawing them.

Self deletion

The only way to make self deletion work is to make the banana object aware of the thing referencing it. This is only possible for arrays and objects. Plain variables wont' work. It would have to be something like this:

function Banana(parent) {
    this.parent = parent;
    /* ... */
}

To self-unreference:

// if parent is array:
var i = this.parent.indexOf(this);
this.parent.splice(i,i);

// if parent is object:
delete this.parent[this.parent_key];

Although I've written something like the above before, I consider it an anti-pattern. A better solution is to have a property like this.alive and then implement your own high level garbage collector to delete the object from whatever thing that reference it when it's no longer "alive".

answered Jul 30, 2016 at 8:40

slebetman

115k19 gold badges148 silver badges181 bronze badges

5 Comments

CaMenz Over a year ago

So making an array of bananas and putting "banana.move" in a while loop that runs through the array, and once all of them are no longe on the screen it'd stop looping. Do you think that would work? Also, do you know anything about dynamic creation of objects?

slebetman Over a year ago

Yes. That's what I'd do. Except I'd use a for loop to run through the array (unless by while loop you mean to use a while loop to animate - in which case it wouldn't work because the browser cannot draw anything on screen until you stop running javascript code. Use setTimeout instead). After moving everything in the array I'd run another for loop to detect which object to delete (splice) from the array.

slebetman Over a year ago

I'm not sure what you mean by dynamic creation though. The example above IS dynamic creation. Indeed javascript ONLY supports dynamic creation (either via new or an object literal).

CaMenz Over a year ago

What I meant by dynamic creation is that I want to create the objects continuously with a random interval between the creation. So I need the objects to be created whenever it reaches it, and the only way I think I could do it is in the game update, but I don't know how the expression would be. Like: myObjects[] = new Object();

slebetman Over a year ago

myObjects.push()

Collectives™ on Stack Overflow

Creating objects dynamically and self unreferencing

2 Answers 2

Comments

Self deletion

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Self deletion

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related