[테트리스] 2. 벽면 경계 처리, 0.5초간격 떨어지는 블럭

2018. 7. 24.

---

// 캔버스 경계 구하기
var canvas = document.getElementById('game');

const WIDTH = canvas.clientWidth;
const HEIGHT = canvas.clientHeight;
const CANVAS_LEFT = canvas.clientLeft;
const CANVAS_RIGHT = canvas.clientLeft + WIDTH;
const CANVAS_TOP = canvas.clientTop;
const CANVAS_BOTTOM = canvas.clientTop + HEIGHT;

// 5초 간격으로 아래로 움직이는 블럭
setInterval(function(){
    nowBlock.drawBlock(nowBlock.x, nowBlock.y+SPEED);
}, 500);

// 블럭이 캔버스 경계 벗어났을 때 예외처리
if(nx < CANVAS_LEFT || nx + this.width> CANVAS_RIGHT) nx = this.x;
// 블럭이 바닥에 닿았을 때
if(ny + this.height > CANVAS_BOTTOM) { 
        ny = this.y;
        drawNewBlock(2); // 새로운 블럭 생성
}

블럭이 왼쪽, 오른쪽 캔버스 경계 벗어나지 않게 수정.
블럭이 바닥에 닿으면 이때까지 움직인 블럭은 더이상 움직이지 않고 새로운 블럭 생성하여 움직임.
아직 블럭 간 경계 처리는 되지 않음.

---

깃허브 : Down per .5 seconds, Boundary processing, make new block when nowBlock