關於不同屏幕尺寸的Phonegap遊戲開發碰撞檢測

Question

我正在爲我的下一個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）有沒有更聰明的方法來解決這個問題？

感謝:-)

Answer 1

你需要計算碰撞檢測實際邊框位置。

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