如何测量两个圆之间的距离,然后检查碰撞？

Question

我在jquery/javascript中制作游戏.游戏是用鼠标点击屏幕来击中一个移动物体.我的检测位有问题.是否有jQuery/javascript函数可以随时测量两个对象中心之间的距离？然后,我可以轻松地控制检查两个中心的距离.和如果碰撞.他们都是两个圈子.

<div id="box">
        <div id="prepend">
            <div id="hero"></div>
        </div>

        <div id="enemy"></div>
</div>

"盒子"是游戏发生的区域,"英雄"是你要击中"敌人"的子弹.

Answer 1

要获得距离,请使用公式

function getDistance(obj1,obj2){
    Obj1Center=[obj1.offset().left+obj1.width()/2,obj1.offset().top+obj1.height()/2];
    Obj2Center=[obj2.offset().left+obj2.width()/2,obj2.offset().top+obj2.height()/2];

    var distance=Math.sqrt( Math.pow( Obj2Center[0]-Obj1Center[0], 2)  + Math.pow( Obj2Center[1]-Obj1Center[1], 2) )

    return distance;
}

打电话使用

getDistance($("#obj1"),$("#obj2"));

检查碰撞:

function hasCollision(obj1,obj2){    
    return getDistance(obj1,obj2)<obj1.width()/2+obj2.width()/2;
}

这是一个证明两者的jsfiddle例子