关于不同屏幕尺寸的 Phonegap 游戏开发冲突检测

Phonegap game development collision detection regarding different screen sizes

本文关键字：Phonegap 游戏 开发 冲突检测 于不同 屏幕      更新时间：2023-09-26

我正在为我的下一个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）有没有更聪明的方法来解决这个问题？

谢谢 ：-）

您需要计算冲突检测的实际边界矩形位置。

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
相关文章：