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

我正在制作游戏，玩家必须导航地图并达到最终目标。我已经让玩家移动，最终目标正在工作;然而，在我画完墙壁之后，玩家仍然可以穿过它们。2D HTML帆布游戏 - 停止玩家移动穿过墙壁

我的问题是，我怎样才能阻止玩家穿过墙壁？

2016-11-16 Hoxephos

阅读[碰撞检测。]（http://gamedev.stackexchange.com/questions/18261/how-can-i-implement-fast-accurate-2d-collision-detection）大量的资源在线。 –

[Javascript：碰撞检测]的可能重复（http://stackoverflow.com/questions/2440377/javascript-collision-detection） –

移动播放器之前，您必须检查是否有墙壁。如果有墙，请不要将玩家移动到那里。 –

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

I.e.

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

有了这个功能，您可以确定的一点是： *线后或行限制或脱节的限制

现在线 *之前，你必须检查每个角落，如果全部超出范围，则没有检测到碰撞。是在范围内并且都在同一侧，也不会检测到碰撞。但是如果一些角落在一线之后，而另一个角落之前，你有一个碰撞。

来源

2016-11-16 21:30:03

假设你的字符和壁是由一个轴对齐包围盒，或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。

来源

2016-11-16 21:30:30 XavCo7

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

回答

相关问题