클로드코드로 벽돌깨기 만들기 - 자바스크립트 배열·델타 타임과 요청문 두 줄

두 번째 게임에서 새로 배운 것만 추렸어

퐁을 만들고 나서 배운 걸 표로 정리해뒀더니, 이게 은근히 요긴하더라고. 벽돌깨기를 만들 때 실제로 참고를 했어. 그래서 이번에도 게임이 만들어지고 남겨뒀지.

이번 표의 관점은 하나야. 퐁 게임과 뭐가 달라졌나. 캔버스, 게임 루프, 키 입력, 충돌 같은 틀은 퐁에서 그대로 가져왔으니까 그 위에 새로 얹은 것만 추리면 그게 곧 이번에 배운 목록이 되는 거지.

퐁에 없고 벽돌깨기에 있는 것 일곱 가지

배열 한 줄이 판을 바꿨어

일곱 줄 중에 첫 줄이 제일 컸어. 벽돌이 쉰 개라길래 나는 벽돌 쉰 개를 하나씩 만드는 줄 알았거든. 그렇게 짜면 코드가 어떻게 되냐고 물어보니까 답이 간단하더라고. 이름이 쉰 개 필요하고, 하나 깨질 때마다 그 이름을 찾아 지워야 한다는 거야.

배열은 그걸 목록 하나로 바꿔. 만들 땐 목록에 밀어 넣고, 그릴 땐 목록을 처음부터 끝까지 훑고, 깨지면 목록에서 빼. 벽돌이 쉰 개든 백 개든 코드는 그대로고 숫자만 달라지는 거지.

파이썬 배울 때 스치듯 지나갔던 리스트가 자바스크립트에선 배열이라는 이름으로 다시 나왔어. 그때는 그게 왜 필요한지 몰랐는데 벽돌 쉰 개 앞에 서니까 알겠더라고.

델타 타임은 에러노트에서 건진 줄이야

마지막 줄의 델타 타임은 이 게임을 만들다 얻어걸린 게 아니야. 완성한 줄 알았던 게임이 게이밍 모니터에서 2.4배속으로 돌고 있었거든.

브라우저가 게임을 불러주는 횟수가 모니터마다 다르대. 60Hz면 1초에 예순 번이고 144Hz면 백마흔네 번이야. 그런데 코드가 "불릴 때마다 5픽셀"로 짜여 있으면 빠른 모니터에서 두 배 넘게 빨라지는 거지.

델타 타임은 "불린 횟수"가 아니라 "실제로 흐른 시간"만큼 움직이게 하는 방법이야. 전말은 2.4배속 에러노트에 적어뒀어.

요청문 표에 두 줄이 붙었어

퐁 도감의 두 번째 표가 "이렇게 요청하면 더 좋다" 모음이었잖아. 벽돌깨기를 거치면서 거기 보탤 줄이 두 개 생겼어. 물론 요즘은 AI에 직접 프롬프트를 요청하기도 하지만 아직은 직접 해보는 연습을 하고 있다고 보면 돼.

윗줄은 순서를 바꾸는 요청이야. 다 만들고 나서 "버그 있어?"라고 묻는 게 아니라, 다 만든 것 같을 때 "앞으로 뭐가 터질 것 같아?"라고 묻는 거지. 실제로 다섯 개를 받았고 그중 하나가 진짜였어.

두 번째 게임은 얹기만 하면 되더라

두 번째 게임을 만들고 알게 된 건 이거야. 두 번째는 처음부터 다시 배우는 게 아니라 아는 틀 위에 새 것 몇 개를 얹는 거라는 거야.

그러니 이 도감도 점점 얇아질 줄 알았는데 웬걸, 얹은 목록만 일곱 줄이네. 세 번째 게임의 도감은 몇 줄이 나올지 두고 봐야겠어.