如何使用javascript和jQuery在下面的2d游戏中检测冲突？_Javascript_Jquery_Collision Detection_Collision

如何使用javascript和jQuery在下面的2d游戏中检测冲突？

javascript jquery

如何使用javascript和jQuery在下面的2d游戏中检测冲突？,javascript,jquery,collision-detection,collision,Javascript,Jquery,Collision Detection,Collision,我做了一个简单的游戏，你可以通过按箭头键来移动一个紫色的盒子。紫色的盒子在蓝色的周界内。我希望能够阻止紫色盒子冲破蓝色的边界，呆在里面，我知道这涉及到碰撞，但是我似乎不明白如何做到这一点。以下是我迄今为止编写的代码： <!DOCTYPE html> <html> <head> <style> body { background-color:p

我做了一个简单的游戏，你可以通过按箭头键来移动一个紫色的盒子。紫色的盒子在蓝色的周界内。我希望能够阻止紫色盒子冲破蓝色的边界，呆在里面，我知道这涉及到碰撞，但是我似乎不明白如何做到这一点。以下是我迄今为止编写的代码：

        <!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>


身体
{
背景颜色：粉红色；
}
#鲍勃
{
宽度：400px；
高度：500px；
填充：10px；
边框：5px纯蓝色；
边际：0px；
}
$（'html'）.keyup（函数（e）{
如果（e.which==37）
{
$（“#k”）。动画（{左：“-=10px”}，1）；
}
如果（e.which==39）
{
$（“#k”）。动画（{左：+=10px}，1）；
}
如果（e.which==40）
{
$（“#k”）。动画（{top:+=10px}，1）；
}
如果（e.which==38）
{
$（“#k”）。动画（{top::-=10px}，1）；
}
});

假设我正在移动紫色的盒子，它正好碰到蓝色的正方形。如果发生这种情况，它必须停止向那个方向移动，直到它不再与蓝色方块接触，从而阻止它逃离蓝色方块。使用JS和jQuery，我将如何做到这一点？

看看jqueryanimate的

步骤

函数。必须在动画的每个步骤检查对象是否已到达边缘。类似的事情也发生了

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

查看jquery动画的

步骤

功能。必须在动画的每个步骤检查对象是否已到达边缘。类似的事情也发生了

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

使用方框时，点击检测相当直接。听起来您试图做的是在静态包含框（#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（）

来确定包含框的宽度

附加注释

您可能应该使#bob

位置：relative

。此时，位置将相对于body标记的位置而不是bob的位置进行计算（它们现在正好共享相同的坐标）

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

背景信息-HTML/jQuery定位

有助于说明HTML/jQuery定位的图表：

每个元素的坐标从其左上角开始

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

使用方框时，命中检测相当直接。听起来您试图做的是在静态包含框（#bob）中包含1个可移动框（#k）