具有半透明點擊牌的HTML/JS/CSS等距網格

我正嘗試創建一個使用側面「等軸測」視圖和透明貼圖的網絡應用程序/遊戲。我可以使用一個PHP公式（僅將每個div（每個tile）設置爲position：absolute並設置頂部參數和左側參數）來顯示它們（但不是很好）。問題是如何捕獲瓦片上的點擊，並讓透明位的瓦片點擊到其下面的瓦片。具有半透明點擊牌的HTML/JS/CSS等距網格

我的問題的一個例子是在http://stuff.adammw.homeip.net/other/fv/farmville_2.html

來源

2010-02-14 Adam M-W

您將無法與瓷磚元素本身要做到這一點，因爲他們總是矩形。您必須監視包含所有切片的父元素內的鼠標位置，並手動計算出哪些像素對應哪些切片。對於位置到瓦片的等距映射來說，這很容易，但是這會將點位置作爲「在地面上」的位置。它不會允許您使用圖像的遮罩數據來命中測試對象，如在地面前渲染的樹。（你想這樣做，反正目前一些樹木完全不起眼的它們下面的地磚？）

如果你真的需要擊中測試圖像蒙版，您可以：

一個。編寫腳本以從圖像中提取遮罩數據，並將其作爲編碼二進制位掩碼包含在JavaScript源代碼中。我已經完成了JavaScript遊戲中的碰撞檢測，但它並不好玩，因爲它可能佔用大量空間，並且在更新圖形時必須重新導出數據。

b。使用<canvas>和getImageData提取用於測試的圖像數據。考慮到你已經失去了IE用戶，你可能會考慮使用畫布進行渲染。

來源

2010-02-14 01:15:51 bobince

這很可能是很好的「失去」那些討厭的IE用戶imho =） – Chii 2010-02-15 11:19:34

與畫布走後，找到一個好辦法做到這一點有點棘手，但幸運的是，我找到了正確的東西在 - http://philip.html5.org/demos/canvas/spritepick/example.html 這種方法的唯一問題是，它是非常JavaScript /處理器密集型，我不知道它是否會爲原來的目的是提供與iPhone網頁瀏覽器的兼容性。 – 2010-03-11 05:46:53

由於這是一個基於圖塊的遊戲，因此您可能應該使用簡單的公式確定用戶正在與哪個圖塊進行交互。使用一些JavaScript來確定點擊或其他動作的座標。然後做一些算術來確定要採取什麼行動。那有意義嗎？

否則，我同意bobince。你的方法可能不會輕鬆工作。

來源

2010-03-09 21:48:21 robert

具有很多意義 – Jonno 2011-07-23 22:01:35

您需要使用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-09 21:58:10

具有半透明點擊牌的HTML/JS/CSS等距網格

回答

相關問題