Javascript grid calculation

Question

I am creating a game where I represent boxes with a two dimensional array of their 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]];

The boxes stack on top of each other, and X represents a blank spot.

If one of the boxes are deleted I want any of the boxes above (That can fit) to shift down. So they are always neatly stacked.

So if I was to delete the box with ID: 1 I would get a new grid like this:

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

Then I would want Box: 3 to slide down into its spot like so:

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

Finally Box: 4 should move down into where 3 was:

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

Is there an easy way of doing this? I was thinking of a callback that checks the grid when a box is destroyed but what I came up with was mostly IF statements. Is there something elegant out there?

The box class itself also has the start position and its length:

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

Answer 1

This is actually not an easy task. I created a little fiddle that does what you wanted to achieve (i think).
I extended the box prototype with some functions. My solution relies on the variables grid and blocks, but you could abstract that even more if you like to.
The functions testFunctionality and printGridToElement are just there for testing purposes.

My new Box prototype:

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

and the usage of it:

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

NOTE: I designed the grid with 0 being the lowest row

Answer 2

This is what I came up with (Not working but the gist)

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

};

Answer 3

I'm late, but here goes.

You should probably swap rows, and columns. That is make it like:

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

Instead of:

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

This way a drop is just an array operation on columns. You can then do things like splice out a block, splice in a block, unshift, shift, and so on.

Do the array operations before animations, but not before you get the column, and row information from the grid.

You can even name the methods that do it by array methods. shift drops the bottom block, splice(start, stop, [optional]new block). Like that.

@Markai did swap the columns, and rows in their answer, but I thought I'd add some clarity.