javascript - 在testCollision函数之后查找矩形的哪一侧发生碰撞

This question already has answers here:

html5 canvas elastic collision squares
                                
                                    （2个答案）
                                
                        
                                3年前关闭。
            
                    
我目前有两个对象bulletList和敌人List，每个对象都包含其在画布上的X和Y位置的属性。我要编程的是找出子弹碰撞敌人的那一侧。 if语句在testCollision函数之后运行

到目前为止，我已经创建了这个：

if(bulletLocationY < enemyLocationY)

    console.log("Above");

if(bulletLocationY > enemyLocationY)

    console.log("Below");


if(bulletLocationX < enemyLocationX)
    console.log("Left");


if(bulletLocationX > enemyLocationX)
  console.log("Right");

当前游戏示例：https://jsfiddle.net/pktxmc3y/

实际上，我想做的是，当子弹击中左侧的红色敌人时，敌人向右移动，反之亦然。当我从上方击中敌人时，它会向下移动，反之亦然。我发现困难的一点是确定子弹击中矩形的那一侧。

编辑：只是为了添加到正确的答案，我也成功使用了：

if(bulletLocationY - (bulletHeight/2) < enemyLocationY  - (enemyHeight/2))

    console.log("Above");

if(bulletLocationY + (bulletHeight/2) > enemyLocationY + (enemyHeight/2))

    console.log("Below");


if(bulletLocationX - (bulletWidth/2)< enemyLocationX - (enemyWidth/2))
    console.log("Left");


if(bulletLocationX + (bulletWidth/2)> enemyLocationX + (enemyWidth/2))
  console.log("Right");

最佳答案

您不能仅从子弹的当前位置知道子弹从何处被击中。现在，子弹位于敌人内部，例如，如果子弹位于左上方，那么它可能也来自左侧或顶部。

因此，您需要存储项目符号的先前位置。

根据旧职位所在的“象限”，然后您可以决定应采取的举动。

我做了一张小图来解释：



您会发现，如果子弹先前位于“水平走廊”（在我的工程图中为红色）中，那么您知道它是向左还是向右：现在只需测试x是在左侧还是在右侧即可。

“垂直走廊”（蓝色）也是如此。

然后，如果子弹不在那些走廊中，那么您将遇到一个角碰撞，并且要处理四个箱子。

伪代码：

 if ( bullet was previously in the red horizontal corridor)  {
     if ( was on the left )
          left collision
     else
          right collision
 } else if ( bullet was previously in the blue vertical corridor) {
     if ( up )
           up collision
     else
           down collision
 } else { // corner case
     // ... Test which of the 4 corner it was in
     if (was upper) {
           if (was left )
               up and left
           else
               up and right
     } else { // lower
           if (was left )
               down and left
           else
               down and right
     }
 }

例如，第一个if写道：

if ( Math.abs(oldBulletY-enemyY) < enemiHeight/2 ) {
    if (oldBulletX < enemyX ) {
       // collision on the left
    } else {
       // collision on the right
    }
}

请注意，这是一个近似值：在对角线击中的情况下，子弹也可能会击中一侧或另一侧，或两者都击中（角）。但这应该很好。

如果要完全精确，则必须进行线段与线段的相交：问题变成：敌人的四个线段中的哪个线段与（oldBulletPosition，newBulletPosition）线段相交。而且，不要忘了案例。

同样，我认为上述解决方案在95％的时间内应该足够好，尤其是因为您的子弹很慢。

编辑：我找到了一个更简单的解决方案，使用“真实”象限，如下图所示：



因此，根据象限（1,2,3,4），您知道哪个命中的命中率更高。抱歉，现在（无聊）的三角函数没有时间了，让我知道您是否有兴趣（第一个解决方案可能就足够了）。

关于javascript - 在testCollision函数之后查找矩形的哪一侧发生碰撞，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36326531/