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

완성된 슈팅 게임 화면을 다시 확인하고, 플레이어 우주선, 총알, 적, 점수, 목숨, 게임오버가 어떤 순서로 만들어지는지 살펴봅니다. 이번 장에서 만들 기능의 전체 흐름을 이해합니다.

슈팅 게임이 그려질 캔버스 화면을 만들고, 브라우저에서 게임 무대가 제대로 보이는지 확인합니다. 앞으로 우주선과 적, 총알이 올라갈 기본 화면을 준비합니다.

캔버스 아래쪽 가운데에 플레이어 우주선을 배치하고, 게임의 주인공이 화면에 잘 보이도록 만듭니다. 아직 움직이지는 않지만, 우주선의 크기와 시작 위치를 확인하며 기본 구성을 완성합니다.

방향키를 눌렀을 때 우주선이 왼쪽과 오른쪽으로 움직이게 만듭니다. 우주선이 화면 밖으로 나가지 않도록 제한을 두고, 플레이어가 자유롭게 조작할 수 있는 기본 기능을 완성합니다.

스페이스바를 누르면 총알이 위로 발사되고 계속 올라가도록 만듭니다. 화면 밖으로 나간 총알은 자연스럽게 사라지도록 연결해 슈팅 게임의 핵심 액션을 시작합니다.

화면 위쪽에 적이 나타나도록 만들고, 여러 적을 관리할 수 있는 구조를 준비합니다. 플레이어가 맞혀야 할 목표물이 생기면서 게임다운 화면이 완성됩니다.

발사한 총알이 적에 닿으면 적이 사라지고 점수가 올라가도록 만듭니다. 적을 맞힐 때마다 게임이 진행되고, 점수판이 함께 바뀌는지 확인합니다.

적이 아래 방향으로 움직이고, 일정 시간이 지나면 새로운 적 무리가 계속 나타나도록 만듭니다. 게임이 한 번으로 끝나지 않고 계속 이어지는 플레이 흐름을 완성합니다.

적이 플레이어와 충돌하거나 화면 아래까지 내려오면 목숨이 줄어들도록 만듭니다. 화면에 남은 목숨을 표시해 플레이어가 현재 상태를 한눈에 알 수 있게 합니다.

적을 맞혔을 때나 플레이어가 피격됐을 때 폭발 효과와 사운드를 추가합니다. 게임 화면이 더 생동감 있게 느껴지고, 플레이하는 재미가 높아지는지 확인합니다.

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