[JavaScript] JavaScriptで学ぶ衝突判定と距離計算の基本

はじめに

canvas を使ったブロック崩しゲームを作ってるのですが、物理的なボール同士の当たり判定ロジックを考える際にピタゴラスの定理をAIに聞いて学習したので、その内容を備忘録で残しておきます。

衝突判定 と　距離計算

ゲーム開発で、物体同士の衝突判定は非常に重要な部分です。

ボールが動き回るシーンや、キャラクター同士が接触するシーンなど、物理的なインタラクションを実現するために不可欠な要素です。

この記事では、JavaScriptを使った衝突判定と距離計算の基礎について解説します。


1. 距離計算の基礎

衝突判定を行う前に、2つのオブジェクト（例えばボールやキャラクター）の距離を計算する必要があります。 距離計算にはピタゴラスの定理を使います。

ピタゴラスの定理では、直角三角形の2辺と斜辺の関係を表します。

c² = a² + b²

ここで、a と b は直角を挟む2辺、 c は斜辺です。

2つのボールの距離を計算する場合、 a と b はそれぞれボールの x座標の差 と y座標の差 です。

2. JavaScriptでの距離計算

JavaScriptを使って、2つのボールの距離を計算する方法は次の通りです：

const dx = ball1.x - ball2.x; // x座標の差
const dy = ball1.y - ball2.y; // y座標の差
const distance = Math.sqrt(dx * dx + dy * dy); // 距離を計算
  • dx と dy は、2つのボールの位置の差です。
  • Math.sqrt(dx * dx + dy * dy) で、2つのボール間の実際の距離を計算しています。

3. 衝突判定

距離計算ができたら、次は衝突判定です。

2つの物体が接触したかどうかを判定するためには、距離が物体の半径の合計より小さいかどうかをチェックします。

// 衝突判定
function checkBallCollision(ball1, ball2) {
  const dx = ball1.x - ball2.x;
  const dy = ball1.y - ball2.y;
  const distance = Math.sqrt(dx * dx + dy * dy);

  // もしボール同士が接触していたら
  if (distance < ball1.radius + ball2.radius) {
    // ここで反発や動きの処理をする
    console.log("衝突しました！");
  }
}
  • distance < ball1.radius + ball2.radius という条件で、ボールが接触したかどうかを判定しています。

4. まとめ

距離計算はピタゴラスの定理を使って簡単に求めることができ、ゲーム開発において非常に重要なステップです。

衝突判定では、距離を使って物体同士が接触したかどうかを判断し、次に起こるべき動作を決定します。

このような基本的な物理シミュレーションを理解していくことで、ゲーム内での動きやインタラクションをよりリアルに再現することができます。

最後に

もし、他の物理シミュレーションや高度なゲームロジックに興味があれば、次は摩擦や重力、衝突後の反発なども学んでいくと、さらに面白いゲームが作れるようになります。

関連リンク