[테트리스] 7. 블럭 한 칸 구별, 스페이스 구현

2018. 7. 31.

---

# 블럭 한 칸 구별되게 블럭 간 틈새 추가

const BLOCK_GAP = 1; // 블럭 틈새 크기

var drawOneBlock = function(x, y, colorType) {
    ctx.fillStyle = blockType[colorType].color;
    ctx.fillRect(
        // 틈새 크기만큼 띄우고 그리기
        x * SMALL_BLOCK_SIZE + BLOCK_GAP, 
        y * SMALL_BLOCK_SIZE + BLOCK_GAP, 
        SMALL_BLOCK_SIZE - BLOCK_GAP,
        SMALL_BLOCK_SIZE - BLOCK_GAP
    );
};

# 스페이스 바 눌렀을 때 블럭 가장 아래로 이동시키기
var drawBelow = function(block) {
    console.log("below");
    var x = block.x;
    var y = block.y;

    // 이전 블럭 지우기
    block.eraseBeforeBlock();

    // 블럭이 가장 아래가 아닐 때 동안
    while (!block.isBottom(x, y + 1)) {
        y = y + 1; // 아래로 이동
    }

    // 가장 아래일 때 그리기
    block.drawBlock(x, y);

    // 블럭 위치 배열에 저장
    setBlockInGameScreen(block);

    // 지울 수 있는 줄 있는지 체크 & 삭제
    checkRowsAndErase(
        y,
        Math.min(GAME_SCREEN_HEIGHT_NUM - 1, y + SMALL_BLOCK_NUM - 1)
    );

    // 새로운 블럭 생성
    drawNewBlock();
};

디자인은 언제쯤 하려나

---

깃허브
create a gap between blocks
developed to move the block to the bottom when the space bar is pressed.