javascript - HTML5 Canvas : Mouse and polygon collision detection

Question

所以我正在使用 HTML5 和 Javascript 制作塔防游戏。我唯一的问题是检测鼠标何时接触到攻击者的路径，这是阻止玩家在路径上 build 塔所必需的。攻击者的路径在 MAP.js 文件(见底部的链接)中由二维数组(包含 x 和 y 对的数组)确定，所以我必须处理的是一系列点连接时组成路径。我只是想禁止玩家在路径的 50 像素范围内放置塔。老实说，我在碰撞检测方面很糟糕，所以非常感谢您的帮助。

这里是所有代码的链接: http://shapeshifting.comuv.com/Tower_Defense/td/

如您所想，只有 .js 文件适用，但大部分相关代码都在 objects.js 文件中。 (请原谅困惑)

Answer 1

碰撞检测是编写游戏代码时隐藏的老问题之一。通常人们会采用 darkpenguin 的方法，以某种方式预先计算静态 map 上可放置和不可放置的位置。下一步是想出一种方法来指定最有效的碰撞贴图。

您不希望您的游戏在响应用户移动鼠标时进行大量数学运算 - 它需要简短而快速 - 因此预先计算到快速的东西是至关重要的。

如果您的 map 是网格，那么您的答案就在那里 - 碰撞图是一个预先计算好的二维数组 - 基本上是一个非常小的黑白图像，网格上的每个位置都有一个像素。白色像素 (1) 是可放置的，黑色像素 (0) 不是。您只需使用这个 true/false 的二维数组作为查找。如果您想节省内存，您可以将网格上的每条 32 个空格捆绑成一个位标志。

如果您的 map 不是网格，那么您仍然需要预先计算一些东西，但策略会稍微复杂一些。第一种可能性是像 Hitesh 一样执行数学运算以生成分辨率稍高的碰撞图，然后其余的与网格策略完全相同 - 例如，如果每个 4x4 像素 block 都是一个碰撞条目，那么塔是否可以是placed 是测试其坐标是否位于足够多的 1 之上 - 您可能需要 100% 的测试为 1，或者您可以让它们达到一点点，假设 75% 的测试为 1。

如果这仍然不够详细，您可以进行这些更复杂的多边形测试，但您希望它们尽可能简单。当不使用预先计算的网格时，最简单的 2D 碰撞测试是 2 个圆圈 - 您只需计算它们的中心之间的距离并检查它是否大于或小于它们的半径之和。如果您将怪物路径预先计算成一串圆圈，下一步就是将这些圆圈划分为……猜猜是什么……一个网格。这样可以避免每次检查都必须测试 map 上的每个圆圈。这允许您在碰撞图中有大量这样的圆圈，因为碰撞测试首先是查找塔当前位于哪些网格条目上，然后检查它是否仅与它最近的圆圈发生碰撞，而不是整个 map 。请务必注意，此预先计算的圆列表网格通常在多个相邻网格条目中具有相同的圆，因为包含给定圆的任何部分的每个网格条目都必须在其碰撞 list 中包含该圆。

前 2 种网格方法的优点之一是，您可以非常轻松地自己进行 QA - 将碰撞贴图实际存储为图像并进行目视检查，以确保它看起来适合它所基于的 map 。如果您不想编写生成它们的代码，也可以手工绘制。

圆形方法为您提供了合法的曲线，并且可以导致更精细的碰撞边缘细节，但显然更难测试并确保没有贴图具有不良碰撞贴图。编写 map 生成工具也比较麻烦。

祝你好运!