1. Accueil
  2. Question et réponse
  3. La fonction javascript pour les éléments en mouvement accède à plus d'éléments qu'il ne le devrait.

La fonction javascript pour les éléments en mouvement accède à plus d'éléments qu'il ne le devrait.

2017-10-18 4 views
1

Je voudrais que le carré bleu clair aille à droite, et que le carré orange descende en même temps. Mais ils vont tous deux en diagonale. Je comprends un peu ce qui se passe ici, mais je ne vois pas pourquoi cela se passe ou comment le réparer. Il semble que les deux appels de fonction affectent les deux éléments. Merci!La fonction javascript pour les éléments en mouvement accède à plus d'éléments qu'il ne le devrait.

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");

Source

2017-10-18 Bobby Browb

+0

Avez-vous essayé d'effectuer un pas/débogage/enregistrement pour voir où les choses vont mal? https://ericlippert.com/2014/03/05/how-to-debug-small-programs/ Voir aussi: https://stackoverflow.com/help/how-to-ask parce que vous n'allez pas obtenir beaucoup de bonnes réponses pour "déboguer mon code pour moi". – jdv

+0

Merci! Mal essayer ceux-là! –

Répondre

0

Vous pourriez avoir des erreurs dans votre code d'origine. Essayez this. (Version untidy - vous pouvez nettoyer plus tard) 

<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")

Source

2017-10-18 14:49:51

 Questions connexes

  • Aucun problème connexe^_^