動態元素命中不工作

檢測系統在我的項目，我有一個自動走下屏幕的字符。我想要在角色遇到某個地下城時檢測（每個「地下城」都是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以表明其發生了衝突，但如果語句的每個部分始終返回「假」和從未有一個「真」。

的jsfiddle（包含主機和警報調試）：https://jsfiddle.net/drfyvLng/

解決：選定的答案解決了的jsfiddle提出的問題。在我自己的代碼我不得不把一定的地牢成絕對定位，並找到它的位置使用.offsetTOP和.offsetLEFT。此外，我將返回公式檢測爲當角色在箱子內而不是在箱子內部時。

來源

2017-08-08 bdkopen

'if's條件中的表達式與返回的表達式'〜！==！'不一樣。 – Teemu

有同的jsfiddle的幾個問題。

這是計算爲空，因爲沒有在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">

然後你如果檢查碰撞說法是基於你它從一個不同的，複製代碼時要小心！

 !((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)))

應該工作。

來源

2017-08-08 08:03:16

動態元素命中不工作

回答

相關問題