HTML5畫布繪製地形設置

喜歡的東西我有地形設置：HTML5畫布繪製地形設置

0, 1, 2, 3, 4, 5, 
6, 7, 8, 9, 10, 11, 
12, 13, 14, 15, 16, 
17, 18, 19, 20

我的地形設置抽獎代碼：

var image = new Image(); 
image.src = '32x32.png'; 
var tile = 5; 
var tileSize = 32; 
var x = 100; 
var y = 100; 
context.drawImage(image, Math.floor(tile * tileSize), 0, tileSize, tileSize, x, y, tileSize, tileSize);

這碼抽獎「5」瓦，但像如何繪製10瓦？或15瓦而不添加tileX，tileY。我需要像瓦等於15 - 畫15瓦。

對不起，我英語不好。

謝謝！

來源

2012-03-10 unuooo

把這些座標系座標放在一個（多維）數組中，這樣你可以遍歷數據並顯示結果。這意味着如果有10個項目，你的代碼將遍歷所有十個項目。如果有15，那麼很好，它會遍歷全部15.

當然，如果通過使用for循環並指定結束條件爲「i < tile」（假設你的計數從0開始）。

讓我知道如果我還沒有完全理解你。下面是我爲我的一個項目創建的繪製圖塊的函數示例。它可能會給你一些你想要做的事情的線索。

function renderMap(ctx, mapObj) 
{ 
var rgt = mapObj.data();   

for (matrixY in rgt) { 
    for (matrixX in rgt[matrixY]) { 

     var matrixArray = rgt[matrixY][matrixX].split(','); 

     var x = matrixArray[0]; 
     var y = matrixArray[1]; 

     var sx = (x-1) * mapObj.tileWidth(); 
     var sy = (y-1) * mapObj.tileHeight(); 

     var dx = (matrixX) * mapObj.tileWidth(); 
     var dy = (matrixY) * mapObj.tileHeight(); 

     ctx.drawImage(mapObj.mapTilesImg(), sx, sy, mapObj.tileWidth(), mapObj.tileHeight(), dx, dy, mapObj.tileWidth(), mapObj.tileHeight()); 
    } 
} 
}

並用於（一個軌道對象的一部分）的數據：

rgt: [ ['1,7', '1,7', '1,7', '1,7', '1,7', '1,7', '1,7', '1,7'], 
      ['1,2', '2,1', '4,4', '2,1', '2,4', '2,1', '2,1', '2,2'], 
      ['3,4', '4,5', '1,7', '1,7', '4,13', '1,7', '1,7', '1,4'], 
      ['4,3', '1,7', '3,7', '1,7', '1,7', '1,2', '2,1', '2,6'], 
      ['1,1', '1,15', '1,7', '1,7', '2,7', '1,4', '1,7', '1,7'], 
      ['1,6', '2,1', '2,1', '2,4', '4,1', '2,6', '1,7', '1,7'] 
     ]

我用座標。例如。 '1,7'=一個橫過，7下降在我的精靈表上。

來源

2012-03-12 21:41:07 Jarrod

HTML5畫布繪製地形設置

回答

相關問題