Question

我正在使用JavaScript制作2D游戏。为此，我需要能够完美地＃34;检查我的玩家之间的碰撞（游戏中有两个玩家，请打开图片）和墙壁！我的意思是，我有一个实际可行的功能，但是当我让它们跳到墙上时，它们穿过墙壁并一直移动直到它们到达另一个区域，甚至离开画布！而且，如果它们掉下来我让它们与墙碰撞，它们就会停在那里，这也很糟糕！ 我真的需要帮助!!这是一个大学项目，我很快就要完成它！

My game looks like this

我的碰撞检测功能在这里：

＆＃13;

function blockRectangle (objA, objB) {
  var distX = (objA.x + objA.width / 2) - (objB.x + objB.width / 2);
  var distY = (objA.y + objA.height / 2) - (objB.y + objB.height / 2);

  var sumWidth = (objA.width + objB.width) / 2;
  var sumHeight = (objA.height + objB.height) / 2;

  if (Math.abs(distX) < sumWidth && Math.abs(distY) < sumHeight) {
    var overlapX = sumWidth - Math.abs(distX);
    var overlapY = sumHeight - Math.abs(distY);

    if (overlapX > overlapY) {
      objA.y = distY > 0 ? objA.y + overlapY : objA.y - overlapY;
    }
    else {
      objA.x = distX > 0 ? objA.x + overlapX : objA.x - overlapX;
    }
  }
}

＆＃13;

我用迷宫做了墙，我使用for循环来检查与我保存在阵列中的所有墙壁的碰撞！正如你在这里看到的那样：

＆＃13;

for (var i in walls) {
  var wall = walls[i];
  
  if ((player.x < (wall.x + wall.width)) && ((player.x + player.width) > wall.x) && (player.y < (wall.y + wall.height)) && ((player.height + player.y) > wall.y)) {
    player.falling = false;
  }
  blockRectangle(player, wall);
}

＆＃13;

请帮帮我!!!谢谢大家！

Answer 1

在您的情况下，我怀疑需要像素完美碰撞。

您可以维护一个布尔矩阵来存储实体对象的位置。固体物体，如墙壁或球员。然后在每一帧中，您可以检查您的玩家是否正在尝试移动到有固体物体的位置，如果是，则停止它。您不必以像素为单位创建width x height网格，而是选择一个最大的块（网格中的单个元素），其中每个实体对象合理占据块的大部分。

例如，您可以选择块大小为player_width / 2 x player_height /2。

使用网格

查看以下图片

另一种简单的方法是检查背景像素颜色。由于您的游戏很简单，因此背景和对象颜色不同。所以你只需要检查玩家是否试图移动像素颜色不是背景的地方，因此有一个坚实的物体，玩家应该停下来。您不必测试大量像素，只需在玩家尝试移动的方向上测试1个像素。（1表示水平，1表示垂直）。但是，如果您没有清晰的背景颜色，则无法使用此选项。这里的背景颜色是我们在之前的建议中的一种布尔网格。

如何对玩家和墙壁进行像素完美碰撞检测（JavaScript游戏）

1 个答案: