javascript - 如何点击一个单元格对象？

Question

我正在使用 Javascript、p5.js 和 Daniel Shiffman 的 tutorial创建 A* 搜索算法的可视化表示。

示例网格的图像如下所示: example grid

是否可以单击网格的任何单元格以打印出它的属性？基于 Daniel Shiffman 关于 how to click on objects 的其他教程，我知道我必须创建 2 个分别激活和执行的函数。我知道如何用圆做这个，因为圆有半径。

但是，我不知道如何使用单元格执行此操作，因为我只有它的坐标。我看不出如何使用坐标作为度量来计算长度。

如果能给我的思路提供任何指导，我将不胜感激。非常感谢您。

Answer 1

我写了一篇关于碰撞检测的教程可用here .这是常规处理，但在 P5.js 中一切都是一样的。您正在寻找矩形点碰撞。

基本上，您需要检查该点是否位于矩形的左右边缘之间以及矩形的上下边缘之间。如果两者都为真，则该点在矩形内。

我推荐breaking your problem down into smaller steps并一次采取这些步骤。例如，在尝试使用多个单元格或用户输入之前，先尝试使用单个硬编码矩形和点。