자바 스크립트 그리드 계산

Question

나는 이드의 2 차원 배열로 상자를 표현하는 게임을 만들었습니다.

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와 함께 상자 삭제 인 경우

그래서 : 3과 같이 그 자리에 아래로 슬라이드 :

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

가 그럼 난 상자가 원하는 것 :

1이 같은 새로운 그리드를 얻을 것

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 = {id:  3, 
     start: 1, 
     length: 4}; 

Answer 1

이 실제로 쉬운 일이 아니다 :

상자 클래스 자체도 시작 위치와 길이를 가지고있다. 나는 당신이 달성하기를 원하는 것 (나는 생각한다)을하는 조금 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이 가장 낮은 행

Answer 2

이에게 인 상태 그리드 디자인은 무엇입니까 I 함께 올랐다 (작동하지 않지만 요점)

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

나는 늦었지만 여기에있다.

아마 행과 열을 바꿔야합니다.

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는 열과 행을 서로 바꿨지 만 명확성을 추가 할 것으로 생각했습니다.