Javascript网格计算

-1

我正在创建一个游戏，其中我使用它们的id的二维数组表示框。Javascript网格计算

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

然后我想框：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};

来源

2014-11-14 Darcys22

看看你在JS逻辑中到目前为止所做的工作会有所帮助。可能帮助我们（可能只是）改进它。（据我所见，你正在寻找一个完整的游戏（盒子秋天）逻辑:)） –

这其实不是一件容易的事。我创建了一个小小的fiddle，它可以实现你想达到的目标（我认为）。
我用一些函数扩展了box prototype。我的解决方案依赖于变量grid和blocks，但如果您愿意，可以抽象出更多。
功能和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为最低排

来源

2014-11-14 13:18:57 Markai

真棒，是它的一点痛苦，但有点有趣 – Darcys22

这是我（不工作，但要点）

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 

};

来源

2014-11-15 11:30:03 Darcys22

我迟到了，但这里走了。

您应该交换行和列。也就是说，使它象：

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确实交换了列和行中的答案，但我想我会增加一些清晰度。

来源

2015-02-06 22:33:26

Javascript网格计算

回答

相关问题