Javascript「拼圖遊戲」與不規則的.png形狀

Question

Soooo，我想要做的事實質上是一個拼圖遊戲。在左邊是一堆疊十幾個重疊的.png文件，這些文件是「撕開的」紙片（所有不同的不規則形狀都是阿爾法），當放在一起時，依次在右側形成一張紙並附上說明。一個視覺（無視旋轉件）：

沒有新的我知道，但我的兩個主要注意事項是它必須在ie8 +和觸摸設備上工作。所以這意味着沒有閃光（這將是非常容易的），沒有畫布（愚蠢的）;這讓我與JS，也許SVG？

js中的拖放部分很容易，但我遇到的問題是，我相信你知道，alpha通道被忽略，而不規則的翻轉部分實際上是一個矩形。考慮到這些作品是一個疊放在一起的作品，這使得它無法使用。

我可以通過使用圖像映射並在翻轉時設置變量來對丟棄物進行粒度命中檢測。

我環顧了很多（這裏+谷歌），並嘗試了一些想法，但我無法解決不規則的形狀選擇/拖動問題。有任何想法嗎？

感謝您的時間。

Answer 1

是不是ExplorerCanvas您的選擇？我認爲這可以讓你創建一個基於畫布的解決方案。這將是比通過JavaScript與普通的HTML元素操作做任何事要好得多

Answer 2

低技術解決方案

絕對位置

如果你願意花一點點額外的嵌套元素時間，有一種方法可以非常密切地實現這一點，而無需使用Flash，Canvas，SVG甚至圖像映射。與圖像地圖不同，它允許您根據需要在每個熱點內嵌入相關內容（例如彈出窗口）。

在最簡單的情況下，您可以爲每個拼圖使用單個矩形超鏈接熱點。顯然，這大大限制了您可以支持的形狀範圍（不會干擾重疊元素）。

但是，如果您將該超鏈接標記賦予一定數量的span標記子元素，併爲每個元素提供絕對位置（相對於超鏈接），並將適當的圖像部分應用於背景，那麼您可以「構建」佔據單個不規則熱點的不規則圖像形狀，對重疊元素的干擾相對較小。

實際上，圖像（帶透明區域）被視爲一個精靈文件，超鏈接標記和子範圍標記分別佔據「精靈文件」的一部分。圖像的大部分透明部分不會被超鏈接標籤或span標籤佔用。

大多數形狀可以使用超鏈接標籤和4-10跨度構建。當然，形狀越不規則，它越傾向於需要更多的跨度。

我以前做過這件事，爲美國地圖上的每個州創建熱點，而不使用圖片地圖（或Flash，Canvas，SVG），而且它幾乎沒有你想象的那麼有問題認爲。它只是需要一點時間來弄清楚如何將每個形狀分解成正確數量的矩形的細節。

漁獲

在移動設備上

舍入誤差這裏的漁獲，這是一個謊言。當網頁在移動設備上縮放（並且常規頁面幾乎總是在較小的設備上縮放）時，會引入舍入錯誤，導致超鏈接標記和跨度標記的px位置可能至少變化1個像素和/或垂直。如果桌面瀏覽器被縮放，這也會發生;只是桌面瀏覽器不會經常縮放。

會發生什麼事情是，你會傾向於在每個形狀的不同部分之間分離（或重疊）1像素左右。在很多情況下，這將會非常明顯，並且在視覺上不能被接受。根據實施情況，位置可能會相差2px或3px。當它發生時很難解決，並且有多少可以解決的限制。

最後我檢查了一下，Firefox是唯一一個足夠智能的瀏覽器，可以在縮放頁面上舍入px值來避免這個問題。希望其他瀏覽器最終能夠更好地支持它，因爲即使是簡單的頁面也經常會遇到舍入錯誤。

溶液

分離將圖像從熱點

的舍入誤差是不是太大的問題的與熱點（其中精度並不重要）。它真正導致問題的地方在於圖像（當你看到一張圖像沒有排列起來時）。

它可以是能夠避免最壞的圖像通過執行以下操作的舍入誤差：如上所述的用於熱點

• 有一組HTML代碼，相同的，除了不顯示任何部分的熱點圖像。給他們所有的透明背景。
• 還有一組圖像的HTML代碼。每一個都將是一個顯示所有圖像的矩形元素。
• 將每個圖像放置在與相關熱點相同的位置。
• 確保熱點集和圖像集都具有相同的z索引順序。所有熱點將在所有圖像之上，但在熱點和圖像內，訂單需要保持一致。
• 當拖動片段的熱點時，更新相關圖片的位置以將它們保持在同一位置。實際上，圖像在被拖動時會遮住熱點。