Adding Features to the Bouncing Ball Demo


I’ve completed the assessment and it basically works. However, there seem to be two small differences between the function of my game and the reference game.

The evilCircle picks up the balls and they disappear. But they actually seem like they are still moving about the Canvas, just hidden. I can tell this by the fact that when I get down to about 5 balls, I can watch one of the remaining balls randomly change color! Which must be from a collision with another hidden ball? Also, my balls seem to flicker more color wise upon collision than in the reference game.

I’ve compared my source code to the reference source code. While I choose to implement the objects using Class definitions with inheritance, the methods seems to be performing the same functions. So, I’m at a loss as to explain the behavior differences. Any help would be greatly appreciated.

I’m also curious as to why the setControls method for the EvilCircle class had to assign its “this” to a local let “_this”. Is this because it’s basically an event handler and method’s normal “this” could change from its load time closure?

My source code is located in CodePen here



Hello @royjay

hope that everything going fine with you

for the hidden ball it can be fixed by removing it from the ball array or change the collision function to check if the ball exist or not

for _this
let for example
we call
this here is refering to the object that call the function which in that case the evilcircle
so any using of this will be vaild and refere to the object that called it
window.onkeydown = function(e) {} is not called by the evilcircle so this is not refered to the evilecircle object but again to the object that called it which is window in that case

and i like the class syntax more but it does not supported in IE browser

you have extra w at the end of your js file which i am sure is miss type and you need to add ; after the end of this window.onkeydown = function(e) {};

hope that help and have nice day

Hey Roy,

I like what you did man, I did the same thing and rewrote the script to ES6 and had alot of playing about with it.

I would say is that you forgot to remove the balls existance.
line 130

if (distance < this.size + balls[j].size) {
          balls[j].color = this.color = 'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) +')';
          //Switch off balls existance
          balls[i].exists = false

And that should do it man,

If you want you can take alook at mine,

Also you are welcome to come and join the Learning den I have setup on Discord


Thank you very much! I will head over and join, see you there!

1 Like

Thank you very much! Your explanation of this and _this makes total sense. I have corrected the other issue as you suggested.


you very welcome @royjay

have a nice day :slight_smile: