带有半透明点击图块的HTML/JS/CSS等距网格

Question

我正在尝试创建一个使用侧面"等距"视图和透明图块的Web应用程序/游戏.我可以使用PHP公式显示它们(但不是很好),只需将每个div(每个tile)设置为position:absolute并设置top和left参数.问题是如何捕获瓷砖上的点击,让透明位的瓷砖点击到它下面的瓷砖.

我的问题的一个例子是http://stuff.adammw.homeip.net/other/fv/farmville_2.html

Answer 1

您无法使用图块元素本身来执行此操作，因为它们始终是矩形的。您必须监视包含所有图块的父元素内的鼠标位置，并手动计算出哪些像素对应于哪些图块。

\n\n

对于平铺位置的等距映射，这很容易，但这会将点位置视为地面 \xe2\x80\x99 上的位置 \xe2\x80\x98；它不允许您使用图像的遮罩数据来命中测试对象，例如在地面前面渲染的树木。（你还是想这样做吗？目前有些树完全遮住了它们下面的地砖。）

\n\n

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

\n\n

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

\n\n

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

\n