如何使用我正在使用的代码使球在绘制的矩形上反弹？

// 定义球的属性
var ball = {
  x: 50, // 球的初始位置
  y: 50,
  radius: 10, // 球的半径
  speedX: 2, // 球的水平速度
  speedY: 2 // 球的垂直速度
};

// 绘制矩形和球
function draw() {
  // 绘制矩形
  // ...

  // 绘制球
  // ...
}

// 更新球的位置
function update() {
  // 更新球的位置
  ball.x += ball.speedX;
  ball.y += ball.speedY;

  // 检查球是否与矩形相交
  if (ball.x + ball.radius > rect.left && ball.x - ball.radius < rect.right && ball.y + ball.radius > rect.top && ball.y - ball.radius < rect.bottom) {
    // 球与矩形相交，根据碰撞位置和方向改变球的速度
    if (ball.y - ball.radius < rect.top || ball.y + ball.radius > rect.bottom) {
      ball.speedY = -ball.speedY; // 垂直方向取反
    }
    if (ball.x - ball.radius < rect.left || ball.x + ball.radius > rect.right) {
      ball.speedX = -ball.speedX; // 水平方向取反
    }
  }
}

// 循环更新和绘制
function loop() {
  update();
  draw();
  requestAnimationFrame(loop);
}

// 启动循环
loop();