Javascript网格计算

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

这其实不是一件容易的事。我创建了一个小小提琴来实现您想要实现的目标(我认为)。

我用一些函数扩展了box prototype。我的解决方案依赖于变量grid和blocks，但是如果您愿意的话，您可以更多地抽象这些变量。

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

以及它的使用：

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 out块、splice in块、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

};