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

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

뱀이 움직일 격자형 게임판을 화면에 만듭니다. 게임판 크기와 칸 간격을 정하고, 브라우저에서 뱀 게임의 기본 무대가 제대로 보이는지 확인합니다.

게임판 위에 뱀의 시작 위치를 한 칸으로 표시합니다. 아직 움직이지는 않지만, 뱀이 어디에서 출발하는지 화면에서 확인합니다.

키보드 방향키를 눌렀을 때 뱀이 이동할 방향을 바꿀 수 있게 만듭니다. 위, 아래, 왼쪽, 오른쪽 입력이 게임 안에서 어떻게 연결되는지 확인합니다.

방향을 정하면 뱀이 일정한 속도로 앞으로 움직이게 만듭니다. 사용자가 계속 키를 누르지 않아도 뱀이 스스로 이동하는 기본 게임 흐름을 완성합니다.

게임판 안에 뱀이 먹을 먹이를 표시합니다. 먹이가 화면의 한 칸에 나타나도록 만들고, 뱀이 먹이를 향해 움직일 수 있는 구조를 준비합니다.

뱀이 먹이에 닿으면 점수가 1점씩 올라가게 만듭니다. 먹이를 먹은 뒤 새로운 먹이가 다시 나타나는지 확인하면서 게임의 목표를 완성합니다.

먹이를 먹을 때마다 뱀의 몸이 한 칸씩 길어지도록 만듭니다. 점수만 오르는 게임이 아니라, 뱀이 점점 길어지는 진짜 뱀 게임 규칙을 추가합니다.

뱀이 게임판 밖으로 나가면 게임이 끝나도록 만듭니다. 벽에 부딪혔을 때 게임오버 화면이 나오고, 더 이상 게임이 진행되지 않는지 확인합니다.

뱀이 길어진 뒤 자기 몸에 부딪히면 게임이 끝나도록 만듭니다. 단순히 먹이를 먹는 게임에서 벗어나, 조심해서 움직여야 하는 뱀 게임의 핵심 규칙을 완성합니다.