Question

我是JavaScript和HTML的新手，正在开发一款小游戏。

我有四个'敌人'，它们在画布上的位置由数组'enemyX'和'enemyY'中的值决定。

很简单，我想检测敌人是否有'碰撞'，即已经移动到彼此的30px内（敌人的图像是30px×30px）。

我想要做的是用相同数组中的其他值减去数组中 i 值的值看这个值是否小于 30 。小于 30 部分是一个if语句，那么如何在没有多行代码的情况下相互减去所有值呢？

以下是我根据以下答案尝试的内容：

    var count = 0;
var innercount = 0;

while (count <= 3) {

    while (innercount<=3) {
        collisionDetect(count, innercount, enemyX[count], enemyY[count], enemyX[innercount], enemyY[innercount])
        innercount++
    }
    count++    
}

var i = 0;
while (i < enemyX.length) {

    if (collisionX[i] == 1) {
        directionX  = directionX*-1;
    }

    if (collisionY[i] == 1) {
        direction = directionY*-1;
    }
}


}



}

function   collisionDetect(count, innercount, x, y, xX, yY ) {


if ((Math.abs(x-xX)) <=30) {
    collisionX[count] = 1
    collisionX[innercount] = 1
}

if ((Math.abs(y - yY)) <=30) {
    collisionY[count] = 1
    collisionY[innercount] = 1
}

return collisionX, collisionY;
}

这段代码给了我一张空白的画布。

Answer 1

你可以使用一个功能：

function colliding(x1, y1, x2, y2){
  return Math.abs(x1-x2) <= 30 && Math.abs(y1-y2) <= 30;
}

然后使用该函数测试敌人的不同组合：（1,2），（1,3），（1,4），（2,3），（2,4）和（3,4））。

因此，例如，您可以使用：colliding(enemyX[2], enemyY[2], enemyX[3], enemyY[3])来检查敌人2和3是否发生碰撞。用上面的所有组合做到这一点。

编辑：为了使其更具可读性，您可以定义一个附加功能：

function enemiesColliding(e1, e2){
  return colliding(enemyX[e1], enemyY[e1], enemyX[e2], enemyY[e2])
}

然后使用它：

enemiesColliding(1,2) || enemiesColliding(1,3) || enemiesColliding(1,4) ||
enemiesColliding(2,3) || enemiesColliding(2,4) || enemiesColliding(3,4)

Answer 2

检测两个物体之间的交点（假设为矩形），并且该位置定义物体的中心。

function getRect(x, y, w, h)
{
    var left = x - Math.floor(w / 2),
    top = y - Math.floor(h / 2);

    return {
        left: left,
        top: top,
        right: left + w,
        bottom: top + h
    };
}

function intersects(A, B)
{
    return A.right >= B.left && 
       A.left <= B.right && 
       A.bottom >= B.top && 
       A.top <= B.bottom;
}

alert(intersects(getRect(12, 56, 30, 30), getRect(30, 40, 30, 30))); // true

可以修改getRect()函数以适应不同的锚位置，例如左上角。

Answer 3

我将重申我对你问题的理解，这样就没有混淆了。平行有两个阵列，一个用于x线，另一个用于y线。每艘船在两个阵列中都有一个元素。

因此，例如，可以在xPos [12]和yPos [12]中找到12号船，其中xPos和yPos是上面的数组。

这也是一个沟通的理由。如果船舶[a]与船舶[b]发生碰撞，则船舶[b]与船舶[a]发生碰撞。而且我认为坚持3 +船。

我首先要写一个距离函数。

 dist(x1,y1,x2,y2)
 {
     return Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
 }

然后我会编写通过数组运行的代码。每次必须将每个元素与其他元素进行比较。

 var counter = 0;
 var indexOfShipThatHaveCollided = [];
 while(counter < Xpos.length)
 {
      var innerCounter = counter;           
      while(innerCounter < Xpos.length)
      {
            t = dist(Xpos[counter],Ypos[counter],Xpos[innerCounter],Ypos[innerCounter])
            if(t < 30)
            {
                 indexOfShipThatHaveCollided.push(counter)
                 indexOfShipThatHaveCollided.push(innerCounter)

            }
      }

 }

上面的代码将每艘船与每艘船的ONCE进行比较。它将船舶[1]与船舶[8]进行比较，但它不会将船舶[8]与船舶[1]进行比较。

我没有测试任何代码，但我希望它能让你朝着正确的方向前进。如果您有任何疑问，请给我发表评论。

Answer 4

根据我对你的问题的理解，下面是我的解决方案：

我认为你需要找到两点之间的距离。通过使用距离，您可以应用您的逻辑。找到距离是公式：

给定两点（x1，y1）和（x2，y2），这些点之间的距离由公式给出：

enter image description here

将数组中的值相互比较

4 个答案: