HTML / JS / CSS等距网格半透明的点击瓷砖

Question

我试图创建一个使用侧上的“等距”视图和透明瓦片的web应用程序/游戏。我可以显示他们使用PHP公式，只是设置每个DIV（每瓦）的位置确定（但不是很大）：绝对和设置顶部和左侧的参数。问题是我怎么赶在瓦片上点击，让有透明位瓷砖的点击到它下面的瓷砖。

我的问题的一个例子是在 HTTP：//stuff.adammw.homeip达网络/其他/μFV/ farmville_2.html

Answer 1

您将无法与瓷砖元素本身要做到这一点，因为他们总是矩形。你必须监视包含所有瓷砖的父元素中的鼠标位置和手动工作哪个像素对应于哪个瓷砖。

有关的位置的等距映射到瓦，这将是容易的，但将被取点位置为“地上”的地方;它不会让你使用图像的掩模数据命中测试的对象一样，在地面的前渲染树。 （你想做到这一点呢？目前，一些树木完全不起眼的它们下面的地砖。）

如果你真的需要撞到图像掩码测试，您可以：

一个。编写一个脚本来从图像中提取所述掩模数据，并将其包括JavaScript源作为编码的二进制位掩码英寸我做这个用JavaScript语言游戏的碰撞检测，但它是不是很有趣，因为它会占用大量的空间，你必须在更新图形重新导出数据。

湾提取图像数据用于使用<canvas>和getImageData测试。此时鉴于你已经失去了IE的用户，可以考虑使用画布进行渲染了。

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/

Answer 3

由于这是一个基于瓦片的游戏，你可以只是确定哪些瓦用户通过使用一个简单的公式进行交互。使用JavaScript来确定每次点击或其他行动的坐标。然后做一些算术计算出作用于什么瓷砖。这是否有意义？

否则，我同意bobince。你的做法可能不会轻松地工作。