如何在給定的JavaScript塊數組的情況下在可用空間中添加塊？

Question

我有一個網格，該網格可能會以“ myblocks”表示的某些初始狀態開始。 我只想在以下情況下通過單擊按鈕“ #addBlockButton”在空白區域中添加新的正方形或矩形：

1）網格中有可用空間。 2）可用空間滿足“ min_width”和“ min_height”定義的最小塊大小。

添加的塊將被添加到可用空間，或者如果沒有可用空間，則警告“無可用空間”。

blockCounter只是自動遞增的唯一標識符。

假設我有一個大小為10x10的網格，最小塊大小為：

let grid_width = 10
let grid_height = 10
let block_min_width = 2
let block_min_height = 2

我有這樣一個塊數組“ myblocks”：

示例：這是一個占據整個網格的塊。

myblocks = [{
'blockCounter':1,
'x': 0,
'y': 0,
'height': 10
'width': 10
}]

以下是一個包​​含3個塊的示例。

myblocks = [{
'blockCounter':1,
'x': 0,
'y': 0,
'height': 3
'width': 3
},
{'blockCounter':2,
'x': 3,
'y': 3,
'height': 3
'width': 7
}
{'blockCounter':3,
'x': 0,
'y': 4,
'height': 3
'width': 5
}

]

有效執行此操作的最佳方法是什么？

Answer 1

試試這個：我沒有測試邊緣情況，但是它應該可以正常工作（對我有用：） ..）其O（n）算法：

var cubes = [];
var rowSpace = (function () {
    let rowSpace = [];
    for (var i = 0; i < grid_width; i++) {
        rowSpace[i] = grid_width;
    }
    return rowSpace;
})();

function addBlock(block) {
    var minY = 0, maxY = 0, i;

    if (_isBlockValid(block)) {
        for (i = 0; i < rowSpace.length; i++) {
            if (rowSpace[i] >= block.width) {
                maxY++;
                if ((maxY - minY) >= block.height) {
                    _add(grid_width - rowSpace[i], minY, block);
                    _updateRows(minY, block.height, block.width);
                    return;
                }
            } else {
                minY++;
                maxY++;
            }
        }
    }

    //If you have got here, its because of an error
    console.log("no space available for: " + JSON.stringify(block));
}

function _isBlockValid(block) {
    return block && (typeof block.height === "number" && block.height >= block_min_height) &&
        (typeof block.height === "number" && block.width >= block_min_width);
}

function _add(x, y, block) {
    cubes.push({x, y, block});
}

function _updateRows(minY, rows, diff) {
    for (var i = minY; i < rows; i++) {
        rowSpace[i] -= diff;
    }
}

//Execution
for (var i = 0; i < myblocks.length; i++) {
    addBlock(myblocks[i]);
}