Js僅在if中識別數組的前2個元素

Question

基於我的老問題，我開始從頭開始在html / js / css中重建游戲。 當我只有玩家和1個積木，但沒有2個或更多積木時，這似乎起作用。

我復制了有關使用一個數組將對象推入內部的概念。 然后，我使用一個for-of循環而不是過濾器對該數組進行一個函數的移動，並檢查curentElement（player 0）是否與Obj（由循環選擇）不同，然后檢查位置和記錄是否碰到東西。 這是我的代碼：

 window.addEventListener("keydown",function Keydown(e) { if (e.keyCode==37||e.keyCode==65) { for (i=0;i<16;i++) { if(move(currentElement,[-1,0])){break}; } } else if (e.keyCode==38||e.keyCode==87) { for (i=0;i<16;i++) { if(move(currentElement,[0,1])){break}; } } else if (e.keyCode==39||e.keyCode==68) { for (i=0;i<16;i++) { if(move(currentElement,[1,0])){break}; } } else if (e.keyCode==40||e.keyCode==83) { for (i=0;i<16;i++) { if(move(currentElement,[0,-1])){break}; } } return 0; } ); function move(element,direction) { let newX=element.x+direction[0]; let newY=element.y+direction[1]; for (let Obj of Objects) { if (element!==Obj) { if (newX>=0&&newY>=0&&(newX+element.width)<=world.width&&(newY+element.height)<=world.height&&(newX>=(Obj.x+Obj.width)||newY>=(Obj.y+Obj.height)||(newX+element.width)<=Obj.x||(newY+element.height)<=Obj.y)) { element.x=newX; element.y=newY; element.setPosition(); break; } else if (newX<=0&&direction[1]==0) {console.log("Off the world to the left")} else if (newY<=0&&direction[0]==0) {console.log("Off the world to the bottom")} else if ((newX+element.width)>=world.width&&direction[1]==0) {console.log("Off the world to the right")} else if ((newY+element.height)>=world.height&&direction[0]==0) {console.log("Off the world to the top")} else if (newX<=(Obj.x+Obj.width)) {console.log("Hitting to the right:",Obj)} else if (newY<=(Obj.y+Obj.height)) {console.log("Hitting to the top:",Obj)} else if ((newX+element.width)>=Obj.x) {console.log("Hitting to the left:",Obj)} else if ((newY+element.height)>=Obj.y) {console.log("Hitting to the bottom:",Obj)} return 1 } } return 0; } function CreateObject(element,x,y) { const Hitbox={ "class":element.className, "x":x, "y":y, "width":element.offsetWidth, "height":element.offsetHeight, "setPosition":function(){element.style.left=this.x+"px";element.style.bottom=this.y+"px";}, } Hitbox.setPosition(); Objects.push(Hitbox); return Hitbox; } const world={ "width":document.getElementById("world").offsetWidth, "height":document.getElementById("world").offsetHeight }; Objects=[]; const player=[ CreateObject(document.getElementsByClassName("player")[0],0,0) ]; const brick=[ CreateObject(document.getElementsByClassName("brick")[0],96,0), CreateObject(document.getElementsByClassName("brick")[1],128,32) ]; const currentElement=player[0];

 #world { position:absolute; top:0px; left:0px; background-color:blue; width:640px; height:320px; } .player { position:absolute; background-color:red; width:32px; height:32px; } .brick { position:absolute; background-color:yellow; width:32px; height:32px; }

 <body> <div id="world"> <div class="player"></div> <div class="brick"></div> <div class="brick"></div> </div> <script src="./js/physics.js"></script> </body>

它應該只是阻止我撞到第二塊磚（第一塊阻止我並記錄它），但是相反，它讓我通過並且不對其進行任何記錄。 它希望獲得正確的x，y，width，height，setPosition值，所以我認為這是由於move函數中的if語句引起的，但我不確定。 有人可以解釋我為什么會發生這種情況嗎？ 我在Google上搜索了很多，但搜索到的東西似乎都不是。 PS：我想保留不帶jQuery的代碼，但是如果有必要做一些技巧，我將使用它。

Answer 1

在處理第一個non- currentElement對象之后，您將從move函數的for循環中return ：

function move(element,direction) {
    let newX=element.x+direction[0];
    let newY=element.y+direction[1];
    for (let Obj of Objects) {
        if (element!==Obj) {
            if (newX>=0&&newY>=0&&(newX+element.width)<=world.width&&(newY+element.height)<=world.height&&(newX>=(Obj.x+Obj.width)||newY>=(Obj.y+Obj.height)||(newX+element.width)<=Obj.x||(newY+element.height)<=Obj.y)) {
                element.x=newX;
                element.y=newY;
                element.setPosition();
                break;
            } else if (newX<=0&&direction[1]==0) {console.log("Off the world to the left")}
            else if (newY<=0&&direction[0]==0) {console.log("Off the world to the bottom")}
            else if ((newX+element.width)>=world.width&&direction[1]==0) {console.log("Off the world to the right")}
            else if ((newY+element.height)>=world.height&&direction[0]==0) {console.log("Off the world to the top")}
            else if (newX<=(Obj.x+Obj.width)) {console.log("Hitting to the right:",Obj)}
            else if (newY<=(Obj.y+Obj.height)) {console.log("Hitting to the top:",Obj)}
            else if ((newX+element.width)>=Obj.x) {console.log("Hitting to the left:",Obj)}
            else if ((newY+element.height)>=Obj.y) {console.log("Hitting to the bottom:",Obj)}

            // Probably do NOT want to return here.. but rather just continue through the 
            // rest of the objects in Objects**
            return 1
        }
    }
    return 0;
}

Js僅在if中識別數組的前2個元素

問題描述

1 個解決方案

解決方案1
0 2019-01-02 16:39:51

Js僅在if中識別數組的前2個元素

問題描述

1 個解決方案

解決方案1 0 2019-01-02 16:39:51

解決方案1
0 2019-01-02 16:39:51