0

次の phonegap アプリのゲーム開発計画を準備しています。私は衝突検出について具体的に考えています。

これまでの私の考えは。スマートフォンごとに画面サイズが異なると、それが不可能になりますか？

ゲーム領域が 500px x 500px の場合。

if( collision left wall ) {
  // deny access further
}

if( collision right wall ) {
  // deny access further
}

if( collision top wall ) {
  // deny access further
}

if( collision bottom wall ) {
  // deny access further
}

通常通り「衝突左壁」を0px、「衝突右壁」を500pxとします。

スマートフォンの動的画面サイズの理解に問題があります。この問題を解決するにはどうすればよいですか?

1) 動的な画面サイズを計算し、画像やゲーム領域などをスケーリングする必要がありますか?

2) この問題を解決するもっとスマートな方法はありますか?

ありがとう ：-）

4

1 に答える 1

2

衝突検出のために、実際の境界矩形の位置を計算する必要があります。

var element1 = (document.getElementById('element1-id'));
var rect1 = element1.getBoundingClientRect();

次に、幅、高さ、左、および上部の位置を取得します

var left1= rect1.left;
var top1= rect1.top;
var width1= rect1.width;
var height1= rect1.Height;

次に、別のオブジェクト (この要素が衝突するオブジェクト) のプロパティを取得します。

var element2 = (document.getElementById('element2-id'));
var rect2 = element2.getBoundingClientRect();

幅、高さ、左、および上の位置を取得します

var left2= rect2.left;
var top2= rect2.top;
var width2= rect2.width;
var height2= rect2.Height;

衝突をチェックする時が来ました: 以下のメソッドをコードに貼り付けます:

function bounding_box_collision(b1_x, b1_y, b1_w, b1_h, b2_x, b2_y, b2_w, b2_h) {
    if ((b1_x > b2_x + b2_w - 1) || // is b1 on the right side of b2?
        (b1_y > b2_y + b2_h - 1) || // is b1 under b2?
        (b2_x > b1_x + b1_w - 1) || // is b2 on the right side of b1?
        (b2_y > b1_y + b1_h - 1)
        ) // is b2 under b1?
    {
// no collision
        return "No";
    }
    else// collision
    {
        return "Yes";
    }


}

設定された間隔を実行し、必要な期間で衝突をチェックします。スムーズな衝突検出のために、以下のコードのように常に短い期間を使用します。

setInterval(function(){
     if(( bounding_box_collision(left1, top1, width1, height1, left2, top2, width2,      height2))=="Yes"){
         console.log("Collision Detected");
    }else{
         console.log("No Collision");
    }

},0)//0 milliseconds
于 2013-10-01T13:19:08.537 に答える