[테트리스] 19. 블록 회전 개선 (1)

오늘의 이슈.

올게 왔군.

---

현재 블럭은 4x4 배열이다. 회전시 왼쪽, 시계반대방향으로 블럭이 회전시키자.

1 (0,0)	2 (0,1)	3 (0,2)	4 (0,3)
5 (1,0)	6 (1,1)	7 (1,2)	8 (1,3)
9 (2,0)	10 (2,1)	11 (2,2)	12 (2,3)
13 (3,0)	14 (3,1)	15 (3,2)	16 (3,3)

배열로 표현하면 위와 같은 걸 회전하면

4 (0,0)	8 (0,1)	12 (0,2)	16 (0,3)
3 (1,0)	7 (1,1)	11 (1,2)	15 (1,3)
2 (2,0)	6 (2,1)	10 (2,2)	14 (2,3)
1 (3,0)	5 (3,1)	9 (3,2)	13 (3,3)

위 배열로 바껴야한다.

(x, y) -> (size - y, x) 로 변경되는 것을 확인할 수 있다.

// js/blockType.js

const blockType = [
    {
        name: "O",
        color: "skyblue",
        shape: [[0, 0, 0, 0], [0, 1, 1, 0], [0, 1, 1, 0], [0, 0, 0, 0]] //수정
    },
    {
        name: "S",
        color: "red",
        shape: [[0, 0, 0, 0], [0, 0, 1, 1], [0, 1, 1, 0], [0, 0, 0, 0]] //수정
    },
    {
        name: "Z",
        color: "purple",
        shape: [[0, 0, 0, 0], [0, 1, 1, 0], [0, 0, 1, 1], [0, 0, 0, 0]] //수정
    },
    {
        name: "I",
        color: "darkred",
        shape: [[0, 0, 0, 0], [0, 0, 0, 0], [1, 1, 1, 1], [0, 0, 0, 0]] //수정
    },
    {
        name: "T",
        color: "#FFD300",
        shape: [[0, 0, 0, 0], [0, 1, 1, 1], [0, 0, 1, 0], [0, 0, 0, 0]] //수정
    },
    {
        name: "L",
        color: "green",
        shape: [[0, 0, 0, 0], [0, 1, 1, 1], [0, 1, 0, 0], [0, 0, 0, 0]] //수정
    },
    {
        name: "J",
        color: "blue",
        shape: [[0, 0, 0, 0], [0, 1, 1, 1], [0, 0, 0, 1], [0, 0, 0, 0]] //수정
    }
];

// js/block.js 
function Block(blockTypeIndex, x, y) {
  // ...
  this.shape = [...this.type.shape];
 
  this.rotation = function() {
    // ...

    var length = this.shape.length
    var nextShape =  [[],[],[],[]];

    for (var i = 0; i < length; i++) {
      for (var j = 0; j < length; j++) {
        var nx = length - 1 - j;
        var ny = i;
        var old = this.shape[i][j];
        nextShape[nx][ny] = old;
      }
    }
    // ...
}

 

---

잔여 이슈

 

1. 회전 중심

I 자 블록 때문에 모든 shape를 4x4로 만들었는데 다른 블록들은 모두 3x3이다. 그래서 회전 중심이 어긋나서 z 블록 처럼 2번 회전시 원래 모양으로 돌아와야 하는데 한칸 왼쪽으로 이동한다던가 하는 문제가 있다.

shape를 3x3으로 만들고 SMALL_BLOCK_NUM(4) 상수에 의존하는 코드들을 모두 shape length를 보게 수정할 필요가 있다.

 

2. 배열 복사

var nextShape =  [[],[],[],[]]; // #1
var nextShape = new Array(length).fill(Array(length)); // #2

임시로 #1 과 같은 방식으로 코딩해놨는데 #2 와 같은 방법으로 배열을 생성하면 회전시 블록 모양이 이상하게 변한다.

#2로 하면 위처럼 왼쪽 블록을 회전시키면 오른쪽모양으로 바뀜.. 아 자바스크립트~ 난 너를 모르겠따~~

 

오늘 다 하려고 했는데 2번 이슈에서 보틀넥 걸려서 1번을 못했다. :P

---

깃허브 : modify blockType.shape array