Javascript Phonegap游戏开发中针对不同屏幕大小的碰撞检测
我正在为我的下一个phonegap应用程序准备游戏开发计划。我特别考虑碰撞检测Javascript Phonegap游戏开发中针对不同屏幕大小的碰撞检测,javascript,cordova,game-physics,Javascript,Cordova,Game Physics,我正在为我的下一个phonegap应用程序准备游戏开发计划。我特别考虑碰撞检测 var element1 = (document.getElementById('element1-id')); var rect1 = element1.getBoundingClientRect(); 到目前为止,我的想法是正确的。不同智能手机上不同的屏幕尺寸将使其不可能实现,还是 如果游戏区域是500px 500px if( collision left wall ) { // deny access f
var element1 = (document.getElementById('element1-id'));
var rect1 = element1.getBoundingClientRect();
到目前为止,我的想法是正确的。不同智能手机上不同的屏幕尺寸将使其不可能实现,还是
如果游戏区域是500px 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 left2= rect2.left;
var top2= rect2.top;
var width2= rect2.width;
var height2= rect2.Height;
然后获取另一个对象(此元素将在其上碰撞的对象)的属性:
var element2 = (document.getElementById('element2-id'));
var rect2 = element2.getBoundingClientRect();
现在获取其宽度、高度、左侧和顶部位置
var left1= rect1.left;
var top1= rect1.top;
var width1= rect1.width;
var height1= rect1.Height;
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