等距物体检测

时间:2012-01-04 12:25:19

标签: javascript jquery collision-detection isometric

我目前正在使用它进行collsion检测:

    var overlaps = (function () {
    function getPositions( elem ) {
        var pos, width, height;
        pos = $( elem ).position();
        width = $( elem ).width();
        height = $( elem ).height();
        return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ];
    }

    function comparePositions( p1, p2 ) {
        var r1, r2;
        r1 = p1[0] < p2[0] ? p1 : p2;
        r2 = p1[0] < p2[0] ? p2 : p1;
        return r1[1] > r2[0] || r1[0] === r2[0];
    }

    return function ( a, b ) {
        var pos1 = getPositions( a ),
            pos2 = getPositions( b );
        return comparePositions( pos1[0], pos2[0] ) && comparePositions( pos1[1], pos2[1] );
    };

})();

但问题是我使用建筑物的等距图像,因此有一个大的空白区域,您目前无法放置。 例如:
enter image description here

所以我不能让它们更接近彼此。
我该如何解决这个问题,

我的图像加载如下:

<div id='obj' name="build_6" class="build_88" style='top:584px;left:1094px;'><img src ="img/buildings/6.png" /></div>


谢谢,
杰弗里

1 个答案:

答案 0 :(得分:1)

您可能需要使用“真实”重叠检测 - 例如,使用边界框或边界圆/省略号,而不是比较元素大小。

在算法复杂性方面,边界圈可能是最容易实现的。例如,http://mathworld.wolfram.com/Circle-CircleIntersection.html