[테트리스] 16. 초기 블럭 생성 위치 개선

오늘의 이슈. 

초기 블럭 위치를 0에서 -2로 개선시킨다.

말만 -2이지 배열에서는 인덱스가 -2가 될 수 없으므로 gameArray 배열의 y 인덱스를 2증가시키고,

canvas에서는 gameArray의 2인덱스부터 블록을 그려준다.

---

// constants.js

const HIDE_SCREEN_HEIGHT_NUM = 2; //add

// gamearray y size
const GAME_SCREEN_HEIGHT_NUM = 20 + HIDE_SCREEN_HEIGHT_NUM;
// canvas y size
const GAME_SCREEN_HEIGHT = (GAME_SCREEN_HEIGHT_NUM - HIDE_SCREEN_HEIGHT_NUM) * SMALL_BLOCK_SIZE;

상수에 숨김처리하는 블럭 y인덱스 개수를 지정하고,

gameArray(로직상에 사용하는 블럭 저장 배열)에는 이를 더하고,

게임 스크린 세로 크기는 이전과 동일하게 수정했다.

// gameAlgorithm.js
var eraseOneBlock = function(x, y) {
    ctx.clearRect(
        x * SMALL_BLOCK_SIZE + BLOCK_GAP,
        (y - HIDE_SCREEN_HEIGHT_NUM) * SMALL_BLOCK_SIZE + BLOCK_GAP, // modify y index
        SMALL_BLOCK_SIZE - BLOCK_GAP,
        SMALL_BLOCK_SIZE - BLOCK_GAP
    );
    
 var drawOneBlockWithColor = function(x, y, colorName) {
    ctx.fillStyle = colorName;
    ctx.fillRect(
        x * SMALL_BLOCK_SIZE + BLOCK_GAP,
        (y - HIDE_SCREEN_HEIGHT_NUM) * SMALL_BLOCK_SIZE + BLOCK_GAP, // modify y index
        SMALL_BLOCK_SIZE - BLOCK_GAP,
        SMALL_BLOCK_SIZE - BLOCK_GAP
    );
}

게임 canvas에 블럭을 그릴 때 gamearray y 인덱스보다 HIDE_SCREEN_HEIGHT_NUM 만큼 작은 위치에 블럭을 그리거나 지우게 했다. 이 값이 마이너스가 되면 해당 블럭이 안보인다.

 

실행결과 (좌: 수정 전 / 우: 수정 후)

---

깃허브 : block begin y index is -2