2015-02-23 51 views
0

我的代碼出現問題。我有一個div(id-ball),它默認移動到頂部並離開。然後,當它到達包裝塊的頂部(id =域)時,「球」應該改變它的移動方向。但它改變了一切錯誤。這是我的代碼。不要嘲笑我的代碼技巧,我是新手... :) 我真的明白爲什麼球繼續飛向錯誤的方向,但我沒有任何想法如何我可以修復它,所以請幫助我:)div在達到邊界時更改移動方向

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/

+0

你能提供演示嗎? – 2015-02-23 11:56:10

+0

你可以創建一個jsfiddle嗎? – Ejaz 2015-02-23 11:56:17

+0

是的,當然。鏈接是在我的問題的底部。 – BrainOverflow 2015-02-23 12:02:04

回答

2

基本上你需要沿着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

+0

也許帆布將是一個很好的工具來解決這個問題,但我的任務是編寫這個程序沒有它:c – BrainOverflow 2015-02-23 12:16:39

+0

沒有畫布需要。小提琴中的版本應該讓你開始。 – collapsar 2015-02-23 12:17:09

+0

非常感謝您的幫助!真的很好。 – BrainOverflow 2015-02-23 12:36:58