1

矢印キーを押すだけで紫色のボックスを動かすことができる簡単なゲームを作りました。紫色のボックスは青い周囲の内側にあります。紫色のボックスが青色の周囲を突破して内部に留まるのを防ぎたいのですが、これには衝突が含まれていることがわかっていますが、それがどのように行われるのか理解していないようです。これまでに書いたコードは次のとおりです。

        <!DOCTYPE html>
          <html>
        <head>
       <style>
       body
       {
       background-color:pink;
      }
       #bob
        {
      width:400px;
     height:500px;
       padding:10px;
     border:5px solid blue;
      margin:0px;
      }
        </style>
        </head>
        <body>


        <div id="bob">
      <div id="k"  style="background- color:purple;width:40px;height:40px;position:absolute" onkeydown="keydownControl(this)"/>
     </div>

      <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
      </script>
        <script>
    $('html').keyup(function(e){
       if(e.which==37)
     {
   $("#k").animate({left:"-=10px"},1);
    }
   if(e.which==39)
  {
     $("#k").animate({left:"+=10px"},1);
     }
    if(e.which==40)
    {
       $("#k").animate({top:"+=10px"},1);
    }
    if(e.which==38)
      {
   $("#k").animate({top:"-=10px"},1);
       }
       });
   </script>

       </body>
         </html>

それで、私が紫色のボックスを動かしていて、それがたまたま青い正方形に触れているとしましょう。それが起こった場合、それが青い正方形と接触しなくなるまでその方向への移動を停止しなければならない場合、それにより青い正方形から逃げることができなくなります。JSとjQueryを使用してこれを行うにはどうすればよいですか？

4

2 に答える 2

1

jquery animate のstep関数を見てみましょう。アニメーションの各ステップで、オブジェクトがエッジに到達したかどうかを確認する必要があります。非常によく似たことがここで行われます

下部にある「自分で試す...」リンクを参照してください。

于 2012-11-17T15:02:14.163 に答える
0

ボックスを操作する場合、ヒット検出はかなり単純です。あなたがやろうとしているのは、静的なボックス (#bob) 内に 1 つの可動ボックス (#k) を含めることです。

基本的な概念は、移動しようとしている位置が境界を出るかどうかをチェックするいくつかの単純なロジック チェックを各キー アップ イベントに追加することです。新しい位置が境界を出るとチェックで判断された場合、アニメーション化は行われません。

各方向には、わずかに異なるチェックがあります。

上

上に移動しようとするときは、移動ボックスの新しい上限が0より大きいことを確認するだけです。 を使用して、可動ボックスの上限を決定できます。jQuery('#k').position().top

下

下に移動しようとするときは、移動するボックスの新しい下限が含まれているボックスの高さよりも小さいことを確認するだけです。可動ボックスの下限を決定するために使用できます。jQuery('#k').position().top+jQuery('#k').height()そしてjQuery('#bob').height()、収納ボックスの高さを決定します。

左

左に移動しようとするときは、移動ボックスの新しい左境界が0より大きいことを確認するだけです。 を使用して、可動ボックスの左境界を決定できます。jQuery('#k').position().left

右

右に移動しようとするときは、移動するボックスの新しい右境界が含まれているボックスの幅よりも小さいことを確認するだけです。可動ボックスの右境界を決定するために使用できます。jQuery('#k').position().left+jQuery('#k').width()そしてjQuery('#bob').width()、含まれるボックスの幅を決定します。

その他の注意事項

  1. おそらく #bob を作成する必要がありposition:relativeます。現時点では、位置は #bob の位置ではなく body タグの位置を基準にして計算されます (たまたま同じ座標を共有しているだけです)。
  2. 「下」と「右」に追加のロジックがある理由は、DOM 内の位置が左上隅に基づいて決定されるためです。これを補正するには、オブジェクトの高さまたは幅をそれぞれ追加する必要があります。

背景情報 - HTML/jQuery の位置付け

HTML/jQuery の配置を示す図: https://docs.google.com/drawings/d/121mfxpapfmcRD2UV7qoMY5RdoH-4womiheqDHtQ_YWY/edit

各要素の座標は、左上隅から始まります。

HTML/jQuery では、絶対配置された要素の位置は、その親の原点に相対的です(現時点では簡単にするために位置の継承を見落としています)。左上隅が親の左上隅と同じ場合、その位置は (0,0) になります。親の左上隅から離れると、座標は 2 つの座標間の水平 (x) と垂直 (y) のギャップになります。

于 2012-11-17T15:22:42.810 に答える