Javascript网格计算

Javascript grid calculation

本文关键字：计算 网格 Javascript      更新时间：2023-09-26

我正在创建一个游戏，其中我用其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};

这实际上不是一件容易的事。我创建了一个小提琴，可以做你想实现的目标（我认为）。
我用一些功能扩展了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 作为最低行

我迟到了，但在这里。

您可能应该交换行和列。那就是让它像：

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

这样，删除只是对列的数组操作。然后，您可以执行诸如splice块、splice块、unshift、shift等操作。

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

您甚至可以通过数组方法命名执行此操作的方法。 shift放下底部块，splice(start, stop, [optional]new block) .诸如此类。

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

这就是我想出的（不是工作，而是要点）

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
};
相关文章：