Assessment wanted for Adding bouncing balls features 20211202

MDN Learn
#1

I completed the Adding bouncing balls features and am seeking an assessment of my solution (CodePen).

Notes

  • I switched to ES2015 class syntax as I prefer it so far.
  • I added a header with some minor controls.
  • It looks ugly as sin. By the time I got it working, I had no time/energy for styling further.
  • There is a bug where I think the velocity gets increased each time the game is restarted despite clearing the array of balls. Any pointers on how to fix would be appreciated.
  • I wasn’t able to answer the question

…can you tell us why we’ve had to set let _this = this; in the position it is in? It is something to do with function scope.

Any explanation of direction where I might find one would be appreciated.

Thank you for your time :slight_smile:

#2

Hi @horusofoz

I haven’t read through your whole code, yet. But to answer your question:

When a function is executed “this” gets bound to the object which calls the function. Since we are in an event handler of the “window” object, “this” will reference to the “window” object. What we want is a reference to the “EvilCircle”. You can see the difference by adding two console.log() inside the event handler in your code:

window.onkeydown = function(e) {
    console.log(this);  // Window {...}
    console.log(_this); // Object { x: 959, y: 50, velX: 20, velY: 20, exists: true, color: "white", size: 10 }
    if(e.key === 'a') {
    ...

If you’re interested in some more details: this | MDN

That’s it for the moment :smile:

Happy coding,
Michael

1 Like
#3

Hello @horusofoz

Sorry for the waiting. I’ve never assessed this task and wanted to take some time to get familiar with it (and the preceding article). Now I’m ready to go :grin:

You did really great on this task. Congratulations! I like the extra mile you went to add the controls in the header. I only have some minor improvements:

  • Naming the drop down “speed” is a bit confusing as it refers to the starting number of balls.
  • You could remove velX and velY from the EvilCircle constructor since you are setting fixed numbers in the “super” call.
  • You could simplify checkBounds() by changing this.x += -this.size; to this.x -= this.size; and so on.

When you press “Start” the second time the old loop is still running. Now the loop is executed twice per frame which means the velocity gets added twice. You need to cancel the old requestAnimationFrame(loop) function when pressing the “Start” button:

// Somwhere at the top
let requestId;

// At the beginning of start()
cancelAnimationFrame(requestId);

// Replace the requestAnimationFrame() line
requestId = requestAnimationFrame(loop);

Once again: Amazing job on this task! It was a pleasure to assess :smile:

Have a nice weekend,
Michael

#4

Hey @mikoMK :slight_smile:

Thank you for your explanation of this vs. _this. That cleared things up for me. Thank you as well for your suggestions. I’ve implemented improvements as follows.

Naming the drop down “speed” is a bit confusing as it refers to the starting number of balls.

Renamed to numBalls.

You could remove velX and velY from the EvilCircle constructor since you are setting fixed numbers in the “super” call.

I removed the velX, velY and exists parameters from the EvilCircle constructor.

You could simplify checkBounds() by changing this.x += -this.size; to this.x -= this.size; and so on.

Update as suggested. I think was a reflection of my getting tired as on review it was a lot less clear.

When you press “Start” the second time the old loop is still running. …

That makes a lot of sense. Thank you :slight_smile:

I appreciate all your help and encouragement. I’m making my way through the async section now. It’s proven challenging but making steady progress. I look forward to being able to apply all this knowledge into a project :slight_smile:

1 Like
#5

Thank you for the kind word :blush:

Async JS is hard to wrap one’s mind around but definitively something you have to know for real projects because as soon as your JS starts speaking to a server you will need it.
For me, “promises” are one of the most fascinating concepts in JS. I wish you good luck! Just come back if you need any help with the lessons. We will be here. :smiley:

Cheers,
Michael

1 Like