碰撞检测功能

时间:2014-04-11 20:55:28

标签: javascript canvas collision

我已经构建了这个函数,以便能够检查两个对象是否在AABB碰撞类型模型中接触,但我无法弄清楚逻辑或者它为什么不起作用。

function hitTest(x1, y1, w1, h1, x2, y2, w2, h2) {
    //x1, y1 = x and y coordinates of object 1 
    for (var x = 0; x < AliLength; x++) {
        x1 = AliensArrR1[x].getX();
        y1 = AliensArrR1[x].getY();
    }
    //w1, h1 = width and height of object 1
    w1 = 50;
    h1 = 18;
    //x2, y2 = x and y coordinates of object 2 (usually midpt)
    for (var x = 0; x < bullets.length; x++) {
        x2 = bullets[x].getX();
        y2 = bullets[x].getX();
    }
    // w2, h2 = width and height of object 2
    w2 = 3;
    h2 = 13;
    if ((x1 <= x2 && x1 + w1 >= x2) &&
    (y1 <= y2 && y1 + h1 >= y2) && (x2 <= x1 && x2 + w2) && (y2 <= y2 && y2 + h2))
        alert("Hit");
    else
        return false;
};

每行有12个图像,每个行都有一个数组,我现在不担心性能,只是想确保我能让它在一个上运行并获得正确的逻辑。

非常感谢任何建议!

编辑:我正在尝试检查宽度为18和50的对象是否与我的另一个宽度为3且高度为13的对象重叠。这些对象永远不会仅改变x和y轴的变化。我是新手进行碰撞检测,并且在如何应用检查每个的x和y的逻辑以确定它们是否相交之后进行了几次尝试。我想我会请求一些帮助,因为我正朝着错误的方向前进。

![这就是我想要实现的目标]:http://uploads.gamedev.net/monthly_06_2011/ccs-8549-0-64600400-1307074262.gif

3 个答案:

答案 0 :(得分:2)

我建议你稍微重构一下你的代码。保留八个参数,但不要在函数hitTest中为它们分配任何内容,也不要引用任何全局变量或常量。只需比较给定的坐标和宽度,如果它们重叠,则返回true,否则返回false

通过提供一些测试用例来测试此功能。如果无法在脑中进行可视化,则绘制2D网格并标记轴,然后绘制任意矩形。选择两个不重叠的,将它们提供给您的函数,并检查它是否返回false。选择两个重叠的,将它们提供给您的函数,并检查它是否返回true。选择两个刚刚接触,将它们提供给您的功能,并检查它是否返回您希望它返回的内容。重复,直到您确信您的代码是正确的。

然后使用此功能实现另一个功能,该功能通过所有外星人和所有子弹并使用hitTest进行检查(如果其中任何一个发生碰撞)。它应该以{{1​​}},18等作为宽度和高度。如果坐标指的是对象的中心,则可能需要将它们偏移,以便它们指向右上角。

<强>提示

如果您发现难以在2D中进行碰撞检查,请创建一个更简单的函数,该函数需要两个1D线段50并确定它们是否重叠。 2D情况可以分解为两个一维检查:对象应该水平和垂直重叠。

最终解决方案

(x1, w1, x2, w2)

答案 1 :(得分:0)

它主要完成了,buuuut ......

给定w1宽度,h1高度,x1 X位置,y1对象1的Y位置,以及x2的同一性,{对象2上的{1}},y2w2

条件应该是条件之间的OR,我打赌你的垂直部分有一些拼写错误。评论版:

h2

答案 2 :(得分:0)

这是正确的但是那样:

function hitTest(x1, y1, w1, h1, x2, y2, w2, h2) {    
  if (((x1 <= x2 && x1 + w1 >= x2) || (x2 <= x1 && x2 + w2 >= x1)) && ((y1 <= y2 && y1 + h1 >= y2) || (y2 <= y1 && y2 + h2 >= y1)))
    return true; 
  else
    return false;    
}