Javascript"；“拼图游戏”；具有不规则的.png形状

所以，我想做的基本上是一个拼图游戏。左侧是一个区域，有十几个左右重叠的.png文件，这些文件是“撕开”的纸片（所有不同的不规则形状都带有alpha），按顺序放在一起，在右侧形成一张纸，上面有注释。视觉（忽略旋转的片段）：

我不知道有什么新鲜事，但我在开发这款产品时提出的两个主要警告是，它必须在ie8+和触摸设备上工作。因此，这意味着没有闪光（这将是非常容易的）和没有画布（愚蠢的ie）；这就剩下js和svg了

js中的拖放部分很简单，但我遇到的问题是，正如我确信你知道的，alpha通道被忽略了，不规则的撕裂部分实际上是一个矩形。这使得它无法使用，因为各个部分是一堆相互重叠的部分

我可以通过使用一个图像映射和设置一个滚动变量，在跌落时进行颗粒碰撞检测

我已经环顾了很多地方（这里+谷歌），尝试了一些想法，但我无法解决不规则形状的选择/拖动问题。有什么想法吗

---

谢谢你的时间。

这不是你的选择吗？我认为这将允许您创建基于画布的解决方案。这将比通过javascript进行简单html元素操作要好得多

低技术解决方案

具有绝对位置的嵌套元素

如果您愿意花一点额外的时间，有一种方法可以非常接近地实现这一点，而不必使用Flash、Canvas、SVG甚至图像映射。与图像映射不同，它允许您在需要时在每个热点内嵌套相关内容（例如，弹出窗口）

在最简单的情况下，您可以为拼图的每个部分使用单个矩形超链接热点。显然，这大大限制了您可以支持的形状范围（而不会干扰重叠元素）

但是，如果您获取该超链接标记并为其指定多个span标记子项，并为每个子项指定一个绝对位置（相对于超链接），并将图像的适当部分应用于背景，则可以“构造”占据单个不规则热点的不规则图像形状，与重叠元素的干扰相对较小

实际上，图像（具有透明区域）被视为精灵文件，超链接标记和子跨度标记分别占据“精灵文件”的一部分。图像的大部分透明部分不会被超链接标记或跨度标记占据

大多数形状可能都可以使用超链接标记和4-10跨距构建。当然，形状越不规则，需要的跨度就越大

我以前做过这样的工作，在美国地图上为每个州创建热点，而不使用图像地图（或Flash、Canvas、SVG），而且问题并不像你想象的那么严重。它只需要一点时间来弄清楚如何将每个形状分解成正确数量的矩形的细节

捕获

移动设备上的舍入误差

这是一个陷阱，这是一个大问题。当在移动设备上缩放网页（并且在较小的设备上几乎总是缩放常规页面）时，会引入舍入错误，从而导致超链接标记和跨距标记的px位置可能在水平和/或垂直方向上变化至少1个像素。如果桌面浏览器被缩放，也会发生这种情况；只是桌面浏览器不经常被缩放

会发生的情况是，每个形状的不同部分之间会有1个像素左右的间隔（或重叠）。在许多情况下，这往往是非常明显的，在视觉上是不可接受的。根据具体实施情况，位置可能会有2px或3px的变化。当它发生时，它是很难解决的，而且解决的范围是有限的

最后我检查了一下，Firefox是唯一一款在缩放页面上舍入px值以避免此问题的浏览器。希望其他浏览器最终能更好地支持它，因为即使是简单的页面也经常出现舍入错误

解决方案

将图像与热点分开

对于热点（精度不重要的地方），舍入误差不是什么大问题。它真正导致问题的地方是图像（当你看到一个图像没有排列在它应该排列的地方）

通过执行以下操作，可以避免最严重的图像舍入错误：

• 为热点创建一组HTML代码，如上所述，只是不显示热点中的图像的任何部分。给他们所有透明的背景
• 为图像创建另一组HTML代码。每个元素都是一个矩形元素，显示所有图像
• 将每个图像放置在与相关热点相同的位置
• 确保热点集和图像集的z索引顺序相同。所有热点将位于所有图像的顶部，但在热点和图像内，顺序需要一致
• 拖动工件的热点时，更新相关图像的位置，使其保持在同一位置。实际上，在拖动热点时，图像会对其进行阴影处理

---

“不是τ”吗？这是怎么发生的呢？我使用explorercanvas对IE8中的canvas标记进行了一些基本测试，它似乎工作得很好。看起来这是一个值得追求的选项——至少，如果HTML imagemap解决方案被证明问题太大的话。@WaleedKhan希腊键盘失败：）SVG非常适合定义不规则的热点，并且自然适合这种情况。但是，如果您需要对Android2.3（姜饼）或更早版本的支持，SVG不是一个选项（）。不幸的