Как отрисовать объекты в массиве на Javascript?

Пишу что-то вроде старого платформера lode runner. У меня генерируется массив, получая количество строк и ячеек из переменных в классе config. Также создается таблица в html файле. Мне нужно заполнить некоторые элементы массива значениями, соответствующими определенным объектам.

    class Level {
    constructor() {
        this.map = [];
    }
    init(settings) {
        this.settings = settings;
    }
    createLevelMap() {
        for (let i = 0; i < this.settings.rowsCount; i++) {
            let newRow = [];
            this.map.push(newRow);
            for (let j = 0; j < this.settings.colsCount; j++) {
                let newCol = '';
                this.map[i].push(newCol);
            }
        }
    }
    renderLevelMap() {
        let table = document.createElement('table');
        for (let i = 0; i < this.settings.rowsCount; i++) {
            let tRow = document.createElement('tr');
            table.appendChild(tRow);
            for (let j = 0; j < this.settings.colsCount; j++) {
                let tCol = document.createElement('td');
                tRow.appendChild(tCol);
            }
        }
        document.body.appendChild(table);
    }
}

Придумал я значит делать так:

let ground = [[10,11,1,4][...][...]] тут каждый массив это платформа, которую нужно отрисовать, первый элемент в массиве это координата y, вторая x, потом толщина, потом сколько ячеек в строке (ширина) платформы.

Ну и допустим let groundSymbol = '#' это символ, который нужно будет вставить в элемент массива

Итог: должно получиться что в массиве игрового поля по индексу 10 берем 11 элемент и поскольку ширина у нас 4, то по 14 элемент включительно записываем значение '#' и так с каждым последующим массивом, которые лежат в ground

Подскажите как такое реализовать вообще? Я ничего другого не придумал