JavaScript 円と矩形の衝突判定

色々と検索してみたのですが、解決法が見つからず困っております。
お手数をおかけしますが解決策ご教示いただけますと幸いです。

▼現状
・0°~180°の間で「test」ボタンを押したタイミングでボール（青）が発射される
・障害物(白)の辺に触れるとボールは方向を変えて適切な方向へ飛んでいく
・しかし障害物の角に当たった場合は、ボールはおかしな方向へ移動してしまう

▼解決したいこと
・ボールが障害物の角に当たった場合でも、適切な方向へ飛んでいくようにしたい

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>Document</title>
7  </head>
8  <body>
9    <style>
10      body {
11        margin: 0;
12      }
13
14      canvas {
15        background: #eee;
16        border: 1px blue solid;
17        display: block;
18        margin: 0 auto;
19        width: 100vw;
20      }
21
22      .wrapper {
23        text-align: center;
24      }
25
26      @media screen and (min-width: 800px) {
27        canvas {
28          width: auto;
29        }
30
31        #K {
32          margin-top: 30px;
33          margin-left: 115px;
34        }
35
36        .wrapper {
37          margin: 30px auto;
38          width: 550px;
39        }
40      }
41    </style>
42    <main>
43      <div class="wrapper">
44        <canvas id="myCanvas"></canvas>
45        <input id="K" />
46        <input type="button" value="test" onclick="fire()" />
47      </div>
48    </main>
49  </body>
50  <script src="main.js"></script>
51</html>
52

JavaScript
1let canvas = myCanvas;
2let ctx = canvas.getContext("2d");
3canvas.width = 550;
4canvas.height = 700;
5let ballRadius = 20;
6let x, y, dx, dy, cntBounce, f;
7let k = 0;
8let { PI, sin, cos, abs } = Math;
9let D = PI / 180;
10
11// 障害物１(大)
12let obstacleWidth = 106;
13let obstacleHeight = 70;
14let obstacleImage = new Image();
15let obstacle = {
16  x: 180,
17  y: 450,
18};
19obstacleImage.src = "/image/obstacle1.png";
20// 障害物１(大) END
21
22// 障害物２（小）
23let obstacle2Width = 40;
24let obstacle2Height = 42;
25let obstacleImage2 = new Image();
26let obstacle2 = {
27  x: 70,
28  y: 550,
29};
30obstacleImage2.src = "/image/obstacle2.png";
31// 障害物２（小） END
32
33// ゴール
34let goalWidth = 150;
35let goalheight = 2;
36let goal = {
37  x: 200,
38  y: canvas.height,
39};
40// ゴール END
41
42function drawBall() {
43  ctx.beginPath();
44  ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
45  ctx.fillStyle = "#0095DD";
46  ctx.fill();
47  ctx.closePath();
48
49  if (x > canvas.width - ballRadius || x < ballRadius) {
50    dx = -dx;
51  }
52  if (y > canvas.height - ballRadius || y < ballRadius) {
53    dy = -dy;
54  }
55
56 // 障害物１
57  if (
58    x > obstacle.x - ballRadius &&
59    x < obstacle.x + obstacleWidth + ballRadius &&
60    y > obstacle.y - ballRadius &&
61    y < obstacle.y + obstacleHeight + ballRadius
62  ) {
63    if (
64      (y < obstacle.y + obstacleHeight + ballRadius &&
65        x > obstacle.x &&
66        x < obstacle.x + obstacleWidth) ||
67      (y > obstacle.y - ballRadius &&
68        x > obstacle.x &&
69        x < obstacle.x + obstacleWidth)
70    ) {
71      dy = -dy;
72    } else if (
73      (x < obstacle.x + obstacleWidth + ballRadius &&
74        y > obstacle.y &&
75        y < obstacle.y + obstacleHeight) ||
76      (x > obstacle.x - ballRadius &&
77        y > obstacle.y &&
78        y < obstacle.y + obstacleHeight)
79    ) {
80      dx = -dx;
81    }
82  }
83  // 障害物１ END
84
85  // 障害物２
86  if (
87    x > obstacle2.x - ballRadius &&
88    x < obstacle2.x + obstacle2Width + ballRadius &&
89    y > obstacle2.y - ballRadius &&
90    y < obstacle2.y + obstacle2Height + ballRadius
91  ) {
92    if (
93      (y < obstacle2.y + obstacle2Height + ballRadius &&
94        x > obstacle2.x &&
95        x < obstacle2.x + obstacle2Width) ||
96      (y > obstacle2.y - ballRadius &&
97        x > obstacle2.x &&
98        x < obstacle2.x + obstacle2Width)
99    ) {
100      dy = -dy;
101    } else if (
102      (x < obstacle2.x + obstacle2Width + ballRadius &&
103        y > obstacle2.y &&
104        y < obstacle2.y + obstacle2Height) ||
105      (x > obstacle2.x - ballRadius &&
106        y > obstacle2.y &&
107        y < obstacle2.y + obstacle2Height)
108    ) {
109      dx = -dx;
110    }
111  }
112  // 障害物２ END
113
114  x += dx;
115  y += dy;
116
117  // ゴール位置
118  if (x > goal.x && x < goal.x + goalWidth && y < ballRadius) {
119    clearInterval(stopDrawBall);
120  }
121  // ゴール位置 END
122}
123
124function square() {
125  ctx.beginPath();
126  ctx.arc(x, y, 30, 0, Math.PI * 2);
127  ctx.fillStyle = "#0095DD";
128  ctx.fill();
129  ctx.closePath();
130}
131
132function dispK() {
133  K.value = (((++k / 180) | 0) & 1 ? k % 180 : 180 - (k % 180)) + "°";
134}
135
136function fire() {
137  f++ || ((dx = cos(k * D) * 5), (dy = -abs(sin(k * D)) * 5));
138}
139
140function ballReset() {
141  x = canvas.width / 2;
142  y = canvas.height - ballRadius;
143  dx = dy = f = cntBounce = 0;
144}
145ballReset();
146
147// ボールの初期位置
148function ballSet() {
149  x = canvas.width / 2;
150  y = canvas.height - ballRadius;
151  dx = dy = f = 0;
152}
153ballSet();
154// ボールの初期位置 END
155
156function draw() {
157  ctx.clearRect(0, 0, canvas.width, canvas.height);
158  ctx.drawImage(obstacleImage, obstacle.x, obstacle.y);
159  ctx.drawImage(obstacleImage2, obstacle2.x, obstacle2.y);
160  drawBall();
161  dispK();
162}
163
164// draw();
165let stopDrawBall = setInterval(draw, 10);
166
167

