[테트리스] 20. 블록 회전 개선 (2)

이전에 했던 이슈를 마저 처리해보자.

---

1. 회전 중심

// /js/block.js

function Block(blockTypeIndex, x, y) {
    this.typeIndex = blockTypeIndex;
    this.type = blockType[this.typeIndex];
    this.shape = [...this.type.shape];
    this.blockNum = this.shape.length; // add
    
    // ...

block에 blockNum 변수를 추가. 지금보니 왜 Block을 function으로 만들었을까 싶다.

nextBlock 처럼 class로 만들어도 됐을거 같은데 :thinking_face:

 

Block 내에 있는  SMALL_BLOCK_NUM  상수를 모두  this.blockNum  으로 대체했다.

 

// /js/constants.js
const CANVAS_BORDER_LINE_WIDTH = 2; // add

다음에 나올 블럭들을 그리는 캔버스와 keep해둔 블럭을 출력하는 캔버스에 테두리를 그려놨는데 clearRect (0, 0, width, height)으로 하니까 저 선들도 지워져서 캔버스 테두리도 상수로 정의했다.

// /js/canvas.js

ctxNextBlock.lineWidth = CANVAS_BORDER_LINE_WIDTH;

ctxKeepBlock.lineWidth = CANVAS_BORDER_LINE_WIDTH;

캔버스 라인 그릴때도 해당 상수를 사용.

// /js/gameAlgorithm.js

var drawNextBlocks = function() {
   // add : clear canvas 
   ctxNextBlock.clearRect(CANVAS_BORDER_LINE_WIDTH, CANVAS_BORDER_LINE_WIDTH, 
        canvasNextBlock.width - 2 * CANVAS_BORDER_LINE_WIDTH, 
        canvasNextBlock.height - 2 * CANVAS_BORDER_LINE_WIDTH);
   
   // 가장자리에 너무 붙어서 블럭을 칠하면 clearRect할 때 제대로 안지워져서
   // 왼쪽위 가장자리에서 블럭 하나만큼 크기 + 2*canvas boarder 크기만큼 띄워서 그려준다.
   var x = SMALL_BLOCK_SIZE + 2 * CANVAS_BORDER_LINE_WIDTH;
   var y = SMALL_BLOCK_SIZE + 2 * CANVAS_BORDER_LINE_WIDTH;
   
   // ~~~
   ctxNextBlock.fillStyle = nextBlock.color;
   for (var i = 0; i < nextBlock.shape.length; i++) {
      for (var j = 0; j < nextBlock.shape.length; j++) {
         if (nextBlock.shape[i][j] == 0) continue; // 블럭 없는 곳은 안그린다.
         ctxNextBlock.fillRect(
            x + j * SMALL_BLOCK_SIZE + BLOCK_GAP,
            y + i * SMALL_BLOCK_SIZE + BLOCK_GAP,
            SMALL_BLOCK_SIZE - BLOCK_GAP,
            SMALL_BLOCK_SIZE - BLOCK_GAP
         ) 
      }
   }	
   // ~~
}

다음에 나올 블럭 로직만 가져왔다. keep 해둔 블럭을 그리는 부분과 로직은 매우 유사하다.

처음에는 clearRect가 아닌 block_num(4) 만큼 for문을 돌리며 블럭이 있는 자리면 해당 블럭색으로 채워주고 블럭이 없으면 white를 채워줌으로서 clear 역할을 해줬다. 

하지만 블럭크기가 블럭 타입에 따라 달라져서 일부 블럭이 지워지지 않는 현상이 있어 canvas를 전체 지우기로 했다.

 

clearRect를 가장자리 선 두께는 지워지지 않게 x, y, width, height 을 설정했다.

가장자리에 너무 붙어서 블럭을 캔버스에 그려주면 clear할 때 border와 붙어있는 색을 지워지지 않는 현상이 있어 좀 넉넉히 띄워서 그려줬다.

 

2. 배열 복사

this.rotation = function() {
  var nextShape =  [[],[],[],[]];
  // ~~
}

블럭 크기가 이제 타입마다 다르므로 이것도 달라져야 한다.

// js/block.js 

this.rotation = function() {
  var length = this.shape.length
  var nextShape =  [];
  for(var i = 0; i < length; i++) nextShape[i] = [];
  // ~~
}

this.shape.length 대신 this.blockNum을 사용할걸 그랬다.

---

실행결과

오른쪽에 있는 다음에 나올 블럭과 keep한 블럭 출력은 기존과 약간다르지만 게임 스크린은 기존과 동일하게 동작하므로 이번 이슈는 여기까지!

---

깃허브 : use SMALL_BLOCK_NUM constant to block.blockNum