2012-01-24 15 views
-1

私は、アニメーション機能のjQueryの衝突をチェックしようとしています。 HERESに私のコード、jQueryの衝突検出

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
    <html> 
    <head> 
    <title>nothing</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 == 37) { 
       $('.button0 input').animate({ 
        'left': '+=' + Math.cos(90 * Math.PI/180) * 30 + 'px', 
        'top': '+=' + Math.sin(90 * Math.PI/180) * 30 + 'px' 
       }, 0); 
      } 
     }); 
     $(document).keydown(function(event) { 
      if (event.which == 39) { 
       $('.button0 input').animate({ 
        'left': '+=' + Math.cos(180 * Math.PI/180) * 30 + 'px', 
        'top': '+=' + Math.sin(180 * Math.PI/180) * 30 + 'px' 
       }, 0); 
      } 
     }); 
     $(document).keydown(function(event) { 
      if (event.which == 38) { 
       $('.button0 input').animate({ 
        'left': '+=' + Math.cos(270 * Math.PI/180) * 30 + 'px', 
        'top': '+=' + Math.sin(270 * Math.PI/180) * 30 + 'px' 
       }, 0); 
      } 
     }); 
     $(document).keydown(function(event) { 
      if (event.which == 40) { 
       $('.button0 input').animate({ 
        'left': '+=' + Math.cos(0 * Math.PI/180) * 30 + 'px', 
        'top': '+=' + Math.sin(0 * Math.PI/180) * 30 + 'px' 
       }, 0); 
      } 
     }); 
    }); 
    </script> 
    <style type="text/css"> 
    .button0 input{ 
    position:fixed; 
    left:142px; 
    top:77px; 
    font-family:Arial; 
    font-size:8px; 
    font-weight:NORMAL; 
    } 
    .button1 input{ 
    position:fixed; 
    left:333px; 
    top:58px; 
    font-family:Arial; 
    font-size:8px; 
    font-weight:NORMAL; 
    } 
    </style> 
    <body> 
    <div class="button0"><input type="button" style="width: 59px;height: 58px;" value="Button 0"/></div> 
    <div class="button1"><input type="button" style="width: 113px;height: 76px;" value="Button 1"/></div> 
    </body> 
    </html> 

はbutton0がボタン1に衝突した場合、我々は(移動中に確認せずに)、

をチェックすることができイベントが持っている(このような

何かがいいだろうありイベントとして):

$('.button0 input').collision(function(".button1 input"){ 

答えて

0

jQueryはこのような機能を提供していません。衝突検知のための独自の関数を書くか、3DパーティのjQueryライブラリを使用する必要があります。 gameQueryライブラリを試しましたか?

こちらもquestionです。 jQueryと純粋なJavaScriptソリューションの両方を備えています。

+0

gameQueryで試してみましたがまだ動作しませんhttp://pastebin.com/ZLwUKT3v – thelost