javascript - 检测不规则形状

Question

从这个问题开始 Detecting mouse coordinates with precision ，这几天学了不少东西。以下是我挑选的有关该主题的最佳学习资源:

1. > http://gamedev.tutsplus.com/tutorials/implementation/quick-tip-use-quadtrees-to-detect-likely-collisions-in-2d-space/
2. > http://www.gamedev.net/page/resources/_/technical/graphics-programming-and-theory/quadtrees-r1303
3. > http://jsfiddle.net/2dchA/2/

(3) 中的代码在 JSFiddle 中有效，但在我的测试环境 (VS2012) 中的这一部分中断:

var myTree = new Quadtree({
  x: 0,
  y: 0,
  width: 400,
  height: 300
});

消息 Quadtree 在 IE 中未定义。 FF & Chrome 只是掩盖它并显示一个空白页面。我无法解决。 问题 1:有人可以帮忙解决这个问题吗？

我的主要问题: 我有一个区域(像 map 一样的土地)有大约 1500 个用 html5 绘制的地 block ，而不是 jpg 或 png 图像。完成它需要很多行代码，但渲染效果很棒，所以我保持这种状态。我打算让鼠标悬停事件告诉我鼠标停止时我站在哪个包裹上。正如您将在上一个问题中看到的那样，我之前的尝试并不令人印象深刻。基于我一直在做的学习，感谢 Ken J 的回答/评论，我想采用这种新方法，将我的 Canvas 切成 15 个四边形，每个四边形有 100 个对象。但是，在我以错误的方式进行另一次野外潜水之前，我需要一些指导。

问题 2:我应该在创建时将其切片还是应该在鼠标悬停在某个区域上时进行切片，即拖曳鼠标？后者对我来说听起来更好，但我认为我可以接受一些建议，如果可能的话，一些开始编写代码。四叉树的概念对我来说是全新的。谢谢。

Answer 1

无法解决问题 1。

鉴于目标是让页面在用户点击某处后尽快做出响应，因此您绝对应该尽早构建树。

只要用户与 2d 区域交互，就保留树。更新四叉树应该不会太难，因此即使区域更改内容，您也应该能够重用现有的树(只需更新它)。