带有半透明点击图块的 HTML/JS/CSS 等距网格
我正在尝试创建一个使用侧面“等距”视图和透明图块的网络应用程序/游戏。我可以使用 PHP 公式显示它们，该公式只需将每个 div（每个图块）设置为位置：绝对并设置顶部和左侧参数。问题是如何捕获图块上的点击并让具有透明位的图块点击到其下方的图块。
我的问题的一个例子是 http://stuff.adammw.homeip.net/其他/fv/farmville_2.html
I'm trying to create a web app/game that uses a side-on 'isometric' view and transparent tiles. I can display them ok (but not great) using a PHP formula that just sets each div (each tile) as position:absolute and set the top and left parameters. The problem is how do I catch clicks on a tile and let tiles with transparent bits click-through to the tile below it.
An example of my problem is at http://stuff.adammw.homeip.net/other/fv/farmville_2.html
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您无法使用图块元素本身来执行此操作，因为它们始终是矩形的。您必须监视包含所有图块的父元素内的鼠标位置，并手动计算出哪些像素对应于哪些图块。
对于要平铺的位置的等距映射，这很容易，但这会将点位置视为“地面上”的位置；它不允许您使用图像的遮罩数据来命中测试对象，例如在地面前面渲染的树木。 （无论如何，您想这样做吗？目前，有些树完全遮住了它们下面的地砖。）
如果您确实需要针对图像蒙版进行命中测试，您可以
：编写一个脚本以从图像中提取掩码数据并将其作为编码的二进制位掩码包含在 JavaScript 源中。我已经这样做了，用于 JavaScript 游戏中的碰撞检测，但这并不是很有趣，因为它会占用大量空间，并且在更新图形时必须重新导出数据。
b.使用
和getImageData提取图像数据进行测试。此时您可能会考虑使用画布进行渲染，因为您已经失去了 IE 用户。You won't be able to do this with the tile elements themselves, as they are always rectangular. You'll have to monitor the mouse position within a parent element containing all the tiles and manually work out which pixels correspond to which tiles.
For an isometric mapping of position to tile this would be easy, but that would be taking the point position as a place ‘on the ground’; it wouldn't allow you to use the image's mask data to hit-test objects like the trees that render in front of the ground. (Do you want to do that anyway? Currently some trees totally obscure the ground tile below them.)
If you really need to hit test against image masks, you can:
a. write a script to extract the mask data from the image and include it in the JavaScript source as encoded binary bitmasks. I've done this for collision detection in JavaScript games, but it's not much fun as it can take a lot of space and you have to re-export the data when you update the graphics.
b. extract the image data for testing using a
<canvas>andgetImageData. At which point you might consider using a canvas for rendering too, given that you'll have already lost IE users.您需要使用 css3 变换，或 IE 中的矩阵变换。
语法看起来像这样：
几个很好的例子：
http://www.fofronline .com/experiments/cube/index.html
http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/
You need to use css3 transforms, or the matrix transform in IE.
The syntax looks something like this:
A couple of good examples:
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 的观点。你的方法可能不会轻易奏效。
Since this is a tile based game, maybe you should just determine which tile the user is interacting with by using a simple formula. Use some javascript to determine the coordinates of a click or other action. then do some arithmetic to figure out what tile to act on. Does that make sense?
Otherwise, I agree with bobince. You're approach probably won't work easily.