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

我正在做一个游戏，玩家必须在地图上导航并到达终点。我让球员动起来，最终目标也起作用；然而，在我画完墙之后，玩家仍然可以穿过它们

---

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

HTML画布没有碰撞检测系统。因此，您必须用JavaScript描述墙，以便根据此描述绘制墙。接下来，您必须在玩家每次移动时处理该位置

即

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

function line_detect(wall,point){ // based on line formula of analytic geometry
    var a = (wall.p1[0] - wall.p2[0]) / (wall.p1[1] - wall.p2[1]);
    var b = wall.p1[1];
    var y = a*point[0]+b;
    if(y == point[1])
        return 0;
    else if(y > point[1])
        return 1;
    else return -1;
}

function range_detect(wall,point){
    if(point[0] > wall.p1[0]
    && point[0] > wall.p2[0])
        return 0;
    if(point[0] < wall.p1[0]
    && point[0] < wall.p2[0])
        return 0;
    if(point[1] > wall.p1[1]
    && point[1] > wall.p2[1])
        return 0;
    if(point[1] < wall.p1[1]
    && point[1] > wall.p2[1])
        return 0;
    return 1;
}

功能线检测（墙、点）{//基于解析几何的线公式
var a=（wall.p1[0]-wall.p2[0]）/（wall.p1[1]-wall.p2[1]）；
var b=壁面p1[1]；
变量y=a*点[0]+b；
如果（y==点[1]）
返回0；
如果（y>点[1]）
返回1；
否则返回-1；
}
功能范围探测（墙、点）{
如果（点[0]>wall.p1[0]
&&点[0]>wall.p2[0]）
返回0；
如果（点[0]wall.p1[1]
&&点[1]>wall.p2[1]）
返回0；
如果（点[1]wall.p2[1]）
返回0；
返回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);

函数正在聚合（pos11、pos12、pos21、pos22）{
返回(
（pos11.x

---

这将检查是否有任何拐角相互重叠，这将指示碰撞。所有角点都是二维坐标，其中包含属性

.x

和

.y

在线阅读大量资源。在移动播放器之前，必须检查是否有墙。如果有墙，不要将玩家移动到那里。

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