안녕하세요 느종입니다.
횡스크롤 게임 만들기도 거의 막바지에 다다르고 있습니다. 마지막까지 힘내서 코드를 작성해 보도록 하겠습니다. 함께 공부해요!
1. 결과 화면 페이지
결과 화면의 모습입니다.
게임 오버 문구와 점수를 표시해 주고, 다시 시작하기 버튼을 눌렀을 경우 게임이 다시 실행이 되도록 구성하였습니다.
2. 자바스크립트 코드
1. startFunc() : 시작하기 버튼을 눌렀을 때 실행되는 함수입니다.
2. if(state === GAME_STATE.PLAY) return : 혹시라도 게임 상태가 play라면 함수 밖으로 나갑니다.
3. initFunc() : 게임을 시작할 때 모든 변수들을 초기화시켜 주는 함수입니다.
4. state = GAME_STATE.PLAY : 게임이 시작되었기 때문에 게임 상태를 play로 바꿔 줍니다.
5. startPage.classList.add("hidden") : 시작 화면을 숨겨줍니다.
6. endPage.classList.add("hidden") : 끝 화면도 숨겨줍니다.
7. gameLoop = requestAnimationFrame(loop) : requestAnimationFrame을 활용하여 게임 시작 시 캔버스에 프레임마다 그림을 그리도록 합니다.
8. endFunc() : 게임 종료 시 실행될 함수입니다.
9. state = GAME_STATE.END : 게임이 종료되었으므로 게임 상태를 end로 바꾸어 줍니다.
10. totalScoreBoard.textContent = "점수 : " + score : 끝 화면에서 점수를 표시합니다.
11. endPage.classList.remove("hidden") : 끝 화면에 추가했던 hidden 클래스를 삭제함으로써 끝 화면이 보이도록 합니다.
12. cancelAnimationFrame(gameLoop) : 게임이 종료되었으므로 프레임마다 반복되는 메서드도 종료되도록 합니다.
13. initFunc() : 앞서 얘기했듯이 게임을 시작할 때 모든 변수를 초기화해 주는 함수입니다.
14. state = GAME_STATE.START : 게임 상태는 start로 바꾸어 줍니다.
15. gameLoop = 0 : requestAnimationFrame이 들어갈 변수도 0으로 초기화해 줍니다.
16. score = 0 : 점수도 0으로 초기화해 줍니다.
17. isJumping = false : 점프 중인지를 체크하는 변수도 false로 초기화해 줍니다.
18. isJumpKeyDown = false : 점프키를 눌렀는지 체크하는 변수도 false로 초기화해 줍니다.
19. playerVY = 0 : 플레이어의 Y축에 대한 속력도 초기화해 줍니다.
20. obstacles = [] : 장애물에 대한 배열도 초기화해 줍니다.
21. randomObstacleHeight = 0 : 임의적인 장애물의 높이를 구하는 변수도 초기화해 줍니다.
22. intervalSpawn = 0 : 장애물과 장애물 사이의 시간 간격을 계산할 변수도 초기화해 줍니다.
23. firstOb = "first" : 첫 번째 장애물인지 아닌지를 체크하는 변수도 fisrt로 초기화해 줍니다.
24. spwanTime = 0 : 장애물이 등장하는 시간을 구하는 변수도 초기화해 줍니다.
25. hud.textContent = "점수 : 0" : 마지막으로 점수를 표시하는 hud도 초기화해 줍니다.
26. jump() : 사용자가 스페이스바를 눌렀을 때 플레이어가 점프를 할 때 실행되는 함수입니다.
27. if(state !== GAME_STATE.PLAY) return : 게임 상태가 play가 아니라면 함수 밖으로 나갑니다.
28. if(isJumping) return : 플레이어가 점프 중이라면 함수 밖으로 나갑니다. 이중 점프를 방지하기 위해서 추가하였습니다.
29. if(player.y >= GROUND_Y_COORDINATE - player.h - 0.01) { : 플레이어가 지표면에 위치해 있을 때만 점프가 가능하도록 if문을 작성하였습니다.
30. playerVY = -JUMP_VELOCITY : 캔버스에서는 y좌표는 아래로 갈수록 커지기 때문에 플레이어가 위로 점프를 하기 위해서는 플레이어의 Y축 속도에 음수값을 주어야 합니다.
31. isJumping = true : 점프 중인 상태에서 이중 점프를 막기 위해서 추가하였습니다.
32. collisionFunc(px, py, pw, ph, ox, oy, ow, oh) : 플레이어와 장애물이 충돌하는지 체크하는 함수입니다.
33. let chk = true : 충돌하는지 안 하는지 리턴할 변수
34. if(px + pw < ox || px > ox + ow || py + ph < oy || py > oy + oh) { : 장애물 기준 위, 아래, 좌, 우 영역에서 플레이어와 겹칠 때 충돌로 처리합니다. 플레이어가 장애물 왼쪽에 있는 경우, 플레이어가 장애물의 오른쪽에 있는 경우, 플레이어가 장애물의 위에 있는 경우, 플레이어가 장애물의 아래에 있는 경우 이 4가지 조건에 거짓일 때 충돌이 발생합니다.
35. chk = false : 충돌하지 않았을 경우에는 변수에 false를 넣어 줍니다.
36. return chk : 충돌하는지 안 하는지에 대한 변숫값을 리턴해줍니다.
37. randomFunc(max, min) : 최댓값과 최솟값을 입력하면 그 사이의 임의적인 수를 리턴해주는 함수입니다.
38. return Math.floor(Math.random() * (max - min + 1) + min) : Math.random() 메서드를 사용하여 임의적인 수를 계산합니다.
39. startBtn.addEventListener('click', startFunc) : 시작하기 버튼에 클릭 리스너를 추가합니다.
40. reStartBtn.addEventListener('click', startFunc) : 다시 시작하기 버튼에 클릭 리스너를 추가합니다.
41. async function init() : 스크립트를 시작하고 이미지 렌더링을 초기화하는 함수입니다.
42. await loadAssetsFunc().catch(err=>console.error('이미지 로드 실패', err)) : loadAssetsFunc() 함수를 이용하여 이미지를 로드하는데, 실패할 경우 error 메시지를 출력하도록 하였습니다.
43. main() : 게임이 시작되었을 때 처음으로 실행되는 함수입니다.
횡스크롤 게임의 모든 기능에 대한 코드 작성을 완료 하였습니다. 처음에 저희가 설계한 대로 하나씩 기능을 만들다 보니 금방 완성이 된 것 같습니다. 그럼 다음 시간에는 또 다른 콘텐츠로 포스팅을 작성하도록 하겠습니다.