Q&A
コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564
jsのcanvasを使った単純な四角の衝突プログラム
・javascriptのcanvas機能を理解するための練習をしています。
・四角形の物体２つを２D平面上のcanvas内で任意の方向で
等速で動かすプログラムを作成したい。
・物体は壁に当たると反射し、物体同士が当たっても反射するように作成したい。
・入射角、反射角が等しくなるようにし、反発係数は１です。
・プログラムは途中まで作成し、残り物体同士の反射の条件のみが作成できません。
発生している問題・エラーメッセージ
エラーは発生していません。
該当のソースコード
<!DOCTYPE html> <html> <head> </head> <body> <canvas id="canvas"></canvas> <script> // キャンバスの設定 let SCREEN_W = 500; let SCREEN_H = 400; let SCREEN_COLOR = 'skyblue';</body> </html> ```ここに言語名を入力 javascript ```let elm = document.getElementById('canvas'); let ctx = elm.getContext('2d'); elm.style.backgroundColor = SCREEN_COLOR; elm.width = SCREEN_W; elm.height = SCREEN_H; // 動く四角形に関するパラメータ let x1 = 100; let y1 = 150; let dx1 = 100; let dy1 = 70; let vx1 = 5; let vy1 = 4; let x2 = 200; let y2 = 300; let dx2 = 60; let dy2 = 60; let vx2 = 3; let vy2 = 2; // 物体動作のメインループ setInterval(main, 1000/60); function main() { ctx.clearRect(0, 0, SCREEN_W, SCREEN_H); // 物体１の設定 ctx.fillStyle = 'red'; ctx.fillRect(x1, y1, dx1, dy1); x1 += vx1; y1 += vy1; // 物体２の設定 ctx.fillStyle = 'yellow'; ctx.fillRect(x2, y2, dx2, dy2); x2 += vx2; y2 += vy2; // 壁との当たり判定 if (x1 <=0 || x1 + dx1 >= SCREEN_W) {vx1 *= -1} if (y1 <=0 || y1 + dy1 >= SCREEN_H) {vy1 *= -1} if (x2 <=0 || x2 + dx2 >= SCREEN_W) {vx2 *= -1} if (y2 <=0 || y2 + dy2 >= SCREEN_H) {vy2 *= -1} // 物体同士の衝突判定 if(x2 <= x1 + dx1 && x2 + dx2 >= x1 && y2 <= y1 + dy1 && y2 + dy2 >= y1) { // ここから先が作成できませんでした } } </script>
試したこと
物体が衝突する辺が上辺or下辺の場合はy軸速度を*-1、
物体が衝突する辺が右辺or左辺の場合はx軸速度を*-1すればいいと思うのですが、
計算式を考えていますが思いつきませんでした。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
四角形には意味がありますか？
２オブジェクトが衝突する際、角と面の衝突は別の意味をもちますか？
壁の角にまっすぐに入射したときは反射しないのですか？
回答1件
0
ベストアンサー
jsのcanvasを使った単純な四角の衝突プログラム
ええと、質問者様まずこのお題簡単ではないですよ？意外と円の方が簡単なんですが...
- 現在の四角形の状態から移動方向(ベクトル)に対するもっとも先端に位置する点を取得
（円だと1点で済むが四角形だと上位2点が必要）
これを仮に四角形A、四角形Bとして両方で求めておく
-
衝突の判定は四角形A上位1点が四角形Bの2点を結ぶ線と重なったかで判定
-
逆の場合も判定を行う
-
四角形A上位1点が衝突したとして四角形Aのベクトルと四角形Bの2点を結ぶ線から入射角度が判る。
-
四角形Aのベクトルを入射角度の反対の角度に変更
-
四角形Bのベクトルは四角形Aとのベクトルのから計算する(四角形Bの反発方向)
-
衝突が発生しているのでその分全移動量から減算
※ 本来は摩擦係数も含めないといけない（動きっぱなしになる。）
あと実際のソースは「ビリヤード javascript」で検索してみて下さい。
ここで書ける量ではないですし...
投稿2020/10/12 07:38
総合スコア2506
回答ありがとうございます。
こんなに考えないといけない要素があるとは正直思っていませんでした。
四角にするから難しいということでしょうかね。
まずは円で考えてみたいと思います。。。
あなたの回答
tips
プレビュー
