HTML5 Canvas Draw Tileset

Question

Что-то вроде того, что у меня есть набор тайлов:

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 плиток.

Извините за мой плохой английский язык.

Спасибо!

Answer 1

Поместите эти координаты наклона в (многомерный) массив, чтобы вы могли циклически просматривать данные и отображать результаты. Это означает, что если есть 10 элементов, ваш код будет проходить через все десять. Если их 15, то все будет в порядке, и все 15.

Конечно, вы можете ограничить количество плиток, если вы просматриваете цикл, используя цикл for и указывая конечное условие как «i

Дай мне знать, если я тебя не совсем понял. Ниже приведен пример функции, которую я создал для моего проекта по рисованию плиток. Это может дать вам некоторые подсказки о том, что вы пытаетесь сделать.

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 вниз на моем листе спрайта.