Question

我正在创建一个游戏，我在其中表示带有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]];

最后Box：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};

Answer 1

这实际上不是一件容易的事。我创造了一个小fiddle来完成你想要实现的目标（我认为）我用一些函数扩展了box prototype。我的解决方案依赖于变量grid和blocks，但如果您愿意，可以抽象更多。
函数testFunctionality和printGridToElement仅用于测试目的。

我的新Box原型：

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

及其用法：

var b1 = new Box(1, 1, 4);
b1.insertIntoGrid(0);
var b2 = new Box(2, 3, 4);
b2.insertIntoGrid(1);
var b3 = new Box(3, 1, 4);
b3.insertIntoGrid(2);
var b4 = new Box(4, 2, 4);
b4.insertIntoGrid(3);
var b5 = new Box(5, 5, 5);
b5.insertIntoGrid(0);
b1.destroy();
b2.destroy();
b3.destroy();

注意：我设计了0为最低行的网格

Answer 2

我迟到了，但到了。

您应该交换行和列。这就像是：

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就是对列的数组操作。然后，您可以执行splice一个块，splice一个块，unshift，shift等等。

在动画之前进行数组操作，但在获取列之前不进行数组操作，并从网格中执行行信息。

您甚至可以通过数组方法命名执行此操作的方法。 shift删除底部块splice(start, stop, [optional]new block)。就像那样。

@Markai确实在他们的答案中交换了列和行，但我想我会增加一些清晰度。

Answer 3

这是我提出的（不工作但是要点）

fallCheck = function(deletedPosition, deletedLength) {
  var fallable = grid.reduce(
    function(array, row) {

    var unique = row.filter(function(item, i, ar) { return ar.indexOf(item) === i;});

    var id = unique.find( function(boxId) {
      var box = boxes.iterate("id", boxId, Phaser.Group.RETURN_CHILD);  //Finds the instance within a Phaser Group
      return (box.start >= deletedPosition) && (box.start + box.length) <= (deletedPosition + deletedLength);
    });

    if (id != -1) array.push(id);
  }, []);

  if (fallable.length > 0) { fall(fallable[0]); }  //fall simply moves the box to the lowest position on the grid

};

Javascript网格计算

3 个答案: