8

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

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

4

3 回答 3

4

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

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

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

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

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

于 2010-02-14T01:15:51.197 回答
4

您需要使用 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/

于 2010-03-09T21:58:10.877 回答
1

由于这是一个基于图块的游戏，也许您应该使用一个简单的公式来确定用户正在与哪个图块进行交互。使用一些 javascript 来确定点击或其他操作的坐标。然后做一些算术来确定要对哪个图块进行操作。那有意义吗？

否则，我同意bobince。你的方法可能不会很容易。

于 2010-03-09T21:48:21.457 回答