[테트리스] 17. 캔버스 테두리 추가

오늘의 이슈. 간단한 건

---

// canvas.js

    var ctx = canvas.getContext("2d");
    // add
    ctx.lineWidth = 2;
    ctx.strokeStyle="black";
    ctx.strokeRect(0, 0, canvas.width, canvas.height);

    var ctxNextBlock = canvasNextBlock.getContext("2d");
    // add
    ctxNextBlock.lineWidth = 2;
    ctxNextBlock.strokeStyle="black";
    ctxNextBlock.strokeRect(0, 0, canvasNextBlock.width, canvasNextBlock.height);

    var ctxKeepBlock = canvasKeepBlock.getContext("2d");
    // add
    ctxKeepBlock.lineWidth = 2;
    ctxKeepBlock.strokeStyle="black";
    ctxKeepBlock.strokeRect(0, 0, canvasKeepBlock.width, canvasKeepBlock.height);

line, strokeStyle, strokeRect 코드 추가

// gameAlgorithm.js

ctxNextBlock.fillRect(
   // SMALL_BLOCK_SIZE 만큼 왼쪽을 비워줌
   SMALL_BLOCK_SIZE + j * SMALL_BLOCK_SIZE + x + BLOCK_GAP, 
   i * SMALL_BLOCK_SIZE + y + BLOCK_GAP,
   SMALL_BLOCK_SIZE - BLOCK_GAP,
   SMALL_BLOCK_SIZE - BLOCK_GAP
)

그리고 기존에는 다음에 나올 캔버스, keep중인 캔버스 블럭을 왼쪽에 딱 맞게 그리고 있어서 왼쪽을 블럭 작은 크기만큼 비워줬다.

 

실행결과

아 블럭 위치가 좀 불편한데 일단 스킵..

 

---

소스코드 : add canvas boundary