2D HTML帆布游戏 - 停止玩家移动穿过墙壁
问题描述:
我正在制作游戏,玩家必须导航地图并达到最终目标。我已经让玩家移动,最终目标正在工作;然而,在我画完墙壁之后,玩家仍然可以穿过它们。2D HTML帆布游戏 - 停止玩家移动穿过墙壁
我的问题是,我怎样才能阻止玩家穿过墙壁?
答
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;
}
有了这个功能,您可以确定的一点是: *线后或行限制或脱节的限制
现在线 *之前,你必须检查每个角落,如果全部超出范围,则没有检测到碰撞。是在范围内并且都在同一侧,也不会检测到碰撞。但是如果一些角落在一线之后,而另一个角落之前,你有一个碰撞。
答
假设你的字符和壁是由一个轴对齐包围盒,或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
。
阅读[碰撞检测。](http://gamedev.stackexchange.com/questions/18261/how-can-i-implement-fast-accurate-2d-collision-detection)大量的资源在线。 –
[Javascript:碰撞检测]的可能重复(http://*.com/questions/2440377/javascript-collision-detection) –
移动播放器之前,您必须检查是否有墙壁。如果有墙,请不要将玩家移动到那里。 –