HTML/JS/CSS等高格网格与半透明可点击瓷砖

Question

我正在尝试创建一个使用侧视“等角”视图和透明瓷砖的Web应用程序/游戏。我可以使用PHP公式将每个div（每个瓷砖）设置为position:absolute并设置top和left参数来显示它们（但不是很好）。问题在于如何捕获瓷砖上的点击事件并让具有透明部分的瓷砖穿透到下面的瓷砖。

我的问题示例位于http://stuff.adammw.homeip.net/other/fv/farmville_2.html。

- Adam M-W

Answer 1

您无法直接使用瓷砖元素来实现此操作，因为它们始终是矩形的。您需要在包含所有瓷砖的父元素中监控鼠标位置，并手动计算哪些像素对应于哪些瓷砖。

对于位置到瓷砖的等距映射，这很容易实现，但是这将把点位置视为“在地面上的位置”；它不允许您使用图像的蒙版数据来命中测试对象，如前景中呈现的树木。（您真的想这样做吗？当前，一些树木完全遮盖了它们下面的地面瓷砖。）

如果您确实需要针对图像蒙版进行命中测试，则可以：

a.编写一个脚本从图像中提取掩码数据，并将其作为编码二进制位掩码包含在JavaScript源文件中。我曾在JavaScript游戏的碰撞检测中执行过此操作，但这并不令人愉快，因为它可能占用大量空间，并且在更新图形时必须重新导出数据。

b.使用和getImageData提取测试图像数据。此时，考虑使用画布进行渲染，因为您已经失去了IE用户。

- bobince

---

在使用canvas后，找到一个好的方法有点棘手，但幸运的是我找到了完全符合要求的东西 - http://philip.html5.org/demos/canvas/spritepick/example.html这种方法唯一的问题是它非常依赖JavaScript/处理器，我不确定它是否适用于最初的目的，即提供与iPhone网页浏览器的兼容性。 - Adam M-W

Answer 2

您需要使用CSS3变换或IE中的矩阵变换。

语法大致如下：

-webkit-transform: skew(0deg, -30deg) scale(1, 1.16);
-moz-transform: skew(0deg, -30deg) scale(1, 1.16);

以下是一些良好的示例：

http://www.fofronline.com/experiments/cube/index.html

http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/

- Rich Bradshaw

Answer 3

由于这是一个基于瓦片的游戏，也许你应该只使用一个简单的公式来确定用户正在与哪个瓦片交互。使用一些JavaScript来确定点击或其他操作的坐标，然后进行一些算术运算以找出要操作的瓦片。这有意义吗？

否则，我同意bobince的观点。你的方法可能不容易实现。

- robert