div在达到边界时更改移动方向

Question

我的代码出现问题。我有一个div（id-ball），它默认移动到顶部并离开。然后，当它到达包装块的顶部（id =域）时，“球”应该改变它的移动方向。但它改变了一切错误。这是我的代码。不要嘲笑我的代码技巧，我是新手... :) 我真的明白为什么球继续飞向错误的方向，但我没有任何想法如何我可以修复它，所以请帮助我:)

var ball = document.getElementById('ball'); 


    var timer = setInterval(function() 
     { 
      var posTop = ball.offsetTop; 
      var posLeft = ball.offsetLeft; 
      var ballPositionX = parseFloat(window.getComputedStyle(ball). left) ; 
      var ballPositionY = parseFloat(window.getComputedStyle(ball). top); 

      ball.style.top = --posTop + 'px'; 
      ball.style.left = ++posLeft + 'px'; 

       if(ballPositionX <= 0) 
       { 
        ball.style.top = --posTop + 'px'; 
       } 
       if(ballPositionX <= 550) 
       { 
        ball.style.top = ++posTop + 'px'; 
       } 
       if(ballPositionY <= 0) 
       { 
        ball.style.left = ++posLeft + 'px'; 
       } 
       if(ballPositionY >= 1000) 
       { 
        ball.style.left = --posLeft + 'px'; 
       } 
     }, 10); 

和HTML是在这里：

<div class="field" id="field"> 
     <div id="here"></div> 
     <div class="ball" id="ball"></div> 
     <div class="desk" id="desk"></div> 
    </div> 

，这里是CSS

*{ 
    margin: 0; 
    padding: 0; 
} 
.field{ 
    margin: 15px auto; 
    width: 1000px; 
    height: 650px; 
    border: 1px solid #000; 
    background: aliceblue; 
    position: relative; 
    overflow: hidden; 
} 

.ball{ 
    width: 50px; 
    height: 50px; 
    -webkit-border-radius: 100px; 
    -moz-border-radius: 100px; 
    border-radius: 100px; 
    background: green; 
    -webkit-border: 5px double silver; 
    -moz-border: 5px double silver; 
    -ms-border: 5px double silver; 
    -o-border: 5px double silver; 
    border: 5px double silver; 
    position: absolute; 
    top: 550px; 
    left: 0; 
} 

.desk{ 
    width: 200px; 
    height: 25px; 
    background: darkblue; 
    -webkit-border: 3px double silver; 
    -moz-border: 3px double silver; 
    -ms-border: 3px double silver; 
    -o-border: 3px double silver; 
    border: 3px double silver; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
    position: absolute; 
    top: 610px; 
    left: 10px; 
} 

.blocks{ 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 200px; 
    height: 30px; 
    background: brown; 
    text-align: center; 
    color: lightcoral; 
} 

DEMO：http://jsfiddle.net/n3skLuo3/

Answer 1

基本上你需要沿着x/y轴存储方向（两个表示'increment/decrement_x/y_coordinate'的二进制标志就足够了），这些标志必须在一个场边缘反射时改变。

var ball = document.getElementById('ball'); 
var field = document.getElementById('field'); 
var d_x = 1.0; 
var d_y = 1.0; 
var h_ball = parseFloat(window.getComputedStyle(ball).height); 
var w_ball = parseFloat(window.getComputedStyle(ball).width); 
var h_field = parseFloat(window.getComputedStyle(field).height); 
var w_field = parseFloat(window.getComputedStyle(field).width); 

ball.style.left = '200px'; 
ball.style.top = '200px'; 

var timer = setInterval(function() 
     { 
      var posTop = ball.offsetTop; 
      var posLeft = ball.offsetLeft; 
      var ballPositionX = parseFloat(window.getComputedStyle(ball). left) ; 
      var ballPositionY = parseFloat(window.getComputedStyle(ball). top); 

      if (ballPositionX <= 0)     { d_x = 1.0; } 
      if (ballPositionX >= w_field - w_ball) { d_x = -1.0; } 
      if (ballPositionY <= 0)     { d_y = 1.0; } 
      if (ballPositionY >= h_field - h_ball) { d_y = -1.0; } 

      ball.style.top = (posTop + d_y) + 'px'; 
      ball.style.left = (posLeft + d_x) + 'px'; 
     }, 10); 

d_x/y在上面的代码中表示每个时间步的坐标变化。用这些坐标和速度矢量的长度来重量和缩放它们。

Live demo on jsFiddle