球と球の衝突判定を検証してみる

2021-05-23

概要

JavaScriptでゲーム制作をしている時によく使用する衝突判定。
特に球と球の衝突はよく使用され、理解していないといけません。

今回はp5というビジュアルコーディングに特化したライブラリp5.jsを使用して検証していきます。

まずは完成系を

固定された円に対し、衝突が起きるとストロークの太さが変わります。

コード + 解説

HTML

htmlは以下の通り。p5.jsはCDN経由で読み込んでいます。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>collision-detective</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
  <script src="./collision-detective.js"></script>
</head>
<body>
<div class="app"></div>
</body>
</html>

JavaScript

collision-detective.js
function setup() {
  createCanvas(480, 480)
}

function draw() {
  background(220)

  let x0 = 120
  let y0 = 180
  let r0 = 60

  let x1 = mouseX
  let y1 = mouseY
  let r1 = 120

  // *1
  let d = sqrt((x1-x0)**2 + (y1 - y0)**2)
  // *2
  let hit = d < r0 + r1

  // *3
  push()
  noFill()
  strokeWeight(hit ? 12 : 3)
  ellipse(x0, y0, 2*r0)
  ellipse(x1, y1, 2*r1)
  pop()

  push()
  stroke(0)
  textSize(32)
  // *4
  text(`d = ${nfc(d, 2)}`, 30, 340)
  pop()
}

*1 球と球の距離を求める

// p5.jsのsqrt関数使うと簡単に求められる
d = sqrt((x1 - x0)**2 + (y1 - y0)**2)

もともとの公式は、右辺がルートに囲まれていますが、sqrt関数を使用することで平方根を求めることが可能になります。

*2 衝突判定

二つの円の距離をdとすると、以下のような判定ができます。

d > r0 + r1 // まだ当たっていない
d < r0 + r1 // 当たっている

つまり、d < r0 + r1を判定としてみていく必要があります。

*3 設定の保存と復元

p5.jsのpush関数pop関数が出てきました。
これは描画設定の保存と復元をしています。
この間では設定を変えても大丈夫です。

ない場合、設定がテキスト描画の方にも影響してしまいます。以下の例だとstrokeWeightがテキストの方にも描画されていますね。

*4 距離のテキスト描画

dの距離をテキストとして描画します。

nfc関数で小数点以下の桁を設定できます。

結論

これを利用してシューティングゲームを作成できそうです。
次は簡単なシューティングゲームを作ってみたいと思っています。

参照

ヘロンの数学チャンネル https://www.youtube.com/watch?v=DXajm0sHfp0&t=350s

運営について

Natural Tearoomはシステム開発会社フロントエンドエンジニアがんちゃんが運営するメディアです。
フロントエンド技術を中心に発信しています。

· プライバシーポリシー

SNS

© 2021 天然珈琲店