动态元素命中检测系统不工作

Question

在我的项目中，我有一个自动在屏幕上行走的角色。我想检测角色何时到达某个地牢（每个 "dungeon" 是一个 div，里面有一些文字）。

这是我的简化格式代码：

//call the function
console.log(isCollide(characterData[0][0], document.getElementsByClassName("Dungeon_Wrapper_Room")[a])));

var isCollide = function(a, b) {
    //Used to parse get the x/y pixel coordinates by removing the "px" at the end of the string.
    var aTOPstr = a.style.top;
    var aTOP = (parseInt(aTOPstr.slice(0, aTOPstr.length-2)));
    var aLEFTstr = a.style.left;
    var aLEFT = (parseInt(aLEFTstr.slice(0, aLEFTstr.length-2)));

    var bTOPstr = b.style.top;
    var bTOP = (parseInt(bTOPstr.slice(0, bTOPstr.length-2)));
    var bLEFTstr = b.style.left;
    var bLEFT = (parseInt(bLEFTstr.slice(0, bLEFTstr.length-2)));
    console.log(((aTOP + 32) > (bTOP))+" "+(aTOP < (bTOP - 32))+" "+((aLEFT + 32) > bLEFT)+" "+(aLEFT < (bLEFT + 50)));

    return (
        !((aTOP + 32) < (bTOP)) ||
        (aTOP > (bTOP + 50)) ||
        ((aLEFT + 32) < aLEFT) ||
        (aLEFT > (aLEFT + 50))
    );

};

字符图像是动态创建的（最后我将使用 for 循环运行通过字符数组，每个字符都有此检测）。

var characterData = [
    [document.createElement("img"), {/*Misc. Character Data Goes Here*/}]
];
characterData[0][0].src = "images/characters/default.png";
characterData[0][0].style.position = "relative";
characterData[0][0].style.left += ((50-32)/2)+"px";
characterData[0][0].style.top += (-(50-32+25))+"px";
characterData[0][0].id = "character0";
tavernBox.appendChild(characterData[0][0]);

我的HTML:

<div id="Town_Wrapper">
    <div id="townBoxWrapper">
        <div id="tavernBox">
            <!-- Characters are appended here -->
        </div>
    </div>
</div>

<div id="Dungeon_Wrapper">
    <div class='Dungeon_Wrapper_Room'>Boss
        <!--Box character is being detected with-->
    </div>
</div>

我的命中检测基于我在此处找到的答案：但仍然没有成功。

我完全不知道它出了什么问题。我试过切换 < 和其他功能，但仍然找不到任何东西。我也尝试过从 relative 到 absolute 定位，但仍然一无所获。 isCollide 函数需要 return true 或 !false 来指示它已经发生碰撞，但是 if 语句的每个部分总是 returns "false" 并且从来没有单身"true"。

JSFiddle（包含控制台和警报的调试）：https://jsfiddle.net/drfyvLng/

已解决：所选答案解决了 jsfiddle 中出现的问题。在我自己的代码中，我不得不将某个地牢变成绝对定位，并使用 .offsetTOP 和 .offsetLEFT 找到它的位置。此外，我还让 return 公式检测字符何时在框内而不是何时不在框内。

Answer 1

JSfiddle 存在一些问题。

这被计算为 null，因为 css 样式中没有顶部集。

var bTOPstr = b.style.top;

将您的 CSS 更新到这个和那个部分。

<div class='Dungeon_Wrapper_Room' style="background-color: yellow; min-height:50px; top:0px; bottom:50px; left:0px; right:100px">

那么你检查碰撞的 if 语句与你基于它的 if 语句不同，复制代码时要小心！

        !((aTOP + 32) < (bTOP)) ||
        (aTOP > (bTOP + 50)) ||
        ((aLEFT + 32) < aLEFT) ||
        (aLEFT > (aLEFT + 50))

aLeft + 32 < aLeft     should be     aLeft + 32 < bLeft
aLeft > aLeft + 50     should be     aLeft > bLeft + 50

最后，您需要在 if 语句上添加一个括号。您基于它的答案是选中“！”在整个表达式中，你的只使用第一行。

所以现在看起来像这样。

  !(((aTOP + 32) < (bTOP)) ||
    (aTOP > (bTOP + 50)) ||
    ((aLEFT + 32) < bLEFT) ||
    (aLEFT > (bLEFT + 50)))

哪个应该有效。

动态元素命中检测系统不工作

Dynamic element hit detection system not working

javascript

collision-detection