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

Question

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

<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 示例

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 + width/2, y + height/2)
3. 对两个圈子都这样做
4. 使用三角函数计算这两个点之间的距离：x 平方差加上 y 平方差，取其平方根 = 距离
5. 如果距离减去两个圆的半径大于0，则没有碰撞。如果为0：他们接触，如果小于0，他们碰撞。