[테트리스] 3. 테트리스 블럭 모양 만들기

2018. 7. 25.

---

const SMALL_BLOCK_SIZE = 20; // 블럭 한 칸
const BIG_BLOCK_SIZE = SMALL_BLOCK_SIZE * 4; // 4 x 4 블럭의 width, height 

// 이전 블럭 지우기
ctx.clearRect(this.x, this.y, BIG_BLOCK_SIZE, BIG_BLOCK_SIZE);

for (var i = 0; i < 4; i++) {
     for (var j = 0; j < 4; j++) {
          // 작은 블럭이 1(채워져 있음)이면
          if (this.type.shape[i][j] == 1)
          // 해당 칸 색칠
          ctx.fillRect(
               nx + i * SMALL_BLOCK_SIZE,
               ny + j * SMALL_BLOCK_SIZE,
               SMALL_BLOCK_SIZE,
               SMALL_BLOCK_SIZE
          );
     }
}​

// block 타입 중 하나 구하기
var nextBlockType = Math.floor(Math.random() * blockType.length);

이런 식으로 4 X 4 배열에 블럭 모양을 만든다. (위 모양 중 하나만)

// 배열로 블럭 모양 만들기
var 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: "gray",
        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: "red",
        shape: [[0, 1, 0, 0], [0, 1, 0, 0], [0, 1, 0, 0], [0, 1, 0, 0]]
    },
    {
        name: "T",
        color: "yellow",
        shape: [[0, 0, 1, 0], [0, 1, 1, 1], [0, 0, 0, 0], [0, 0, 0, 0]]
    },
    {
        name: "L",
        color: "green",
        shape: [[0, 0, 1, 0], [1, 1, 1, 0], [0, 0, 0, 0], [0, 0, 0, 0]]
    },
    {
        name: "J",
        color: "blue",
        shape: [[0, 1, 0, 0], [1, 1, 1, 0], [0, 0, 0, 0], [0, 0, 0, 0]]
    }
];

const SMALL_BLOCK_SIZE = 20; // 블럭 한 칸
const BIG_BLOCK_SIZE = SMALL_BLOCK_SIZE * 4; // 4 x 4 블럭의 width, height 

// 이전 블럭 지우기
ctx.clearRect(this.x, this.y, BIG_BLOCK_SIZE, BIG_BLOCK_SIZE);

for (var i = 0; i < 4; i++) {
     for (var j = 0; j < 4; j++) {
          // 작은 블럭이 1(채워져 있음)이면
          if (this.type.shape[i][j] == 1)
          // 해당 칸 색칠
          ctx.fillRect(
               nx + i * SMALL_BLOCK_SIZE,
               ny + j * SMALL_BLOCK_SIZE,
               SMALL_BLOCK_SIZE,
               SMALL_BLOCK_SIZE
          );
     }
}

위 코드와 같이 모든 칸을 지우면 안된다. 4 X 4 배열이 다른 블럭과 중첩될 수 있기 때문이다.

블럭 간 경계 처리 수정이 필요해 보인다.

---

참고
https://people.ece.cornell.edu/land/courses/ece5760/FinalProjects/f2008/aj77/aj77/finalreport.html

---

깃허브
Next block type random change
Change block appearance