設計小地圖：更有效的方法

Question

我正在制作一款帶有小地圖的wap游戲。 它基本上是一個5x5的div，具有（一個）20x20像素的背景圖像。

不過，我陷入僵局，試圖弄清楚如何設計它們。

為每個“位置”制作一個100x100像素的圖像不是一個好主意，因為如果更改了這20x20位置之一，我將不得不更新15張100x100圖像。

剩下兩個選擇：

• 使用GD將20x20像素的圖像合並為100x100像素的大圖像
• 給小地圖中的每個div加上20x20位置圖像的背景。

在第二種情況下，我會發出很多HTTP請求來獲取圖像，在第一種情況下，將使用服務器資源將它們組合成一個大圖像。

您認為哪種選擇更有效？ 基本上，我認為這是一種失敗的情況，但是必須決定哪種損失不會那么痛苦。

Answer 1

您為什么不簽出CSS SPRITES？

http://spriteme.org/

然后，您可以使用php函數生成地圖，該函數隨機選擇CSS類（及其相對背景）。

如果您假設將20x20地圖的9個不同部分組合成3x3網格，則只需為每張地圖創建一個類。 您可以動態生成它（用“ $ x = rand（0,3）* 20; $ y = rand = rand（0,3）* 20;”替換0px 0px左右）。

.map1 {
    background-image:url(/images/css_sprite.png);
    background-position:0px 0px;
    background-size:20px 20px;
}

1個HTTP請求被調用，GD中沒有服務器資源被浪費！