热门属性不会更新。函数只有当我设置如果函数值=初始顶值在javascript

问题描述：

我正在研究碰撞检测，并认为我会开始通过测试时，对象达到某个x位置简单。当我将它设置为100时，它起作用，它是'字符的最初的最高值，这导致我相信问题与最新的更新有关;但是，我不明白为什么这些圈子会移动，如果是这种情况。如果你可以告诉我如何保持“顶部”更新或更好，帮助我碰撞检测，这将是伟大的！我知道将css，javascript和html放在一个页面中并不好，我把它作为网站的一部分，但把它移到了一个文件中，这样我就可以单独测试它，而无需查看代码整个网站和我将它添加到适当的文件，一旦我得到这个想通了。）热门属性不会更新。函数只有当我设置如果函数值=初始顶值在javascript

<html> 
    <head> 
     <style> 
     #character { 
     position: absolute; 
     width: 42px; 
     height: 42px; 
     background: black; 
     border-radius: 50%; 
     } 
     #character2 { 
     position: absolute; 
     width: 42px; 
     height: 42px; 
     background: pink; 
     border-radius: 50%; 
    } </style> 
    </head> 
    <body> 

    <div id = 'character'></div> 
    <div id = 'character2'></div> 

    <script> 
    var keys = {}; 
      keys.UP = 38; 
      keys.LEFT = 37; 
      keys.RIGHT = 39; 
      keys.DOWN = 40; 
      keys.W = 87; 
      keys.A = 65; 
      keys.D = 68; 
      keys.S = 83; 

     /// store reference to character's position and element 
     var character = { 
      x: 1000, 
      y: 100, 
      speedMultiplier: 1, 
      element: document.getElementById("character") 
     }; 

     var character2 = { 
      x: 100, 
      y: 100, 
      speedMultiplier: 3, 
      element: document.getElementById("character2") 
     }; 


     /// key detection (better to use addEventListener, but this will do) 
     document.body.onkeyup = 
     document.body.onkeydown = function(e){ 
      /// prevent default browser handling of keypresses 
      if (e.preventDefault) { 
      e.preventDefault(); 
      } 
      else { 
      e.returnValue = false; 
      } 
      var kc = e.keyCode || e.which; 
      keys[kc] = e.type == 'keydown'; 
     }; 

     /// character movement update 
     var moveCharacter = function(dx, dy){ 
      character.x += (dx||0) * character.speedMultiplier; 
      character.y += (dy||0) * character.speedMultiplier; 
      character.element.style.left = character.x + 'px'; 
      character.element.style.top = character.y + 'px'; 
     }; 

    var moveCharacter2 = function(dx, dy){ 
      character2.x += (dx||0) * character2.speedMultiplier; 
      character2.y += (dy||0) * character2.speedMultiplier; 
      character2.element.style.left = character2.x + 'px'; 
      character2.element.style.top = character2.y + 'px'; 
     }; 
     /// character control 
     var detectCharacterMovement = function(){ 
      if (keys[keys.LEFT]) { 
      moveCharacter(-1, 0); 
      } 
      if (keys[keys.RIGHT]) { 
      moveCharacter(1, 0); 
      } 
      if (keys[keys.UP]) { 
      moveCharacter(0, -1); 
      } 
      if (keys[keys.DOWN]) { 
      moveCharacter(0, 1); 
      } 
      if (keys[keys.A]) { 
      moveCharacter2(-1, 0); 
      } 
      if (keys[keys.D]) { 
      moveCharacter2(1, 0); 
      } 
      if (keys[keys.W]) { 
      moveCharacter2(0, -1); 
      } 
      if (keys[keys.S]) { 
      moveCharacter2(0, 1); 
      } 
     }; 


     /// update current position on screen 
     moveCharacter(); 
     moveCharacter2(); 

     /// game loop 
     setInterval(function(){ 
      detectCharacterMovement(); 
     }, 1000/24); 

    function getPosition() { 

     var elem = document.getElementById("character"); 
    var top = getComputedStyle(elem).getPropertyValue("top"); 
    if (top == '200px') { 
     alert ("hi"); 
    } 
    getPosition() 
    } 
    getPosition() 
    //  var pos1 = document.getElementById('character').style.top 


    </script> 
    </body> 
    </html>

答

我想通了！我只是添加了Jquery的.position（）来获得坐标！对于碰撞检测，我补充说：

function collision1() { 
    $(document).ready(function(){ 
     var x = $("#character").position(); 
     var y = $("#character2").position(); 
     var zid = '#' + id 
     var z = $(zid).position(); 
     var topX = parseInt(x.top); 
     var topZ = parseInt(z.top); 
     var leftX = parseInt(x.left); 
     var leftZ = parseInt(z.left); 
     var topY = parseInt(y.top); 
     var leftY = parseInt(y.left); 
     if (topX > topZ && topX < (topZ + 50) && leftX > leftZ && leftX < (leftZ + 100)) { 
      alert('Player 1 Won! Click restart to play again.') 
      document.getElementById("button2").style.display = "block"; 
      document.getElementById("def").style.display = "none"; 
      document.getElementById("def2").style.display = "none"; 
      document.getElementById("def3").style.display = "none"; 
      document.getElementById("def4").style.display = "none"; 
      document.getElementById("term").style.display = "none"; 
     } 
    else { 
    collision1()} 
});}

我知道这可能不是编程这个最有效的方法，但它的工作原理！

热门属性不会更新。函数只有当我设置如果函数值=初始顶值在javascript

相关推荐