我正在尝试创建一个使用侧面“等距”视图和透明图块的网络应用程序/游戏。我可以使用一个 PHP 公式来显示它们（但不是很好），该公式只将每个 div（每个图块）设置为 position:absolute 并设置 top 和 left 参数。问题是我如何捕捉一个图块上的点击，并让带有透明位的图块点击到它下面的图块。
我的问题的一个例子是http://stuff.adammw.homeip.net/other/fv/farmville_2.html
【问题讨论】：
标签： javascript html transparent tiles isometric
您无法使用 tile 元素本身来执行此操作，因为它们始终是矩形的。您必须在包含所有图块的父元素中监视鼠标位置，并手动计算出哪些像素对应于哪些图块。
对于位置到平铺的等距映射，这很容易，但这会将点位置视为“地面上”的位置；它不允许您使用图像的蒙版数据来命中测试对象，例如在地面前渲染的树木。 （无论如何你都想这样做吗？目前有些树木完全遮住了它们下面的地砖。）
如果您确实需要对图像掩码进行测试，您可以：
一个。编写脚本以从图像中提取掩码数据，并将其作为编码的二进制位掩码包含在 JavaScript 源中。我已经为 JavaScript 游戏中的碰撞检测做了这个，但它并不好玩，因为它会占用大量空间，并且您必须在更新图形时重新导出数据。
b.使用<canvas> 和getImageData 提取图像数据进行测试。考虑到您已经失去了 IE 用户，此时您也可以考虑使用画布进行渲染。
【讨论】：
你需要使用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/
【讨论】：
由于这是一款基于图块的游戏，也许您应该使用一个简单的公式来确定用户正在与哪个图块进行交互。使用一些 javascript 来确定点击或其他操作的坐标。然后做一些算术来确定要对哪个图块进行操作。这有意义吗？
否则，我同意 bobince。你的方法可能不会很容易。
【讨论】：