私はボールの移動を理解して、本当に長い時間を費やしました...ううう
paddelの時もそうでしたが、重要なのはボール自体が自分で動いているということではなく、重要なのはボールのx,y,velocityX,velocityYがどのような状況でどのように変化すべきかを頭の中に入れることです.また、文字だけで理解するよりも絵を描きながら理解する方が分かりやすいです.

ボールを動かす

const ball = {
  x: canvas.width / 2, //300
  y: canvas.height / 2, //200
  radius: 10,
  velocityX: 5, //속도  velocity = speed + direction
  velocityY: 5,
  speed: 7,
  color: "WHITE",
}; 

  ball.x += ball.velocityX; // X+  이것만 실행 하면 오른쪽 수직방향으로 공이 쭉 움직인다.
  ball.y += ball.velocityY; // Y+

ボールを右に水平に動かすには、Xの位置を増減させ続けなければならない.ボールを下に垂直に動かすには、Yの値を増やし続けるだけです.
速度は速度+方向です.したがって、上図のように、ボールが最初に移動する方向は紫色で表される部分である.(X+、Y+)
上の画像の矢印とX+-,Y+-を頭の中に置くには...

ボールがCavasの上部と下部に当たったら、

  if (ball.y + ball.radius >= canvas.height || ball.y - ball.radius <= 0) {
    //ball.y + ball.radius 값은 bottom of ball 임.
    ball.velocityY = -ball.velocityY;
  } //공의 top 과 bottom 이 캔버스의 bottom과 top 에 부딪힐 경우 velocityY 의 값이 reverse 되어야 함.

上図では、ボールは再び紫色の矢印方向に移動します.
1)Yの値は逆にする必要があります.
ボールの最初の移動方向はX+,Y+,次いでX+,Y-.
ボールがずっとトップを打っていることを考えてみると、bottomの様子はXの+、-は変わらず、Yだけが逆です.
2)ボールの上部と下部を知る
まずボールのbottomとtopを求めるべきですが、これは言語で説明するよりも画像や理解で分かりやすいです.

上図のようにball.y + ball.radiusが球の底部となり、ball.y - ball.radiusが球の頂部となる.
3)ボールとキャンバスの高さを知る
ボールがcanvasの下部(すなわちcanvas.height)より大きい場合、Yは反転します.ボールの上部が0より小さい場合、ball.VelocityY-Ball逆はvelocityyです.

ボールがカードに当たったとき。

function collision(b, p) {
  p.top = p.y;
  p.bottom = p.y + p.height;
  p.left = p.x;
  p.right = p.x + p.width;

  b.top = b.y - b.radius;
  b.bottom = b.y + b.radius;
  b.left = b.x - b.radius;
  b.right = b.x + b.radius;
  
  return (
    b.right > p.left && b.bottom > p.top && b.left < p.right && b.top < p.bottom
  );
}

// paddle이 user 패들인지 com 인지 확인
  let player = ball.x + ball.radius < canvas.width / 2 ? user : com;

if (collision(ball, player)) {
    // ball.y랑 paddel의 y 값이 똑같아진다. (즉, 볼이 패들을 치는 위치)
    let collidePoint = ball.y - (player.y + player.height / 2);

    //값을 -1,0,1로 만들어줌
    collidePoint = collidePoint / (player.y + player.height / 2);

    //튕겨나가는 위치
    let angle = (Math.PI / 4) * collidePoint;

    let direction = ball.x + ball.radius < canvas.width / 2 ? 1 : -1; 
    ball.velocityX = Math.cos(angle) * ball.speed * direction; 
    ball.velocityY = Math.sin(angle) * ball.speed;

    ball.speed += 0.2;
  }

1)ボールとカードの位置を確認する

ボールがカードに当たった場合はtrueと書き、trueの場合のみボールの位置(リバウンド)を変えることができます.
まず、ボールとカードが互いに接触しているかどうかを確認するために、カードとボールの左、右、上、下を比較し、ボールとカードの位置を比較する.
ボールとカードの位置を比較する場合、簡単な方法はキャンバス内のカードが右と左にある場合をそれぞれ想像し、ボールの位置がもっと大きいかもっと小さいかを比較することです.
2)ボールがカードに当たって跳ね返る.
2.1)userとcomのオールでどのようなオールを打ったかを確認する.

let player = ball.x + ball.radius < canvas.width / 2 ? user : com; 

collision関数のパラメータプレイヤーがuserとcomのどちらであるかを決定します.ball.x + ball.radius < canvas.width / 2とは、ボールが左ユーザ側にある場合をいう.
2.2)ボールがカードのどの部分に当たったかを確認する

let collidePoint = ball.y - (player.y + player.height / 2);

ボールがカードのどの部分に当たったか教えてあげます.
カードの中間部分を起点として、ボールがカードのどの点に当たるかによって、その値が変化します.player.height / 2の値は常に同じであり、player.yとball.yの値が変化するにつれて、ボールがカードのある部分に当たったことがわかり、これをボールの反発の基準点としている.
2.3)球が跳ね返る位置(velocxyを解く)

let angle = (Math.PI / 4) * collidePoint;

let direction = ball.x + ball.radius < canvas.width / 2 ? 1 : -1; 

ball.velocityX = Math.cos(angle) * ball.speed * direction; 
ball.velocityY = Math.sin(angle) * ball.speed;

ボールはカードに当たって、向かうべき方向(VelocityX,Y)を見つけなければならない.
Math. 罪によって得られるからだ.

let direction = ball.x + ball.radius < canvas.width / 2 ? 1 : -1;

directionはuser paddelを打つとき、ボールはx+方向(右)、comオールを打つときは左(x-)と定義している.userがボールを打つときvelocityXはいつも+なので入れました.