2012-01-25 40 views
-2

林做與jQuery的碰撞檢測系統,但它似乎並沒有工作。有兩個按鈕。您可以用右鍵移動一個按鈕。一旦碰撞按鈕之一應該改變字體顏色。現在,即使沒有觸摸另一個按鈕,該按鈕也會始終改變顏色。試試看,如果你有一些問題了解我。jQuery開發的簡單衝突錯誤,

感謝,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
     <title>my website</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
     <script type="text/javascript"> 
      $(function() { 
       $(document).keydown(function(event) { 
        if (event.which == 39){ 
         $('.button0 input').animate({'left': '+='+Math.cos(0*Math.PI/180) *30+'px','top': '+='+Math.sin(0*Math.PI/180) *30+'px'},30); 
        }; 
        button0button1(); 
       }); 
       function button0button1(){ 
        var div1=$('.button0 input'); 
        var div2=$('.button1 input'); 
        if ((div1.offset().top+div1.outerHeight(true)) < div2.offset().top || div1.offset().top > (div2.offset().top+div2.outerHeight(true)) || (div1.offset().left+div1.outerWidth(true)) < div2.offset().left || div1.offset().left > (div2.offset().left+div2.outerWidth(true))){ 
         $('.button0 input').css('color', 'rgb(0, 128, 255)'); 
        }; 
       }; 
      }); 
     </script> 
     <style type="text/css"> 
      .button0 input{ 
       position:fixed; 
       left:30px; 
       top:213px; 
       font-family:MS Shell Dlg 2; 
       font-size:8px; 
       font-weight:NORMAL; 
      } 
      .button1 input{ 
       position:fixed; 
       left:185px; 
       top:217px; 
       font-family:MS Shell Dlg 2; 
       font-size:8px; 
       font-weight:NORMAL; 
      } 
     </style> 
    <body> 
     <div class="button0"><input type="button" style="width: 73px;height: 67px;" value="Button"/></div> 
     <div class="button1"><input type="button" style="width: 61px;height: 56px;" value="Button"/></div> 
    </body> 
</html> 
+1

爲什麼你甚至有'0 *'什麼東西? – Ryan

+0

即時通訊使用一個程序 – thelost

回答

0

我沒有檢查所有代碼(這有點在其目前的形式令人費解),但我提出了兩個問題:

1)你有至少一個比較運算符錯誤:(div1.offset().left+div1.outerWidth(true)) < div2.offset().left,應該是>; 2)由於動畫不會立即改變組件的位置,因此應該調用button0button1作爲動畫的回調,否則按鈕會在動畫結束時/在動畫結束時發生碰撞,但代碼會報告它們因爲不會碰撞。

$('.button0 input').animate({...},30,button0button1); 
// button0button1(); // Delete/comment this line