javascript - 坚持逻辑试图定位一些动态的东西

Question

我想我写了一些代码时心里想着最终结果，但它行不通。我希望在这种情况下我被证明是错误的。在我提出问题之前，我需要一些解释，所以请耐心等待。

我有一个 svg 元素的动画，它看起来像围绕太阳旋转的地球。我已经编写了我的代码，以便它确实围绕它旋转并最终撞向太阳的死点。随之而来的是其他动画，比如某种爆炸。因此，我想知道太阳的哪一侧受到影响，因为动画是交互式的，因为单击按钮决定碰撞过程何时开始，这意味着所有方面都有可能。

var positionplanet = $("#Earth").position();
var positionsun = $("#Sun").position();
if((Math.round(positionplanet.left)) == (Math.round(positionsun.left)) && (Math.round(positionplanet.top)) == (Math.round(positionsun.top)))
{alert('booya')}

我认为通过上面的代码，当行星位于与太阳完全相同的坐标时，我可以提醒自己，并从那里开始工作。当水平(左)坐标相同时，垂直坐标(顶部)相同。

我的问题是警报仅在行星与太阳大小相同时才有效——当然，只有这样它才会被放置在与太阳一样远和高的地方就像太阳一样。如果行星比太阳小几个像素，它也离太阳远几个像素。

我需要的是是太阳的位置，不过也就差了百分之几，我不知道。我坚持这个逻辑，因为在使用旋转元素时高度和宽度可以切换位置! 我希望行星与太阳接壤，然后触发警报，而不是当它 100% 位于同一位置时，否则这不会起作用，因为在我的动画中地球需要小得多。然后当我的动画需要帮助时，因为我的故事很明显。任何帮助将不胜感激。

我想我会为您提供 FIDDLE仅供引用，但出于某种原因，当行星与太阳的位置相同时，我无法收到警报，而它在我的本地计算机上确实对我有用。也许无论如何它都会帮助你!

Answer 1

您可以使用简单的圆形碰撞检测，如 msdn 网站上所述:https://msdn.microsoft.com/en-us/library/dn265052(v=vs.85).aspx

function circlesOverlap(circleA, circleB) { // Returns true if the SVG circles A and B overlap, false otherwise.
    var deltaX = circleA.cx.baseVal.value - circleB.cx.baseVal.value;
    var deltaY = circleA.cy.baseVal.value - circleB.cy.baseVal.value;
    var distance = Math.sqrt( (deltaX*deltaX) + (deltaY*deltaY) ); // The classic distance-between-two-points formula.
    var radiusA = circleA.r.baseVal.value; // The radius of circle A.
    var radiusB = circleB.r.baseVal.value; // The radius of circle B.

    if (circleA.id == circleB.id) // If true, circleA and circleB are the same circle.
      return false;

    return distance <= (radiusA + radiusB);
};

使用你的 fiddle ，这就是它给出的: https://jsfiddle.net/odubuc/qk3qrwbp/15/

您的动画功能现在非常简单:

function animate () {
    var earth = document.getElementById("Earth"),
        sun = document.getElementById("Sun");

    planetrotation("Earth");  

    if( circlesOverlap(earth, sun) )
    {
        earth.setAttribute("fill-opacity", "0.0"); 
        sun.setAttribute("fill-opacity", "0.0");
    }
}