Changes in update() function

Expressions like "this.velX = -this.velX" have been replaced with "this.velX = -(Math.abs(this.velX))". The reason is to avoid some unexpected behaviour if the ball was initially drawn with coordinate x =  width - size and velX being already negative. Then, the condition "this.x + this.size >= width" would be satisfied, velX would become positive and the ball would move further to the right. After that, velX would be restored to its original (negative) value and the ball would bounce to the left, in the next step to the right, and so on. In effect, the ball would never abandon the right side of the canvas.

javascript/oojs/bouncing-balls/main-finished.js

@@ -38,19 +38,19 @@ class Ball {
 
    update() {
       if ((this.x + this.size) >= width) {
-         this.velX = -(this.velX);
+         this.velX = -(Math.abs(this.velX));
       }
 
       if ((this.x - this.size) <= 0) {
-         this.velX = -(this.velX);
+         this.velX = Math.abs(this.velX);
       }
 
       if ((this.y + this.size) >= height) {
-         this.velY = -(this.velY);
+         this.velY = -(Math.abs(this.velY));
       }
 
       if ((this.y - this.size) <= 0) {
-         this.velY = -(this.velY);
+         this.velY = Math.abs(this.velY);
       }
 
       this.x += this.velX;