Help requested - Adding to Bouncing Balls Assessment

MDN Learn
1

codepen link

Honestly don’t know why it’s not working. I’ve [reluctantly] compared mine to the finished example line by line and adjusted what I missed/messed up. Please take a look and let me know where I went wrong!

Frustratingly stumped on this one, I got as far as creating the evilCircle constructor without breaking anything… but after that, even though I kept going until the end, I had no idea if anything I was doing was working or not. Wasn’t sure how to test the function of each new addition, etc.

Identified issues:

  • evilCircle not appearing at all
  • “Ball Count:” text appears in codepen but not in browser test. Balls animations appear in browser and not in codepen. wut.
  • I’ve even tried copying/pasting all of the finished JS example into my text editor and tested that in browser and it didn’t work either. Am I failing to initiate the loops/functions? But when I c&p finished example into codepen, it all works fine!

Few questions I asked myself along the way, as well:

  • Why didn’t this use ES5 syntax? IE class evilCircle extends Shape {}
  • Why isn’t EvilCircle in proper camel case in the finished example?
  • Why do we add the text “Ball count:” to html’s <p> but then also have the same text being added here in the JS: para.textContent = 'Ball count: ' + ballCount;? Isn’t this redundant? Shouldn’t we just have an empty <p></p> and the .textContent would fill it in?

Thanks for your time in reviewing this. Might just take the day and re-try the whole thing tomorrow.

2

Re-doing this today and wondering something else…

In the update() sections, how does the code know we’re referring to height/width when we’re just using 0 (see #2 and # 4)? Logically, I feel like you’d need to be directly referencing update() to const width and const height like you do with #1 and #3.

Ball.prototype.update = function() {
  // #1 
    if ((this.x + this.size) >= width) {
    this.velX = -(this.velX);
  }

  // #2
  if ((this.x - this.size) <= 0) {
    this.velX = -(this.velX);
  }

  // #3
  if ((this.y + this.size) >= height) {
    this.velY = -(this.velY);
  }

  // #4
  if ((this.y - this.size) <= 0) {
    this.velY = -(this.velY);
  }
// the below 2 lines are what makes the balls move each frame
  this.x += this.velX;
  this.y += this.velY;
}
3

Re-worked and the program functions properly. Once I got to Defining EvilCircle()'s methods: collisionDetect() section, I had to start referencing the solution to move forward as I didn’t know how to test the functionality of what I was doing.

  • I guess knowing how to test functionality of deeper and more complex code will come with experience.

  • The html p tag can be left blank (<p></p>) and all still appears to function as the para.textContent = 'Ball Count: ' + count; takes care of inserting that text.

  • EvilCircle VS camel case evilCircle doesn’t affect anything other than readability, I don’t think.

  • Still not sure what was wrong with my first attempt (other than becoming flustered). I might print out my first attempt and second attempt and compare them line by line. I’m assuming the errors were syntax and/or ordering errors.

Unsolved questions:

  1. See first reply, please!

  2. I don’t really understand why these lines needed to be added to their respective object instances: Ball.prototype.constructor = Ball; and EvilCircle.prototype.constructor = EvilCircle;. I removed them and everything still appeared to work correctly.

  3. to ES5 or not to ES5?

Thanks, MDN/Chris, for your efforts in putting this together. I learned a lot!