안녕하세요 느종입니다.
저번 시간에 이어서 횡스크롤 게임 자바스크립트 코드를 작성해 보도록 하겠습니다. 함께 공부해요!
1. 자바스크립트 코드
1. BACKGROUND_SPEED : 배경 화면이 움직이는 속도 변수입니다.
2. GROUND_Y_COORDINATE : 캔버스에서 지면(땅)을 나타내는 Y 좌표 변수입니다.
3. PLAYER_X_COORDINATE : 플레이어의 고정 X 좌표 변수입니다.
4. PLAYER_Y_COORDINATE : 플레이어의 고정 Y 좌표 변수입니다.
5. PLAYER_WIDTH : 플레이어의 가로 크기 변수입니다.
6. PLAYER_HEIGHT : 플레이어의 세로 크기 변수입니다.
7. GRAVITY : 플레이어가 점프를 했다가 다시 내려와야 되므로 계산에 필요한 중력 변수입니다.
8. JUMP_VELOCITY : 플레이어의 점프 속력을 나타내는 변수입니다.
9. JUMP_CUTOFF : 스페이스바를 눌러서 플레이어가 점프를 하게 되는데 스페이스바의 누름의 정도에 따라서 점프의 높이를 다르게 하기 위한 변수입니다.
10. OBSTACLE_WIDTH : 장애물의 가로 크기 변수입니다. 세로 크기는 임의로 매번 바뀌지만 가로 크기는 고정으로 하였습니다. 가로 크기도 임의로 바꾸셔도 무방합니다.
11. MIN_OBSTACLE_HEIGHT : 장애물의 최소 세로 크기 변수입니다.
12. MAX_OBSTACLE_HEIGHT : 장애물의 최소 가로 크기 변수입니다.
13. OBSTACLE_SPEED : 장애물의 움직이는 속도를 나타내는 변수입니다.
14. MIN_OBSTACLE_SPAWN : 장애물이 규칙적으로 나타나는 게 아닌 불규칙적으로 나타나게 하기 위한 변수입니다. 장애물이 나오고 그다음 장애물까지의 최소 시간을 나타내는 변수입니다.
15. MAX_OBSTACLE_SPAWN : 장애물이 나오고 그다음 장애물까지의 최대 시간을 나타내는 변수입니다.
16. state : 게임 상태가 시작인지, 플레이하는 중인지, 끝난 건지를 나타내는 변수입니다.
17. gameLoop : 프레임마다 저희가 만든 loop 함수가 실행되게끔 하기 위한 requestAnimationFrame(loop)을 넣어주기 위한 변수입니다. 게임이 종료되었을 때 애니메이션을 멈추기 위한 cancelAnimationFrame(gameLoop)을 사용하기 위해 만들었습니다.
18. score : 점수를 나타내는 변수입니다.
19. background : 배경 화면 객체를 생성하고 넣어주는 변수입니다.
20. player : 플레이어 객체를 생성하고 넣어주는 변수입니다.
21. isJumping : 플레이어가 점프 중인지를 체크하는 변수입니다.
22. isJumpKeyDown : 사용자가 점프키를 누르고 있는지를 체크하는 변수입니다.
23. playerVY : 플레이어의 Y축으로의 속력을 나타내는 변수입니다.
24. duration : 애니메이션이 동작할 때 시간차를 계산하기 위한 변수입니다. requestAnimationFrame(loop)을 사용하실 때 function loop(timestamp)로 함수를 정의하고, timestamp의 값을 활용하여도 상관없습니다.
25. obstacle : 장애물 객체를 생성하고 넣어주는 변수입니다.
26. obstacles : 장애물 그룹을 나타내는 배열입니다.
27. randomObstacleHeight : 장애물의 임의적인 높이를 나타내는 변수입니다.
28. intervalSpawn : 장애물과 장애물 사이의 간격을 나타내는 변수입니다.
29. firstOb : 첫 번째 장애물인지 아닌지를 체크하는 변수입니다.
30. spwanTime : 장애물이 나타나는 임의적인 시간을 나타내는 변수입니다.
31. handleKeyDown(e) : 키보드 버튼을 눌렀을 때 실행되는 함수입니다. 지금은 키보드 버튼을 눌렀을 때와 떼었을 때의 2가지의 경우만 만들었는데, 마우스 클릭으로도 동작하게 하기 위해서는 mousedown과 mouseup을 이벤트 리스너에 등록해 주셔야 됩니다. 또 PC가 아닌 폰에서도 클릭이 되게끔 하기 위해서는 touchstart와 touchend를 이벤트 리스너에 등록해 주셔야 됩니다. 혹시라도 요청이 있으시면 코드를 추가하도록 하겠습니다.
32. if(e.code === 'Space') : 스페이스바를 눌렀을 때만 동작하도록 하는 코드입니다.
33. e.preventDefault() : 이벤트의 기본 동작을 막는 메서드입니다. 스페이스바를 눌렀을 때 원하는 동작을 방해하지 않도록 추가하였습니다.
34. isJumpKeyDown = true : 스페이스바를 눌렀을 때 점프키에 대한 변수를 true로 변경해 줍니다.
35. jump() : 스페이스바를 눌렀을 때 플레이어가 점프를 해야 하므로 점프 함수를 실행해 줍니다.36. handleKeyUp(e) : 눌렀던 키보드 버튼에서 손을 뗄 때 실행되는 함수입니다.
37. isJumpKeyDown = false : 스페이스바에서 손을 떼었기 때문에 점프키에 대한 변수를 false로 변경해 줍니다.
38. if(playerVY < 0) { : 다음 시간에 작성할 플레이어의 점프 속력에 대한 변수가 0보다 작을 경우
39. playerVY *= JUMP_CUTOFF : 플레이어의 점프 속력에 JUMP_CUTOFF 변수를 곱하고 더해줍니다. 앞서 말했듯이 스페이스바의 누름 정도에 따라 플레이어의 점프 높이를 결정하기 위한 코드입니다.
40. window.addEventListener('keydown', handleKeyDown) : keydown을 리스너에 등록해 줍니다. keydown을 눌렀을 때 실행되는 함수는 handleKeyDown()입니다.
41. window.addEventListener('keyup', handleKeyUp) : keyup을 리스너에 등록해 줍니다. keyup을 눌렀을 때 실행되는 함수는 handleKeyUp()입니다.