2D HTML画布游戏 - 阻止玩家穿过墙壁

Question

我正在制作一个游戏，玩家必须在地图中导航并达到最终目标。我让球员移动并且最终目标有效;然而，在我画完墙壁之后，玩家仍然可以穿过它们。

我的问题是，如何阻止玩家穿过墙壁？

Answer 1

假设您的角色和墙由轴对齐的边界框或AABB表示，解决方案非常简单：

function isColliding(pos11, pos12, pos21, pos22){
    return (
        (pos11.x < pos21.x && pos21.x < pos12.x &&
        pos11.y < pos21.y && pos21.y < pos12.y) ||
        (pos11.x < pos22.x && < pos22.x < pos12.x &&
        pos11.y < pos22.y && pos22.y < pos12.y)
    );
}

// Call like this
isColliding(playerUpperAabbCorner, playerLowerAabbCorner, wallUpperAabbCorner, wallLowerAabbCorner);

检查是否有任何角相互重叠，这表示发生碰撞。所有角都是二维坐标，其中包含属性.x和.y。

Answer 2

HTML Canvas没有碰撞检测器系统。因此，您必须在JavaScript中描述墙，以便从此描述中绘制它们。接下来，每次玩家移动时你都必须处理这个位置。

即

For Each

之后，你必须确定球员角落。对于每个角落，您可以检测是否在墙上。

wall = []
wall[0] = {"p1":[0,0],"p2":[0,100]} // the P1 and P2 points of line of wall
...

使用此功能，您可以确定某个点是否：     *行后或行前     *在行限制或行外限制

现在，您必须检查每个角落，如果全部超出范围，则不会检测到任何切割。是在范围内并且都在同一侧，也没有检测到碰撞。但是，如果某些角落在线之后，而另一个角落之前，则需要进行切割。