ballanim-collision-with-physics.js

// bottom bound / floor
if (ball.y + ball.radius >= canvas.height) {
  // reverse direction and lose energy from bouncing
  ball.velY *= -ball.bounce
  // reset position
  ball.y = canvas.height - ball.radius
  // slow down the ball's X velocity with friction
  ball.velX *= friction
}
// top bound / ceiling
if (ball.y - ball.radius <= 0) {
  ball.velY *= -ball.bounce
  ball.y = ball.radius
  ball.velX *= friction
}

// left bound
if (ball.x - ball.radius <= 0) {
  ball.velX *= -ball.bounce
  ball.x = ball.radius
}
// right bound
if (ball.x + ball.radius >= canvas.width) {
  ball.velX *= -ball.bounce
  ball.x = canvas.width - ball.radius
}