Как измерить расстояние между двумя кругами, а затем проверить наличие столкновения?

Question

Я делаю игру в jquery/javascript. И игра заключается в ударе по одному движущемуся объекту с помощью мыши, чтобы щелкнуть по экрану. У меня проблема с битом обнаружения. Есть ли функция jQuery/javascript, которая может замерять расстояние между центром двух объектов за все время? Becasue, тогда я могу легко сделать контроль, проверяя расстояние между двумя центрами. и se, если столкновение. Они оба два круга.

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

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

Где «окно» является областью, где игра имеет место, «герой» пуля, что вы собираетесь ударить «врага».

Answer 1

Вы можете использовать следующее:

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 2

Существует не один, но его довольно просто на самом деле:

1. Получить абсолютные COORDS текущего элемента, а также ширина и высота
2. Вычислить центральную точку (х + ширина/2, у + высота/2)
3. ли, что для обоего кругов
4. использования тригонометрических функций для вычисления расстояния между этими двумя точками: разность х в квадрате плюс разности у в квадрате, возьмите квадратный корень, что = расстояние
5. , если расстояние минус радиус обоих кругов больше 0, никакого столкновения. Если 0: они касаются, если меньше 0, они сталкиваются.

Answer 3

Чтобы получить расстояние использовать формулу

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 демонстрируя и