Question

我做了一个简单的游戏，你可以通过按箭头键移动紫色框。紫色的盒子在蓝色的外围。我希望能够防止紫色的盒子突破蓝色外围并留在里面，我知道这涉及到碰撞，但我似乎不明白如何做到这一点。这是我到目前为止编写的代码：

        <!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做到这一点？

Answer 1

查看jquery animate的step函数。您必须检查对象是否已到达动画的每个步骤的边缘。完成了类似的事情here

请参阅底部的“尝试自己......”链接。

Answer 2

使用盒子时，命中检测非常简单。听起来你正在尝试做的是在静态包含框（#bob）中包含1个可移动框（#k）。

基本概念是为每个关键事件添加一些简单的逻辑检查，检查你想要移动的位置是否会退出边界。如果检查确定新位置将退出边界，则不会打扰动画。

每个方向的检查都会略有不同。

<强> UP

尝试向上移动时，您需要做的就是检查移动框的新上限是否大于 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()确定包含框的宽度。

附加说明

您应该制作#bob position:relative。此时位置将相对于身体标签的位置计算而不是#bob（他们恰好恰好共享相同的坐标）。

“向下”和“向右”存在额外逻辑的原因是DOM中的位置是基于左上角确定的。为了弥补这一点，我们必须分别添加对象的高度或宽度。

背景信息 - HTML / jQuery定位

帮助说明HTML / jQuery定位的图表： https://docs.google.com/drawings/d/121mfxpapfmcRD2UV7qoMY5RdoH-4womiheqDHtQ_YWY/edit

每个元素的坐标都来自它的左上角。

在HTML / jQuery中，绝对定位元素的位置相对于其父元素的原点（为了简单起见，忽略位置继承）。如果其左上角与其父左上角相同，则其位置将为（0,0）。当它离开它的父母的左上角时，它的坐标变成了2个坐标之间的水平（x）和垂直（y）间隙。

你会如何使用javascript和jQuery在下面这个2D游戏中检测到碰撞？

2 个答案: