ball-anim-simple-bounce.js

function update () {
  // queue the next update
  window.requestAnimationFrame(update)

  // logic goes here

  // bottom bound / floor
  if (ball.y + ball.radius >= canvas.height) {
    ball.velY = -ball.velY
    ball.y = canvas.height - ball.radius
  }
  // top bound / ceiling
  if (ball.y - ball.radius <= 0) {
    ball.velY = -ball.velY
    ball.y = ball.radius
  }

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

  // add gravity
  ball.velY += gravity

  // update ball position
  ball.x += ball.velX
  ball.y += ball.velY

  // draw after logic/calculations
  draw()
}