HTML5畫布繪制圖塊

Question

就像我有tileet一樣：

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

我的tileet繪制代碼：

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瓷磚。

對不起，我的英語不好。

謝謝！

Answer 1

將這些tilset坐標放置在（多維）數組中，這樣您就可以遍歷數據並顯示結果。 這意味着如果有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'=一張，在我的Sprite表上向下7。