对象碰撞 HTML5 Canvas

Question

我正在用 HTML5 Canvas 制作一款平台游戏。我还没有主角，所以我现在用的是球。我正在努力让球不能穿过草地块。我正在使用一个列表来保存我的地图的值，然后使用 2 个 if 语句将列表的值转换为地图，所以我不知道如何检测球和草球之间的碰撞，考虑到草块可能在地图上的任何地方。

我的问题是：如何在不硬编码的情况下在球和草方块之间进行碰撞，它需要快速，如果我需要一个库，请展示一个如何使用它的例子我的情况。

我的代码在这里：https://drive.google.com/open?id=0B7OJnVpBNrkDTlA0amdzMkdrRnM

Answer 1

这是您问题的基本解决方案，您可以以此为基础：

https://plnkr.co/edit/5c08NrVQh44hsq1BFX9X?p=preview

总结：

• 我创建了一个名为 level1CanMove 的新多维数组，为球可以和不能移动的位置提供参考。
• 我已经使用了您已有的 ballLocationCol 和 ballLocationRow 值（但已注释掉），以确定球当前结束了哪些板块。
• 然后我们通过新的 canMoveHere 函数检查球是否可以越过当前的方块，如果不能则反转方向。

N.B. 如果你只是为了学习而从事这个项目，一定要自己编写碰撞检测的代码。但是，如果没有，您可能会发现它更有效率，正如一些评论者已经建议的那样，使用游戏引擎。