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

我正在用JavaScript制作一个2D游戏。为此，我需要能够“完美地”检查我的玩家（游戏有两个玩家，请打开图片）和墙壁之间的碰撞！我的意思是，我有一个功能，实际上是有效的，但当我让他们跳到墙上时，他们会穿过墙壁，继续移动，直到他们到达另一个区域，甚至离开画布！ 还有，如果它们掉下来，我让它们撞到墙上，它们就停在那里，这也很糟糕！ 我真的需要帮助！！这是一个大学项目，我必须尽快用芬兰语完成

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

功能块矩形（objA、objB）{
var distX=（objA.x+objA.width/2）-（objB.x+objB.width/2）；
变量distY=（objA.y+objA.height/2）-（objB.y+objB.height/2）；
var sumWidth=（objA.width+objB.width）/2；
变量sumHeight=（objA.height+objB.height）/2；
if（数学绝对值（distX）重叠）{
objA.y=distY>0？objA.y+重叠：objA.y-重叠；
}
否则{
objA.x=distX>0？objA.x+overlax:objA.x-overlax；
}
}
}

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

可以维护布尔矩阵来存储实体对象的位置。实体对象，如墙或播放器。然后在每一帧中，你可以检查你的玩家是否试图移动到一个有固体物体的位置，如果是，那么停止它。您不必以像素为单位创建宽度x高度的网格，而是选择一个最大的块（网格中的单个元素），其中每个实体对象合理地占据了块的大部分

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

player\u width/2xplayer\u height/2

请参见下图中的网格

---

另一个简单的方法是只检查背景像素的颜色。因为你的游戏很简单，背景和物体的颜色是不同的。所以你只需要检查玩家是否试图移动到像素颜色不是背景的地方，这样就有了一个实体，玩家应该停止。你不必测试很多像素，只需在玩家试图移动的方向上测试1个像素。（1个用于水平方向，1个用于垂直方向）。但是，如果没有清晰的背景色，则不能使用此选项。在前面的建议中，这里的背景色对于我们来说是一种布尔网格。

关于正确进行碰撞检测，有很多书都是这样写的。你读过一些吗？给你一个简短的回答：不要，它太贵了。如果你想问：你的墙是基于瓷砖的（一块长方形的墙实际上是由几个正方形组成的），你需要使用边界框，然后才更接近精确的像素？如果是这样，在最短的方向上分流玩家可能会导致玩家被分流到另一个墙段。@JoostHuizinga是的，这就是正在发生的事情！请观看此视频：