javascript - 在 HTML5 Canvas 游戏中为 "room"创建移动边界的好方法是什么？

Question

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

定义玩家实体可以和不能移动的位置的最佳方法是什么？如果它只是一个方形房间，那么检查玩家 x 和 y 的边缘就足够容易了，但如果我有不同形状的背景，我可能希望玩家能够移动到那里，事情就会变得更加复杂。

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

谢谢

Answer 1

下次请多给点。这是一款 2D 俯视游戏吗？我假设是这样。

有多种方法，具体取决于您要执行的操作和粒度级别。

如果房间几乎都是矩形的，您可以只看物体是否完全包含在其中。

如果没有，您可以使用直交线算法，或者您可以将 map 变成一条大路径(路径的中心是空心的还是空心的)并使用 IsPointInPath (我建议你自己制作而不是使用 Canvas 的)看看玩家几何的几个关键点是否都在里面(或外面)

最后，如果你想要每像素碰撞，你应该为你的关卡制作一个简化的黑色 png map (或类似的东西)并使用 ghost Canvas ，就像我为 HitTest 所做的那样 here. 然后测试玩家轮廓上的几个像素，看看它们是否是黑色的。如果其中任何一个不是黑色，则玩家出界!