Question

所以我一直在使用画布和Javascript构建一个小游戏，我已经到了让屏幕上有一个小角色移动，在背景中绘制一个平面图像描绘一个房间各种各样的。

什么是最好的方法来定义玩家实体可以和不可以移动的位置？如果它只是一个正方形的房间，这很容易检查边缘与玩家x和y，但如果我有不同形状的背景，我可能希望玩家能够移动，这会变得更加复杂。

有没有办法检测画布上绘制的图像的交集？如果是这样，我可能会将“墙”渲染为与主背景分开，并检查玩家是否击中了其中任何一个。或者我可能过度思考什么是更简单的解决方案？

由于

Answer 1

下次请多多点。这是一款2D自上而下的游戏吗？我会这么认为。

有几种方法，具体取决于您的目标和粒度级别。

如果房间几乎都是矩形，你可以看看对象是否完全包含在其中。

如果没有，你可以使用矩形相交线算法，否则你可以将地图转换成一条大路径（路径的中心是空心的或不是空心的）并使用IsPointInPath（我' d建议制作你自己的，而不是使用Canvas'one）来看看玩家几何的几个关键点是否都在内部（或外部）

最后，如果你想要每像素碰撞，你应该制作一个简化的黑色png地图（或类似的）你的关卡并使用鬼画布，就像我做的命中测试{{ 3}}然后测试玩家轮廓上的几个像素，看看它们是否是黑色的。如果他们中的任何一个不是黑人，则该玩家不在界外！

Answer 2

我曾试图在html5画布上创建一个类似于你目前正在制作的简单游戏（我想这是一个常见的想法）。我建议你使用碰撞引擎，至少这是我的想法：

通过这种方式，您可以阻止玩家穿过墙壁或其他固体物体。

我在Google上查找了HTML5 + Collision，但没有任何有趣的内容出现，也许你应该尝试不同的搜索，或者是第一个实现这个想法的人（我的只是在基本阶段）。

Answer 3

EDITED：

您可能需要定义一些SVG形状或具有某种类型的“地图数组”。

即。

 map = {
      [0,0,0,0,0],
      [0,0,0,0,0],
      [0,0,0,0,0],
      [0,0,0,0,0],
      [0,0,0,0,0]
    }