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

완성된 블록 격파 게임 화면을 다시 확인하고, 공, 패들, 블록, 점수, 목숨, 게임오버가 어떤 순서로 만들어지는지 살펴봅니다. 이번 장에서 만들 기능의 전체 흐름을 이해합니다.

블록 격파 게임이 그려질 캔버스 화면을 만들고, 브라우저에서 게임 무대가 제대로 보이는지 확인합니다. 앞으로 공과 패들, 블록이 올라갈 기본 화면을 준비합니다.

캔버스 위에 공과 패들을 먼저 배치하고, 게임의 기본 요소가 화면에 보이도록 만듭니다. 아직 움직이지는 않지만, 공과 패들의 크기와 위치를 확인하며 기본 구성을 완성합니다.

방향키로 패들을 왼쪽과 오른쪽으로 움직이게 만듭니다. 패들이 화면 밖으로 나가지 않도록 제한을 두고, 플레이어가 공을 받을 준비를 할 수 있게 만듭니다.

공이 자동으로 움직이기 시작하고, 패들은 계속 조작할 수 있도록 만듭니다. 게임이 멈춰 있는 화면이 아니라 실제로 플레이가 시작되는 흐름을 확인합니다.

공이 왼쪽, 오른쪽, 위쪽 벽에 닿으면 방향을 바꿔 다시 튕겨 나오도록 만듭니다. 공이 화면 안에서 계속 움직이며 블록 격파 게임다운 느낌이 살아나는지 확인합니다.

공이 패들에 닿았을 때 아래로 떨어지지 않고 다시 위로 튕겨 올라가도록 만듭니다. 이제 플레이어가 패들을 움직여 공의 흐름을 이어 갈 수 있는 핵심 조작이 완성됩니다.

화면 위쪽에 여러 줄의 블록을 배열해 블록 격파 게임의 목표물을 만듭니다. 블록이 일정한 간격으로 잘 배치되고, 다양한 색이나 이미지가 자연스럽게 보이는지 확인합니다.

공이 블록에 닿으면 해당 블록이 사라지고 점수가 올라가도록 만듭니다. 블록을 깰 때마다 게임이 진행되고, 점수판이 함께 바뀌는지 확인합니다.

공을 놓쳐 바닥으로 떨어트리면 목숨이 줄어들고, 공과 패들이 다시 시작 위치로 돌아오게 만듭니다. 한 번 실수해도 바로 끝나지 않고 다시 도전할 수 있는 게임 구조를 완성합니다.

목숨이 모두 사라지면 게임오버 화면이 나타나고, 다시 시작 버튼으로 처음부터 플레이할 수 있게 만듭니다. 점수와 목숨, 블록 상태가 함께 초기화되는지 확인합니다.