1

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

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

很简单，我想检测敌人是否“相撞”，即是否30px相互移动（敌人图像为 30 像素 x 30 像素）。

我想要做的是用同一个数组中的其他值减去数组中第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;
}

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

4

4 回答 4

1

我将重申我对您问题的理解，以免造成混淆。您有两个并行阵列，一个用于 x 线，一个用于 y 线。每艘船在两个数组中都有一个元素。

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

按理说，这是一种交流。如果 ship[a] 与 ship[b] 发生碰撞，则 ship[b] 与 ship[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)

            }
      }

 }

上面的代码将每艘船与其他每艘船进行一次比较。它会将 ship[1] 与 ship[8] 进行比较，但不会将 ship[8] 与 ship[1] 进行比较。

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

于 2013-05-17T05:39:19.163 回答
1

检测两个对象之间的交叉点（假设为矩形）和位置定义了对象的中心。

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()功能以适应不同的锚点位置，例如左上角。

于 2013-05-17T04:34:34.123 回答
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)
于 2013-05-17T04:25:03.630 回答
0

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

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

给定两个点 (x1, y1) 和 (x2, y2)，这些点之间的距离由公式给出：

在此处输入图像描述

于 2013-05-17T04:17:31.173 回答