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

Question

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

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

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

“box”是游戏发生的区域，“英雄”是你要击中“敌人”的子弹。

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 example演示

Answer 2

您可以使用以下内容：

var $this = $(this);
var offset = $this.offset();
var width = $this.width();
var height = $this.height();

var centerX = offset.left + width / 2;
var centerY = offset.top + height / 2;

为两者执行此操作，然后计算这些值之间的差异。

Answer 3

没有一个，但其实很简单：

1. 获取当前项目的绝对坐标以及宽度和高度
2. 计算中心点（x +宽度/ 2，y +高度/ 2）
3. 为两个圈子执行此操作
4. 使用三角函数计算这两点之间的距离：x的平方差加上y的平方差，取平方根=距离
5. 如果距离减去两个圆的半径大于0，则不发生碰撞。如果为0：它们触摸，如果小于0，则它们相撞。