Javascript网格计算

我正在创建一个游戏，在这个游戏中，我用盒子id的二维数组来表示盒子

var grid =  [[X,X,X,X,X,X,X,X,X,X],
             [X,X,4,4,4,4,X,X,X,X],
             [X,3,3,3,3,X,X,X,X,X],
             [X,X,X,2,2,2,2,X,X,X],
             [X,1,1,1,1,5,5,5,5,5]];

盒子堆叠在一起，X代表一个空白点

如果其中一个框被删除，我希望上面任何一个框（适合）向下移动。所以它们总是整齐地堆放着

因此，如果我要删除ID为1的框，我会得到一个新的网格，如下所示：

var grid =  [[X,X,X,X,X,X,X,X,X,X],
             [X,X,4,4,4,4,X,X,X,X],
             [X,3,3,3,3,X,X,X,X,X],
             [X,X,X,2,2,2,2,X,X,X],
             [X,X,X,X,X,5,5,5,5,5]];

然后我想让Box:3像这样滑入它的位置：

var grid =  [[X,X,X,X,X,X,X,X,X,X],
             [X,X,4,4,4,4,X,X,X,X],
             [X,X,X,X,X,X,X,X,X,X],
             [X,X,X,2,2,2,2,X,X,X],
             [X,3,3,3,3,5,5,5,5,5]];

最后，方框4应向下移动到3所在的位置：

var grid =  [[X,X,X,X,X,X,X,X,X,X],
             [X,X,X,X,X,X,X,X,X,X],
             [X,X,4,4,4,4,X,X,X,X],
             [X,X,X,2,2,2,2,X,X,X],
             [X,3,3,3,3,5,5,5,5,5]];

有没有一个简单的方法可以做到这一点？我在考虑一个回调，当一个盒子被销毁时，它会检查网格，但我想到的大部分是IF语句。外面有什么优雅的东西吗

box类本身也具有开始位置及其长度：

  box = {id:     3,
         start:  1,
         length: 4};

---

这其实并不容易。我创建了一个能实现您想要实现的目标的小程序（我认为）。
我用一些函数扩展了

box原型。我的解决方案依赖于变量
网格
和
块
，但如果愿意，您可以提取更多的变量。

函数
testFunctionality
和
printGridToElement
仅用于测试目的。

我的新盒子原型：

function Box(i, s, l) {
    this.id = i;
    this.start = s;
    this.length = l;
    this.row;
    blocks.push(this);
}
Box.prototype.insertIntoGrid = function (row) {
    this.row = row;
    if (!grid[row]) grid[row] = [];
    for (var i = 0; i < this.length; i++) {
        grid[row][this.start + i] = this.id;
    }
};
Box.prototype.destroy = function () {
    blocks.splice(blocks.indexOf(this), 1);
    this.removeFromGrid();
    this.checkRemainingBlocksForMoveDown();
};
Box.prototype.checkRemainingBlocksForMoveDown = function () {
    for (var i = 0; i < blocks.length; i++) {
        var btmd = blocks[i].checkForMoveDown();
        if (btmd) {
            btmd[0].move(btmd[1]);
            btmd[0].checkRemainingBlocksForMoveDown();
        }
    }
}
Box.prototype.move = function (row) {
    this.removeFromGrid();
    this.insertIntoGrid(row);
};
Box.prototype.removeFromGrid = function () {
    for (var i = 0; i < this.length; i++) {
        grid[this.row][this.start + i] = 0;
    }
};
Box.prototype.checkForMoveDown = function () {
    for (var i = 0; i < this.row; i++) {
        var move = true;
        for (var j = 0; j < this.length; j++) {
            if (grid[i][this.start + j] != 0) {
                move = false;
                break;
            }
        }
        if (move) {
            return [this, i];
        }
    }
};

注意：我设计网格时，0是最低的一行
这是我想到的（不是工作，而是要点）

fallCheck=函数（deletedPosition，deletedLength）{
var fallable=grid.reduce(
函数（数组、行）{
var unique=row.filter（函数（item，i，ar）{return ar.indexOf（item）==i；}）；
var id=unique.find（函数（boxId）{
var box=box.iterate（“id”，boxId，Phaser.Group.RETURN_CHILD）；//在Phaser组中查找实例
return（box.start>=deletedPosition）&&（box.start+box.length）0{fall（fallable[0]）；}//fall只需将长方体移动到网格上的最低位置
};
我迟到了，但我来了

您可能应该交换行、列和列。这就像：

var rows = [];
column = [x,x,x,x,x,x,x,x];
rows.push(column);

而不是：

var columns = [];
var row = [x,x,x,x,x,x,x,x];
columns.push(row);

这样，drop就只是列上的一个数组操作。然后，您可以执行以下操作：将
拼接
出块、
拼接
入块、
取消移位
、
移位
，等等

在动画之前执行数组操作，但不要在从网格获取列和行信息之前执行

您甚至可以通过数组方法命名执行此操作的方法。
shift
删除底部块，
splice（开始、停止，[可选]新块）
。就像这样

@Markai确实交换了答案中的列和行，但我想我应该增加一些清晰度。
将有助于了解您迄今为止在JS逻辑中所做的工作。可能会帮助我们（可能只是）改进它。（据我所知，您正在寻找一个完整的游戏（框落）逻辑：））太棒了，是的，这有点痛苦，但有点有趣
var rows = [];
column = [x,x,x,x,x,x,x,x];
rows.push(column);

var columns = [];
var row = [x,x,x,x,x,x,x,x];
columns.push(row);