1. 首頁
  2. 問答
  3. 移動元素的javascript函數正在訪問比它應該更多的元素。

移動元素的javascript函數正在訪問比它應該更多的元素。

2017-10-18 21 views
1

我想讓lightblue廣場向右走，橙色廣場同時向下走。但他們都是對角線。我知道這裏發生了什麼，但我不明白它爲什麼會發生或如何解決。看起來這兩個函數調用都影響這兩個元素。謝謝！移動元素的javascript函數正在訪問比它應該更多的元素。

的jsfiddle：https://jsfiddle.net/8apLsmp7/1/

 function moveElem(dir, xPos, yPos, element, index, container){ 

      //Getting width and height of container and item elements 
      var elem = document.getElementsByClassName(element); 
      var w = elem[index].offsetWidth; 
      var h = elem[index].offsetHeight; 
      var contw = document.getElementById(container).offsetWidth; 
      var conth = document.getElementById(container).offsetHeight; 
      var vertEnd = contw - w; 
      var horiEnd = conth - h; 

      //clean up variables to make sure they comply with the width and height of the container 
      if (xPos > vertEnd){ 
       x = vertEnd; 
      } else if (xPos < 0){ 
       x = 0; 
      } else { 
       x = xPos; 
      }    

      if (yPos > horiEnd){ 
       y = horiEnd; 
      } else if (yPos < 0){ 
       y = 0; 
      } else { 
       y = yPos; 
      } 

      //position the element 
      elem[index].style.left = x + 'px'; 
      elem[index].style.top = y + 'px'; 


      //set timer, speed and friction 
      var timer = setInterval(frame, 5); 
      var spd = 10; 
      var friction = 0.987; 

      //what runs every interval 
      function frame(){ 
       //check if to move right 
       if (dir === "right"){ 
        if (x >= vertEnd){ 
         clearInterval(timer); 
         x = vertEnd; 
         elem[index].style.left = x + 'px'; 
         elem[index].style.top = y + 'px'; 

        } else { 
         elem[index].style.top = y + 'px'; 
         elem[index].style.left = x + 'px'; 
         x += spd; 
         spd *= friction; 

        } 
       //check if to move left 
       } else if (dir === "left"){ 
        if (x <= 0){ 
         clearInterval(timer); 
         x = 0; 
         elem[index].style.left = x + 'px'; 
         elem[index].style.top = y + 'px'; 

        } else { 
         elem[index].style.top = y + 'px'; 
         elem[index].style.left = x + 'px'; 
         x -= spd; 
         spd *= friction; 

        } 
       //check if to move up 
       } else if (dir === "up"){ 
        if (y <= 0){ 
         clearInterval(timer); 
         y = 0; 
         elem[index].style.left = x + 'px'; 
         elem[index].style.top = y + 'px'; 

        } else { 
         elem[index].style.left = x + 'px'; 
         elem[index].style.top = y + 'px'; 
         y -= spd; 
         spd *= friction; 

        } 
       //check if to move down 
       } else if (dir === "down"){ 
        if (y >= horiEnd){ 
         clearInterval(timer); 
         y = horiEnd; 
         elem[index].style.left = x + 'px'; 
         elem[index].style.top = y + 'px'; 

        } else { 
         elem[index].style.left = x + 'px'; 
         elem[index].style.top = y + 'px'; 
         y += spd; 
         spd *= friction; 

        } 
       } 
      } 
     } 
     moveElem("right", 0, 0, "item", 0, "cont"); 
     moveElem("down", 0, 0, "item", 1, "cont");

來源

2017-10-18 Bobby Browb

+0

您是否嘗試過步進/調試/日誌記錄以查看出錯的地方？ https://ericlippert.com/2014/03/05/how-to-debug-small-programs/另請參閱：https：//stackoverflow.com/help/how-to-ask，因爲你不會得到「爲我調試我的代碼」有很多很好的答案。 – jdv

+0

謝謝！生病嘗試那些！ –

回答

0

你可能在你的原代碼一些錯誤。試試this。 （凌亂的版本 - 您可以在以後清理） 

<body> 
    <div id="cont"> 
    <div id="item1" class="item"></div> 
    <div id="item2" class="item"></div> 
    </div> 
</body> 

//what runs every interval 
function frame(obj) { 
    const { 
    dir, 
    spd, 
    friction, 
    elem, 
    vertEnd, 
    horiEnd, 
    x, 
    y 
    } = obj; 
    //check if to move right 
    if (dir === "right") { 
    if (x >= vertEnd) { 
     //clearInterval(timer); 
     obj.x = vertEnd; 
     elem.style.left = x + 'px'; 
     elem.style.top = y + 'px'; 

    } else { 
     elem.style.top = y + 'px'; 
     elem.style.left = x + 'px'; 
     obj.x += spd; 
     obj.spd *= friction; 

    } 
    //check if to move left 
    } else if (dir === "left") { 
    if (x <= 0) { 
     //clearInterval(timer); 
     obj.x = 0; 
     elem.style.left = x + 'px'; 
     elem.style.top = y + 'px'; 

    } else { 
     elem.style.top = y + 'px'; 
     elem.style.left = x + 'px'; 
     obj.x -= spd; 
     obj.spd *= friction; 

    } 
    //check if to move up 
    } else if (dir === "up") { 
    if (y <= 0) { 
     //clearInterval(timer); 
     obj.y = 0; 
     elem.style.left = x + 'px'; 
     elem.style.top = y + 'px'; 

    } else { 
     elem.style.left = x + 'px'; 
     elem.style.top = y + 'px'; 
     obj.y -= spd; 
     obj.spd *= friction; 

    } 
    //check if to move down 
    } else if (dir === "down") { 
    if (y >= horiEnd) { 
     //clearInterval(timer); 
     obj.y = horiEnd; 
     elem.style.left = x + 'px'; 
     elem.style.top = y + 'px'; 

    } else { 
     elem.style.left = x + 'px'; 
     elem.style.top = y + 'px'; 
     obj.y += spd; 
     obj.spd *= friction; 

    } 
    } 
} 

function moveElem(dir, xPos, yPos, element, index, container) { 

    //Getting width and height of container and item elements 
    var elem = document.getElementById(element); 
    var w = elem.offsetWidth; 
    var h = elem.offsetHeight; 
    var contw = document.getElementById(container).offsetWidth; 
    var conth = document.getElementById(container).offsetHeight; 
    var vertEnd = contw - w; 
    var horiEnd = conth - h; 

    //clean up variables to make sure they comply with the width and height of the container 
    if (xPos > vertEnd) { 
    x = vertEnd; 
    } else if (xPos < 0) { 
    x = 0; 
    } else { 
    x = xPos; 
    } 

    if (yPos > horiEnd) { 
    y = horiEnd; 
    } else if (yPos < 0) { 
    y = 0; 
    } else { 
    y = yPos; 
    } 

    //position the element 
    elem.style.left = x + 'px'; 
    elem.style.top = y + 'px'; 


    //set timer, speed and friction 
    var spd = 10; 
    var friction = 0.987; 
    var obj = { 
    dir, 
    spd, 
    friction, 
    elem, 
    vertEnd, 
    horiEnd, 
    x, 
    y 
    }; 
    var timer = setInterval(function() { 
    frame(obj) 
    }, 5); 

} 
moveElem("right", 0, 0, "item1", 0, "cont"); 
moveElem("down", 0, 0, "item2", 1, "cont")

來源

2017-10-18 14:49:51

相關問題

 相關問題