Question

我有一个网格可能会以某些初始状态开始，由＃34; myblocks＆＃34;表示。我想通过点击按钮＆＃34;＃addBlockButton＆＃34;在空白处添加一个新的正方形或矩形。只有在：

1）网格中有可用空间。 2）可用空间符合由＆＃34; min_width＆＃34;定义的最小块大小;和＆＃34; min_height＆＃34;。

添加的块将被添加到可用空间，或警告＆＃34;没有可用空间＆＃34;如果没有空位。

blockCounter只是一个自动增量的唯一标识符。

假设我的网格大小为10x10，最小块大小为：

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

我有一系列的块＆＃34; myblocks＆＃34;像这样：

实施例：这是占用整个网格的单个块。

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]);
}

如何在javascript中给定一个块数组的可用空间中添加一个块？

1 个答案: