JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTML5キャンバスで円同士の衝突を検出する方法

円の衝突判定の基本原理

HTML5キャンバス上で2つの円が衝突しているかどうかを判定するには、両方の円の中心点間の距離を求め、その距離が2つの半径の合計とどうなっているかを比較します。中心間の距離からそれぞれの半径を差し引いて評価することで、2つの円が重なっているか(衝突しているか)を判断できます。

多数の円を扱う場合の課題

例えば20個の円すべてについて衝突をチェックしたい場合、毎回正確な距離計算(平方根を含む処理)を行うと負荷が大きくなります。そこで有効なのが、本格的な計算の前に実行する「事前チェック」です。各円の中心のx座標・y座標と半径だけを使って、衝突の可能性がないペアを素早く除外できます。

abs()を使った高速な事前チェック

abs(x2 - x1) > (r2 + r1)
abs(y2 - y1) > (r2 + r1)

上記の条件式では、X方向またはY方向における2つの中心の距離の絶対値が、2つの半径の合計より大きいかどうかを調べています。どちらか一方でもこの条件が当てはまる場合、その軸方向だけで円同士が離れすぎていることになるため、2つの円は絶対に衝突しません。

この手法のメリット

  • 平方根の計算が不要なため、処理が高速になる
  • 衝突の可能性がない組み合わせを早期に除外でき、詳細な判定回数を大幅に減らせる
  • シンプルな四則演算のみで実装できるため、コードが読みやすくなる

まずこの軽量なチェックを行い、条件を満たさなかった(=衝突の可能性がある)ペアに対してのみ、中心間の正確な距離と半径の合計を比較する詳細な判定を実行すると、効率的な衝突検出システムを構築できます。

  1. HTML5 Canvasの変換（トランスフォーム）基本解説

    HTML5のCanvas APIには、変換行列（transformation matrix）を直接操作できるメソッドが用意されています。変換行列は初期状態で単位変換（identity transform）となっており、その後、各種の変換メソッドを呼び出すことで自由に調整できます。 主な変換メソッド translate(x, y)：座標原点を指定した位置へ移動します。 rotate(angle)：指定した角度（ラジアン）だけ描画内容を回転させます。 scale(x, y)：横方向・縦方向に拡大・縮小します。 transform(a, b, c, d, e, f)：現在の変換行列に、指定した行列

  2. HTML5でCanvas（キャンバス）を中央に配置する方法を徹底解説

    HTML5で<canvas>要素を画面の中央に配置する最もシンプルな方法は、canvasタグを<div>タグで囲み、そのdivに対して中央揃え（text-align:center）を指定することです。親要素であるdivが中央に配置されると、その中にあるcanvasも自動的に中央に表示されます。基本的な実装例<!DOCTYPE html> <html>    <body>       <div style=text-align:center;