HTML Canvas로 테트리스 게임 만들기

HTML5 Canvas로 테트리스 게임 만들기

이 글에서는 JavaScript와 Canvas를 활용하여 테트리스 게임을 구현하는 방법을 설명합니다. 블록 이동, 회전, 충돌 판정, 점수 계산 등 게임의 핵심 로직을 직접 구현할 수 있습니다.

아래 게임을 직접 실행해보면서 동작 원리를 확인해보세요.

Score

0

Level

1

Lines

0

↑ Rotate

← → Move

↓ Soft Drop

Space Hard Drop

GAME OVER

Next Piece

핵심 로직

1. createMatrix()
게임판 배열을 생성하는 함수입니다.
테트리스 게임판은 10칸 × 20줄 구조이며, 각 칸은 0 또는 블록 번호를 저장합니다.
0은 빈 칸을 의미하고, 1~7은 서로 다른 테트리스 블록 색상을 의미합니다.

 

2. drawBoard()
canvas 위에 현재 게임판을 다시 그리는 함수입니다.
먼저 기존 화면을 지우고, 격자선을 그린 다음, 고정된 블록과 현재 떨어지고 있는 블록을 함께 출력합니다.

 

3. collide()
현재 블록이 벽, 바닥, 기존 블록과 충돌했는지 확인합니다.
블록이 이동하거나 회전할 때마다 이 함수를 사용하여 가능한 움직임인지 검사합니다.

 

4. merge()
떨어지던 블록이 더 이상 내려갈 수 없을 때, 해당 블록을 게임판 배열에 고정합니다.
이후 새로운 블록이 생성됩니다.

 

5. sweep()
가로 한 줄이 모두 채워졌는지 검사하고, 채워진 줄을 제거합니다.
줄이 제거되면 점수가 올라가고, 일정 줄 수 이상이 되면 레벨이 증가합니다.

 

6. update()
게임 루프를 담당하는 함수입니다.
requestAnimationFrame()을 이용해 화면을 계속 갱신하고, 일정 시간이 지나면 블록이 자동으로 한 칸씩 내려가도록 처리합니다.

 

테트리스 구현 핵심 정리

테트리스는 2차원 배열을 활용하여 블록의 위치를 관리하며, 충돌 감지와 회전 알고리즘을 통해 동작합니다.

이러한 구조를 이해하면 다양한 게임이나 인터랙티브 웹 기능으로 확장할 수 있습니다.