2

jquery/javascriptでゲームを作っています。ゲームは、マウスを使って画面をクリックして、動くオブジェクトを 1 つヒットすることです。検出ビットに問題があります。2 つのオブジェクトの中心間の距離を常に測定できる jQuery/javascript 関数はありますか? そうすれば、2つの中心の距離を簡単にチェックできるようになります。衝突するかどうかを確認します。どちらも2つの円です。

<div id="box">
        <div id="prepend">
            <div id="hero"></div>
        </div>

        <div id="enemy"></div>
</div>

「ボックス」はゲームが行われるエリア、「ヒーロー」は「敵」に命中させる弾丸です。

4

3 に答える 3

5

距離を取得するには、式を使用します ここに画像の説明を入力

function getDistance(obj1,obj2){
    Obj1Center=[obj1.offset().left+obj1.width()/2,obj1.offset().top+obj1.height()/2];
    Obj2Center=[obj2.offset().left+obj2.width()/2,obj2.offset().top+obj2.height()/2];

    var distance=Math.sqrt( Math.pow( Obj2Center[0]-Obj1Center[0], 2)  + Math.pow( Obj2Center[1]-Obj1Center[1], 2) )

    return distance;
}

を使用して呼び出す

getDistance($("#obj1"),$("#obj2"));

衝突をチェックするには:

function hasCollision(obj1,obj2){    
    return getDistance(obj1,obj2)<obj1.width()/2+obj2.width()/2;
}

両方を示すjsfiddleの例を次に示します

于 2013-03-29T11:25:41.580 に答える
0

1 つではありませんが、実際には非常に単純です。

  1. 現在のアイテムの絶対座標と幅と高さを取得します
  2. 中心点を計算 (x + 幅/2、y + 高さ/2)
  3. 両方のサークルでそれを行います
  4. 三角関数を使用して、これらの 2 点間の距離を計算します: 正方形の x の差と正方形の y の差、その平方根を取る = 距離
  5. 距離から両方の円の半径を引いた値が 0 より大きい場合、衝突はありません。0 の場合: 接触、0 より小さい場合は衝突。
于 2013-03-29T11:23:14.713 に答える
0

以下を使用できます。

var $this = $(this);
var offset = $this.offset();
var width = $this.width();
var height = $this.height();

var centerX = offset.left + width / 2;
var centerY = offset.top + height / 2;

両方に対してこれを行い、それらの値の差を計算します。

于 2013-03-29T11:21:48.597 に答える