2D HTML画布游戏-停止玩家移动通过墙壁

2D HTML canvas game - Stop player moving through wall

本文关键字：移动 玩家 布游戏 HTML 游戏 2D      更新时间：2023-09-26

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

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

假设你的角色和墙壁由一个与轴线对齐的边界框(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。

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

。

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

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

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

用这个函数你可以确定一个点是否为:*行后或行前*行内限制或行外限制

现在，你必须检查每个角落，如果都在范围之外，所以没有碰撞被检测到。它在范围内，并且都在同一侧，也没有检测到碰撞。但是如果一些角在线的后面而另一些在线的前面，就会发生碰撞。

相关文章：