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

Question

我正在用 JavaScript 制作 2D 游戏。为此，我需要能够“完美”检查我的玩家（游戏有两个玩家，请打开图片）和墙壁之间的碰撞！我的意思是，我有一个实际有效的功能，但是当我让它们跳到墙上时，它们会穿过墙壁并继续移动，直到它们到达另一个区域甚至离开画布！

另外，如果它们掉下来，我让它们撞到墙上，它们就会停在那里，这也很糟糕！ 我真的需要帮助！这是一个大学项目，我必须很快完成它！

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

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

我用迷宫制作了墙壁，并使用 for 循环来检查与我保存在数组中的所有墙壁的碰撞！ 正如您在这里看到的：

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

请帮助我！谢谢大家！

Answer 1

就你而言，我怀疑是否需要像素完美碰撞。

您可以维护一个布尔矩阵来存储实体对象的位置。固体物体，如墙壁或玩家。然后在每一帧中，您可以检查您的玩家是否试图移动到有固体物体的位置，如果有则停止。您不必创建以像素为单位的

width x height

网格，而是选择一个最大的块（网格中的单个元素），其中每个实体对象合理地占据该块的大部分。

例如，您可以选择块大小为

player_width / 2 x player_height /2

。

请参阅以下带有网格的图像

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