miyabi_pudding

2020/12/20 06:04

> ボールはおかしな方向へ移動してしまう現状、どのような方向になるか、具体的に記載してください。

miyabi_pudding

2020/12/20 06:11

また、細かく見ていなく恐縮なのですが、ボールの衝突判定は、ボールの円周でとっていますでしょうか？あくまで短形での計算になっていないでしょうか？（短形として衝突判定しているなら、確かに見かけ上変な方向には見えてしまう）

ikadzuchi

2020/12/20 06:19

短形ではなく、矩形(くけい)です。

kano00

2020/12/22 06:03

>miyabi_takatsuk 回答遅くなり申し訳ございません。角に衝突するとバウンドせずに矩形の辺に沿ってボールが移動したり、進行方向と真逆に跳ね返ってきたりします。衝突判定は「円の中心と矩形の辺との距離がボールの半径より小さくなったとき」という条件にしております。

kano00

2020/12/22 06:03

>ikadzuchi ご指摘ありがとうございます。タイトル修正しておきました。

miyabi_pudding

2020/12/22 06:07 編集

ikadzuchiさん > 本当にありがとうございます・・・。いい大人が、ずっと勘違いしてました・・・・。質問者さん、失礼しました。（汗） > 角に衝突するとバウンドせずに矩形の辺に沿ってボールが移動したり、進行方向と真逆に跳ね返ってきたりします。これ、物理演算的に、正しい動きではないでしょうか・・・？（物理演算はあまり詳しくなく恐縮ですが・・・）なんとなく、そうなるもののような気がします。

miyabi_pudding

2020/12/22 06:11 編集

ん、もしかして、 > 角に衝突するとバウンドせずに矩形の辺に沿ってボールが移動したりこれ、つまり □ ←◯ ___ ＼ ___ って動きになるってことですか？