2

Raphael.js を使用して四角形間の衝突検出を作成するテスト アプリケーションがあります。

衝突検出を適切に機能させることはできますが、ゆっくりとドラッグする必要があります.... マウスを速く動かしすぎると問題が発生します。ドラッグ可能な四角形を検出するのに十分な速さで更新されていないようです。

ドラッグするのは紫の四角だけです。

JSフィドル

私の質問は、どうすれば検出を改善したり、問題を修正したりできるのでしょうか?

前もって感謝します。

4

1 に答える 1

7

はピクセルの移動ごとに呼び出されるためmove、スムーズに保つために計算を行う時間がありません。まず、オーバーラップを判断する関数をより標準的なものに置き換えました。

var rect_collision = function (x1, y1, size1, x2, y2, size2) {
  var a = {top: y1, bottom: y1+size1, left: x1, right: x1+size1};
  var b = {top: y2, bottom: y2+size2, left: x2, right: x2+size2};

  // this is the general way to figure out if two rects are overlapping
  return !(a.left >= b.right || a.right <= b.left ||                           
           a.top >= b.bottom || a.bottom <= b.top);
};

これは、一方の長方形がもう一方の長方形の左、右、上、または下に完全に収まっているかどうかを確認するだけです。そうでない場合は、重複している必要があります。これは true または false の値を与えるだけなので、どちら側で衝突が発生したかを突き止める必要がありました。

それを理解するために、私は衝突を 2 つのコンポーネントに分割しました。x衝突とy衝突は、最初はdx変化しただけで、次にdy変化しただけであると仮定しました。オーバーラップの原因となっている方向がわかったら、方向の変更を使用して、オーバーラップが発生した側を特定できます。たとえばx、衝突が発生し、以前dxが現在より大きかった場合dx、衝突は右側にありました。

  // check the x and y directions separately                                        
  var x_collide = rect_collision(r2_x, r2_y, rectSize, x, r1_y, rectSize);

  // see if we are currently overlapping
  if (!x_collide) {
    // not colliding, update our x position normally
    this.attr({x:x});
    this.pdx = dx;                          
  }
  else {
    // we are, stick the moving rect to the correct side of the stationary one
    // based on the drag direction that got us stuck
    this.attr({x: this.pdx > dx ? r2_x + rectSize + 1 : r2_x - rectSize - 1});                       
  }

次に、ユーザーが静止した長方形を直接ドラッグするのを防ぐ機能に合わせて、少し余分なロジックを追加しました。基本的に、移動によって移動する長方形が静止している長方形の反対側に直接配置されるかどうかを確認するだけになりました。

また、国境のチェックをクリーンアップして、Math.min および Math.max 呼び出しをすべて削除しました。これらは実際には必要ないためです。ただし、パフォーマンスの問題の多くを引き起こしているとは思えないので、それは好みの問題です。

結果はhttp://jsfiddle.net/X7H9G/3/で確認できます。これが最善の解決策かどうかはわかりませんが、うまくいくようです。

于 2012-09-23T12:07:51.980 に答える