[테트리스] 11. 블럭 저장, 불러오기

오늘할 이슈.

테트리스 시 블럭을 keep해두고 keep해둔 블럭을 load해서 사용하는 것까지 구현했다.

---

#1. 이미 불러온 블럭인 경우 -> 아무 행동하지 않고 종료

#2. keep해놓은 블럭이 있는 경우 -> 현재 블록 타입을 keep, keep해뒀던 타입으로 새로운 블럭 생성 후 위에서 부터 다시 떨굼.

#3. keep해놓은 블럭이 없는 경우 -> 현재 블록 타입을 keep, 다음에 나올 예정이었던 타입의 블럭을 생성.

 

수도코드를 간단히 적어보자면 위와 같다.

const keepOrLoadBlock = function() {
    // #1
    if(nowBlock.isLoaded) return false;

    nowBlock.eraseBeforeBlock();
    const willKeepType = nowBlock.type;
    // #2
    if(keepBlockType) {
        nowBlock = new Block(keepBlockType, BEGIN_X, BEGIN_Y);
        nowBlock.isLoaded = true;
    }
    else { // #3
        nowBlock = new Block(nextBlockType, BEGIN_X, BEGIN_Y);
        setNextRandomBlockType();
    }

    nowBlock.drawDown(BEGIN_X, BEGIN_Y);
    keepBlockType = willKeepType;
    if (nowBlock.isBottom(BEGIN_X, BEGIN_Y)) {
        gameEnd();
    }
    drawNextBlock();

    return true;
}

개발하면서 blockType이 List<객체>형태로 되어 있었는데 객체의 name으로 객체를 찾아가야하는 요구사항도 추가되어서 List<객체> -> Map<name, 객체> 형태로 변경했다.

const PC_BUTTON = {
    LEFT: 37,
    UP: 38,
    RIGHT: 39,
    DOWN: 40,
    SPACEBAR: 32,
    CTRL: 17 // add
}

// add
const keepOrLoadBlockKey = function() {
    keepOrLoadBlock();
};

$(document).keydown(function(e) {
    switch (e.keyCode) {
        // ...
        // add
        case keyCode.CTRL:
            keepOrLoadBlockKey();
            break;
        default:
            break;
    }
});

ctrl을 누르는 경우 현재 블럭 저장과 불러오기를 구현했다.

 

var canvasKeepBlock = document.getElementById("keepBlock");

if (canvas.getContext) {
    // ...
    // add
    var ctxKeepBlock = canvasKeepBlock.getContext("2d");
    canvasKeepBlock.width = BIG_BLOCK_SIZE;
    canvasKeepBlock.height = BIG_BLOCK_SIZE;
}

// 
var drawKeepBlock = function() {
    var keepBlock = keepBlockType;
    if(!keepBlock) return;

    var x = 0;
    var y = 0;
    for (var i = 0; i < SMALL_BLOCK_NUM; i++) {
        for (var j = 0; j < SMALL_BLOCK_NUM; j++) {
            if (keepBlock.shape[0][i][j] == 1) {
                ctxKeepBlock.fillStyle = keepBlock.color;
            } else {
                ctxKeepBlock.fillStyle = "white";
            }
            ctxKeepBlock.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해둔 블럭을 그려주게 했다.

---

실행화면

---

깃허브

Closed #4 - add keep & load block

Closed #4 - add keepBlock canvas