Question

我正在尝试创建一个使用侧面“等距”视图和透明图块的网络应用/游戏。我可以使用PHP公式显示它们（但不是很好），只需将每个div（每个tile）设置为position：absolute并设置top和left参数。问题是如何捕获瓷砖上的点击，让透明位的瓷砖点击它下方的瓷砖。

Answer 1

您将无法使用切片元素本身执行此操作，因为它们始终是矩形的。您必须监视包含所有切片的父元素中的鼠标位置，并手动确定哪些像素对应于哪些切片。

对于位置到平铺的等距映射，这很容易，但这将把点位置作为“在地面上”的位置;它不允许您使用图像的蒙版数据来测试对象，例如在地面前渲染的树。（你想这样做吗？目前有些树木完全掩盖了它们下面的地砖。）

如果你真的需要针对图像蒙版进行测试，你可以：

一个。编写脚本以从图像中提取掩码数据，并将其作为编码的二进制位掩码包含在JavaScript源中。我已经在JavaScript游戏中进行了碰撞检测，但它并不是很有趣，因为它可能占用大量空间，而且在更新图形时必须重新导出数据。

湾使用<canvas>和getImageData提取图像数据以进行测试。在这一点上，您可能会考虑使用画布进行渲染，因为您已经失去了IE用户。

Answer 2

您需要在IE中使用css3变换或矩阵变换。

语法如下所示：

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

几个很好的例子：

Answer 3

由于这是基于图块的游戏，您可能只需使用简单的公式确定用户正在与哪个图块进行交互。使用一些javascript来确定点击或其他操作的坐标。然后做一些算术来弄清楚要采取什么样的瓷砖。这有意义吗？

否则，我同意bobince。你的方法可能不会轻易工作。