Why my raindrops keep destroying theirself while they haven't go behind the screen ?

Question

All is in the question, please help <3

https://code.sololearn.com/W3xm1fbZ8tOi/?ref=app

Answer 1

I think you need to tell the diffrent sized rain drops the correct coordinates of when it needs to destory itself

Answer 2

Actually, you made another change that's important: tz controls the order in which drops hit the bottom (you changed it so that z is always 1, so now order never changes).

Just for visualization, add this to [HTML] above the canvas tag:
<div id="dropcount"></div>

[JS] tab
// add this
39: document.getElementById("dropcount").innerHTML=$raindrops.length;

// Then put tz back (instead of 1)
47: $raindrops.push(new RainDrop(tx, ty, 1, $raindrops.length));

Watch the count go up, and then crash back towards 0.

Taking Calviղ and D_Stark's comments, ask yourself: Why does it matter, the order in which drops hit the bottom?

Answer 3

$raindrops.splice(self.i, 1);

Answer 4

I think it come from my for loop, because I remove it and it stop bugging :/

Answer 5

Thank you all, I follow your advices however I just put the limit to height * 1/self.z