Отображение тайла карты в Javascript

Question

Вот код, который я сейчас использую, чтобы попытаться сгенерировать карту:сетка 8x8 "травы", но она была пуста, но консоль была чиста

Answer 1

Вы ошиблись tsize (против tSize).Кроме того, выражение для второго аргумента кажется не тем, что вы хотите.Вы можете просто передать 0:

ctx.drawImage(
    tileAtlas, // image
    0,
    0,
    map.tSize, // size of tiles for cut size x
    map.tSize, // size of tiles for cut size y
    c * map.tSize, // place tiles on canvas x
    r * map.tSize, // place tiles on canvas y
    map.tSize, // place height
    map.tSize // place width
);

var can = document.getElementById("canvas");
var ctx = can.getContext('2d');
var map = {
    cols: 8, //# of cols
    rows: 8, // # of rows
    tSize: 32, // tile size (32px x 32px)
    tiles: [
        [1, 1, 1, 1 ,1 ,1, 1, 1],
        [1, 1, 1, 1, 1, 1, 1, 1],
        [1, 1, 1, 1, 1, 1, 1, 1],
        [1, 1, 1, 1, 1, 1, 1, 1],
        [1, 1, 1, 1, 1, 1, 1, 1],
        [1, 1, 1, 1, 1, 1, 1, 1],
        [1, 1, 1, 1, 1, 1, 1, 1],
        [1, 1, 1, 1, 1, 1, 1, 1]
    ], // map
};

var tileAtlas = new Image();
tileAtlas.src = 'https://i.stack.imgur.com/2JX3d.png';
tileAtlas.onload = function () {
    for (var c = 0; c < map.cols; c++) {
        for (var r = 0; r < map.rows; r++) {
            ctx.drawImage(
                tileAtlas, // image
                0, 
                0,
                map.tSize, // size of tiles for cut size x
                map.tSize, // size of tiles for cut size y
                c * map.tSize, // place tiles on canvas x
                r * map.tSize, // place tiles on canvas y
                map.tSize, // place height
                map.tSize // place width
            );

        }
    }
}

<canvas id="canvas" width="256px" height="256px"></canvas>