퐁 도감에 이은 두 번째 프롬프트 도감
퐁을 만들고 나서 배운 걸 표로 정리해뒀더니, 이게 은근히 요긴하더라고. 벽돌깨기를 만들 때 실제로 참고를 했어. 그래서 이번에도 게임이 만들어지고 남겨뒀지.
이번 표의 관점은 하나야. 퐁 게임과 뭐가 달라졌나. 캔버스, 게임 루프, 키 입력, 충돌 같은 틀은 퐁에서 그대로 가져왔으니까, 그 위에 새로 얹은 것만 추리면 그게 곧 이번에 배운 목록이 되는 거지.
퐁에는 없었고 벽돌깨기에서 처음 만난 것들 — 배열부터 델타 타임까지
| 개념 | 퐁에서는 | 벽돌깨기에서는 |
|---|---|---|
| 배열로 여러 개 다루기 | 공 1개, 패들 2개 — 변수 몇 개면 충분 | 벽돌 50개를 배열 하나에 담아서 push(만들기) → forEach(그리기) → splice(깨지면 빼기) |
| 이중 for문 | 안 씀 | 바깥 for문은 줄(5줄), 안쪽 for문은 그 줄의 벽돌(10개) — 반복문 두 개로 격자 배치 |
| 충돌 "방향" 판정 | 좌우로만 튕기면 됨 | 벽돌의 옆면에 맞았는지 윗면에 맞았는지를 가로/세로 겹친 폭 비교로 구분 |
| 목숨 시스템 | 없음 (점수만) | lives 변수 하나 + "♥".repeat(lives)로 하트 표시, 0이 되면 게임오버 |
| 종료 상태 2종류 | 승리 하나 | 클리어(벽돌이 다 떨어짐)와 게임오버(목숨이 다 떨어짐)를 따로 관리 |
| 줄별 차등 점수 | 없음 | 줄 번호 하나로 색과 점수를 같이 결정 — 위쪽 줄일수록 비싸다 |
| 델타 타임 | 처음엔 60fps 가정 (나중에 같이 고침) | 불린 횟수가 아니라 실제로 흐른 시간만큼 움직여서, 어떤 모니터에서든 같은 속도 |
마지막 줄의 델타 타임이 뭔지 궁금하면 2.4배속 에러노트에 전말을 적어뒀어. 파이썬 배울 때 스치듯 지나갔던 리스트가 JS에서는 배열이라는 이름으로 실전에 투입된 것도 이번이 처음이야.
퐁 도감에 두 줄 추가
퐁 도감의 두 번째 표가 "이렇게 요청하면 더 좋다" 모음이었잖아. 벽돌깨기를 거치면서 거기 보탤 줄이 두 개 생겼어. 물론 요즘은 ai에 직접 프롬프트를 요청하기도 하지만 아직은 직접 해보는 연습을 하고 있다고 보면 돼.
| 하고 싶은 것 | 이렇게 요청하면 더 좋다 | 왜 |
|---|---|---|
| 게임이 완성된 것 같을 때 | "이 코드에서 앞으로 발생할 수 있는 에러를 미리 예상해서 표로 정리해줘" | 버그는 터진 뒤에 고치면 늦다. 예상 목록에 진짜가 섞여 있을 수 있음 (실제로 5개 중 1개가 실존 버그였음) |
| 게임 속도가 컴퓨터마다 다르면 안 될 때 | "어떤 모니터(60Hz든 144Hz든)에서도 같은 속도로 돌게 델타 타임으로 짜줘" | 브라우저는 모니터 주사율만큼 게임을 불러줘서, 60fps를 가정하면 게이밍 모니터에서 2배속이 됨 |
오늘의 결론
두 번째 게임을 만들고 알게 된 건 이거야. 두 번째는 처음부터 다시 배우는 게 아니라, 아는 틀 위에 새 것 몇 개를 얹는 거라는 것. 그러니 이 도감도 점점 얇아질 줄 알았는데, 웬걸, 얹은 목록만 일곱 줄이네. 세 번째 게임의 도감은 몇 줄이 나올지 두고 봐야겠어.
