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的位置进行计算（它们现在恰好共享相同的坐标）。
  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 回答