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

标签 javascript html5-canvas game-physics

<分区>

我目前有两个对象 bulletList 和 enemyList,每个对象都包含它们在 Canvas 上的 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");

最佳答案

仅从当前位置无法知道子弹从何处击中。现在子弹在敌人体内,例如如果它在左上角,它也可能来自左侧或顶部。

所以你需要存储子弹之前的位置。

根据旧位置所在的“象限”,您可以决定应该采取的行动。

我画了一张小图来解释:

enter image description here

你看到如果子弹之前在“水平走廊”(我的图中是红色的),那么你就知道它是左边还是右边:现在只要测试 x 是在左边还是右边你就知道了。

“垂直走廊”(蓝色)也是如此。

然后,如果子弹既不在那些走廊中,您就会遇到拐 Angular 碰撞,并需要处理四种情况。

伪代码:

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

请注意,这是一个近似值:在对 Angular 线击中的情况下,子弹也可能击中一侧或另一侧,或两侧( Angular )。但这应该工作得很好。

如果您想要完全精确,则必须选择分段与分段相交:问题变为:敌人的四个分段中的哪一个与 (oldBulletPosition, newBulletPosition) 分段相交。并且不要忘记极端情况。

同样,我认为上述解决方案在 95% 的情况下应该足够好,特别是因为你的子弹很慢。

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

enter image description here

所以根据象限 (1,2,3,4),您知道哪个被击中更准确。抱歉,现在没时间学习(无聊的)三 Angular 函数,如果您有兴趣请告诉我(第一个解决方案可能就足够了)。

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

相关文章:

c# - 将纬度经度坐标转换为图像 map 坐标

javascript - 文本屏蔽不适用于 HTML Canvas

javascript - HTML5/JS大量隐藏 Canvas

c# - XNA Waterphysicals 自上而下的基于六角形的网格

ios - 防止SKNode相互施加压力

javascript - 自动更改时 onChange 事件不起作用

Javascript 计算价格总和 * 数量返回 NaN

Javascript 第 n 次出现的字符串并提取到该字符串的子字符串

javascript - 如何正确下采样 HTML Canvas 以获得好看的图像?

JavaScript:对象内的短数组