이번에 고른 게임은 전설의 게임, 테트리스다. 안 해본 사람을 찾기가 더 어려울 만큼 익숙한 게임이다. 블록을 돌리고 쌓아 한 줄을 없애는 그 게임을, 이번에는 직접 만들어 보기로 했다.
앞서 만든 벽돌깨기는 공을 쫓아 막대를 움직였다면, 이번에는 내려오는 블록을 어디에 둘지 골라야 한다. 조작은 몇 개 없는데 판을 보는 방식은 꽤 다르다. 바이브코딩으로 만들었을 때 그 익숙한 규칙이 화면에서 어떻게 돌아갈지 궁금했다. 이번에도 Sonnet을 썼다.
내가 만든 버전의 이름은 ‘블록 한 줄’로 붙였다. 테트리스의 로고나 화면을 옮겨 오는 대신, 밝은 바탕과 새로 그린 블록으로 구성했다. 설치 없이 PC에서 HTML 파일 하나를 열어 실행하는 방식은 앞선 게임들과 같다.
처음 요청할 때부터 착지할 자리를 보여 달라고 했다. 블록을 옆으로 보냈을 때 어디까지 떨어질지 눈으로 확인하고 싶었기 때문이다. 다음에 나올 블록도 세 개까지 볼 수 있게 했다. 왼쪽에는 판만 두고, 점수와 조작 버튼은 오른쪽에 모았다.
첫 블록은 초록색 S 모양이었다. 왼쪽으로 보내 놓고, 파란 J 모양은 가운데, 주황색 네모는 오른쪽에 두었다. 세 개를 놓았을 뿐인데 바닥이 벌써 울퉁불퉁해졌다. 맨 아래 줄만 보고 놓으면 될 줄 알았는데, 블록이 서로 걸쳐 쌓이면서 그 위의 빈칸까지 같이 봐야 했다.
여기서는 속도를 겨루지 않았다. P로 잠깐 멈춰 판을 보고, 다시 이어서 블록을 옮겼다. 낙하 속도도 점점 빨라지게 하지 않고 일정하게 두었다. 우선 내가 고른 자리에 블록이 놓이고, 채운 줄이 제대로 없어지는 것부터 보고 싶었다.
노란 L 모양을 오른쪽에 놓고 보라색 T 모양을 돌려 가운데에 끼웠다. 그러자 아래에서 두 번째 줄이 거의 찼다. 왼쪽 끝 한 칸만 채우면 되는 모양이었다. 다음 붉은 Z 블록을 세워 왼쪽으로 보내니, 윤곽선의 맨 아래 칸이 그 자리에 들어갔다.
이 상태에서 Space를 눌렀다. 블록이 윤곽선 자리로 내려가고, 가득 찬 줄 하나가 사라졌다. 오른쪽 숫자는 0점에서 100점으로, 지운 줄은 0에서 1로 바뀌었다. 맨 아래에는 여전히 빈칸이 남아 있다. 바닥부터 순서대로 없애야 하는 게 아니라, 중간 줄도 열 칸만 채우면 지워진다는 걸 화면으로 확인한 순간이다.
한 줄을 지우고 나니 다음 블록이 긴 막대였다. 하지만 맨 아래에 남은 구멍을 곧바로 다 메울 수 있는 모양은 아니다. 지금 블록이 들어가는 자리만 보는 것과, 다음 블록까지 생각하며 쌓는 것은 다르다. 옆에 띄워 둔 세 개의 미리보기를 다시 보게 된다.
줄을 지운 뒤 위의 블록이 내려오는 순서와 점수 계산은 코드에서도 따로 확인했다. 한 번에 한 줄이면 100점, 두 줄은 300점, 세 줄은 500점, 네 줄은 800점이다. 네 줄 동시 삭제는 별도 테스트로 확인했고, 위 플레이에서 직접 지운 것은 한 줄이다.
회전은 벽에 걸릴 때 조금 옆으로 비켜 주는 정도로 만들었다. 익숙한 테트리스의 모든 회전 규칙이나 기술을 재현한 버전은 아니다. 블록을 잠시 보관하는 기능도 아직 없다. 지금은 방향키로 위치와 방향을 고르고, 윤곽선을 본 다음 Space로 내려놓는 흐름에 맞췄다.
이번 캡처의 기록은 100점이다. 능숙하게 연달아 줄을 지우는 장면은 아니지만, 어디에 놓을지 보고 돌린 블록 하나가 실제로 줄을 없애는 데까지 왔다. 다음 판에서는 중간 줄을 기다리기 전에 바닥의 빈칸부터 덜 만들고 싶다.
직접 실행해 보기 · 블록 한 줄 소스와 실행 파일에서 falling-blocks.html을 내려받아 PC 브라우저로 열면 된다. 외부 이미지나 라이브러리를 불러오지 않는 HTML5 게임이다.
시작 버튼을 누른 뒤 ←·→로 이동하고 ↑ 또는 X로 회전한다. ↓는 빠르게 내리기, Space는 바로 내려놓기다. P로 멈추거나 이어 하고, R은 판과 점수를 초기화한다. 화면 버튼으로도 조작할 수 있다.