Question

在我的项目中，我有一个自动走下屏幕的角色。我想在角色遇到某个地牢时检测到（每个“地牢”都是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>

我的点击检测基于我在此处找到的答案：https://stackoverflow.com/a/7301852/7214959，但仍然没有成功。

我完全不知道它有什么问题。我试过切换<和其他功能，但仍然找不到任何东西。我也试过从relative到absolute定位，但仍然没有任何结果。 isCollide函数需要返回true或!false来表示它已经冲突，但if语句的每个部分总是返回“false”，并且永远不会有一个“true”。

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

解决：所选答案解决了jsfiddle中出现的问题。在我自己的代码中，我必须将某个地牢变成绝对定位并找到其位置使用.offsetTOP和.offsetLEFT。另外，当角色在盒子里面而不是在盒子里面时，我做了返回公式检测。

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语句中使用另一个括号。根据它的答案是检查＆＃39;！＆＃39;在整个表达式上，你只使用第一行。

所以现在它看起来像这样。

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

哪个应该有用。

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

1 个答案: