Javascript 陷入逻辑试图定位动态事物

我想我写了一些代码，但考虑到最终结果是行不通的。我希望我在这件事上被证明是错的。我需要一些解释，然后才能问我的问题，所以请容忍我

我有一个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%定位相同时，否则这将不起作用，因为在我的动画中地球需要更小。然后当我的动画需要帮助的时候，我的故事就有点明显了。任何帮助都将不胜感激

我想我会给你提供一个参考，但由于某种原因，当行星的位置与太阳相同时，我无法获得警报，而它在我的本地计算机上对我有效。也许这对你有帮助

尝试使用.offset（）而不是.position（）（检查控制台，使用position时，值永远不会更改，使用offset时，值会更改）

就良好的碰撞检测而言，您可以写一些东西，说明行星的顶部偏移是否大于太阳的顶部偏移，但小于太阳的顶部偏移+太阳的高度，以及左偏移/高度的类似值。当行星在任何方向与太阳接触时触发，你可以在方程式中加入行星的高度和宽度。这需要一些时间

if ( (positionplanet.left > positionsun.left && positionplanet.left < positionsun.left + SUNWIDTH) && (positionplanet.top > positionsun.top && positionplanet.top < positionsun.top + SUNHEIGHT) ) {
    //the planet is completely inside of the sun
} 

if ( (positionplanet.left > positionsun.left - PLANETWIDTH && positionplanet.left < positionsun.left + SUNWIDTH - PLANETWIDTH) && (positionplanet.top > positionsun.top - PLANETHEIGHT && positionplanet.top < positionsun.top + SUNHEIGHT - PLANETHEIGHT) ) {
    //the planet is touching the sun (will need some fiddling I'm sure..)
} 

if（（positionplanet.left>positionsun.left&&positionplanet.leftpositionsun.top&&positionplanet.top位置sun.left-平面宽度和位置planet.left<位置sun.left+太阳宽度-平面宽度）和（（位置planet.top>位置sun.top-平面高度和位置planet.top<位置sun.top+太阳高度-平面高度））{
//这颗行星正在接触太阳（我肯定需要一些摆弄）
} 

根据jQuery文档，您应该能够使用

位置

或

偏移

-

.position（）

方法允许我们检索 相对于偏移父对象的元素。将此与

.offset（）

，它检索相对于 文件。当将新元素放置在另一个元素附近并在其中时 包含相同DOM元素的

.position（）

更有用

因此，这里的问题是，对于不同大小的元素，位置/偏移将不同。即使他们在一起

原因是，当你要求太阳的左定位时，因为它的半径更大，因此是一个更大的圆，所以它的左偏移/位置比地球要小

现在，你只需要解决一个简单的同心圆数学问题——也就是求出太阳边缘和地球边缘之间的距离，然后你需要减去/加上你想要检查的偏移量

---

求两者之间距离的方法是减去半径。现在，我知道

r

值并不是指像素，所以我不确定在您的情况下如何做到这一点，但我认为这应该可以帮助您完成大部分工作。

您可以使用简单的圆碰撞检测，如msdn网站上所述：

---

我建议您为此使用SVG冲突检测算法。帮我看看，这更像是摔跤，而不是玩摔跤：）。我一定接受你的建议。如果你不介意的话，我会暂缓接受你的回答。我很想知道其他人对此的看法。谢谢你的努力！奥杜布克给了我我想要的，但我感谢在这过程中的任何帮助。这正是我所希望的！非常感谢您的帮助。很高兴能提供帮助，祝您的太阳系玩得开心！：）请注意，通过在函数外声明行星，可以使动画运行更平滑/更快。这样你就不用在每个动画上搜索DOM了，这是非常感谢的！

if ( (positionplanet.left > positionsun.left && positionplanet.left < positionsun.left + SUNWIDTH) && (positionplanet.top > positionsun.top && positionplanet.top < positionsun.top + SUNHEIGHT) ) {
    //the planet is completely inside of the sun
} 

if ( (positionplanet.left > positionsun.left - PLANETWIDTH && positionplanet.left < positionsun.left + SUNWIDTH - PLANETWIDTH) && (positionplanet.top > positionsun.top - PLANETHEIGHT && positionplanet.top < positionsun.top + SUNHEIGHT - PLANETHEIGHT) ) {
    //the planet is touching the sun (will need some fiddling I'm sure..)
} 

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);
};

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");
    }
}