Cursor와 VS Code, Go Live 환경을 준비하고 강의 자료 다운로드 방법을 확인합니다. 앞으로 만들 HTML, CSS, JavaScript 파일이 어떻게 실행되는지 확인합니다.

완성된 테트리스 게임 화면을 다시 확인하고, 게임판, 블록 이동, 회전, 자동 하강, 줄 삭제, 점수, 게임오버가 어떤 순서로 완성되는지 살펴봅니다.

테트리스 블록이 쌓일 10열 x 20행 게임판을 만듭니다. 배경과 보드 프레임을 적용해 브라우저에서 테트리스의 기본 무대가 제대로 보이는지 확인합니다.

게임판 위에 테트리스 블록 하나를 표시합니다. 아직 움직이지는 않지만, 블록 모양과 시작 위치가 화면에 제대로 나타나는지 확인합니다.

키보드 방향키로 블록을 왼쪽과 오른쪽으로 움직이게 만듭니다. 블록이 게임판 밖으로 나가지 않도록 이동 범위도 함께 확인합니다.

위 방향키나 스페이스 키를 눌렀을 때 블록이 회전하도록 만듭니다. 회전한 블록이 벽이나 다른 위치와 겹치지 않도록 기본 규칙을 추가합니다.

블록이 일정한 시간마다 아래로 한 칸씩 내려오게 만듭니다. 아래 방향키를 누르면 더 빠르게 내려가도록 만들어 테트리스의 기본 플레이 흐름을 완성합니다.

블록이 바닥에 닿거나 더 이상 내려갈 수 없을 때 보드에 고정되도록 만듭니다. 고정된 뒤에는 새로운 블록이 위에서 다시 나타나도록 연결합니다.

가로 한 줄이 블록으로 가득 차면 해당 줄이 사라지도록 만듭니다. 줄이 삭제될 때 점수가 올라가고, 위에 있던 블록들이 아래로 내려오는지 확인합니다.

현재 블록 다음에 나올 블록을 미리 보여주는 패널을 만듭니다. 플레이어가 다음 상황을 예상할 수 있도록 테트리스 게임의 완성도를 높입니다.

새 블록이 더 이상 시작 위치에 들어갈 수 없으면 게임오버가 되도록 만듭니다. 게임오버 화면과 재시작 버튼을 추가해 다시 처음부터 플레이할 수 있게 만듭니다.

지금까지 만든 게임판, 블록 이동, 회전, 자동 하강, 고정, 줄 삭제, 점수, 다음 블록, 게임오버 기능을 하나로 정리합니다. PC와 모바일에서 안정적으로 실행되는 최종 테트리스 게임으로 완성합니다.

테트리스 게임을 만들기 전에 화면, 블록, 입력, 충돌 개념을 정리합니다.