안녕하세요 느종입니다.
오늘은 횡스크롤 게임의 내부적인 기능에 대한 코드를 작성해 보도록 하겠습니다. 해야 될 정리 리스트에 있는 내용들을 하나씩 코드로 변환하다 보면 어렵지 않게 콘텐츠를 완성할 수 있을 것입니다. 함께 공부해요!
1. 자바스크립트 코드
1. IMG_SRC : 플레이어, 장애물, 배경화면의 이미지를 만들기 위한 XML 코드입니다. 저처럼 하지 않고, 캐릭터 이미지나 장애물 이미지를 만들거나 가져오셔서 사용하셔도 됩니다.
2. loadImageFunc() : 이미지를 새로 생성하고, 적용하는 함수입니다.
3. loadAssetsFunc() : 위에서 만들었던 플레이어, 장애물, 배경화면에 대한 이미지를 각각 배열에 넣고, loadImageFunc()을 통해서 적용하는 함수입니다. promise와 async를 사용하였는데 이 부분은 추후에 따로 포스팅하도록 하겠습니다. 간단하게 얘기하자면 이미지가 모두 로드된 후에 게임에 대한 자바스크립트 함수들이 실행될 수 있도록 하기 위함입니다.
4. GAME_STATE : 게임 상태 나타내는 변수입니다. start, play, end 3가지의 상태를 표시합니다.
5. class Background : 배경화면에 대한 객체를 만들어 주었습니다. 따로 객체를 만들어 주지 않아도 상관은 없지만, 추후 콘텐츠를 고도화하게 되면 배경화면이나 장애물, 플레이어에 대한 부분을 여러 군데에서 생성하기도 하고, 가져다 쓰기도 하기 때문에 객체로 만들어주어 관리해 주면 좀 더 편하게 코드를 작성할 수 있습니다.
6. constructor(img, x, y, w, h, speed) : 배경화면 객체에 대한 생성자를 만들어줍니다. img는 배경화면 이미지, x는 배경화면이 캔버스에 위치하는 x좌표, y는 배경화면이 캔버스에 위치하는 y좌표, w는 배경화면의 가로 크기, h는 배경화면의 세로 크기, speed는 배경화면이 움직이는 속도를 나타내는 변수입니다.
7. draw() : 배경화면 객체에 대한 그리기 함수입니다.
8. ctx.drawImage(this.img, this.x, this.y, this.w, this.h) : 아래에서 언급하겠지만 캔버스에 배경화면을 그리는 것이기 때문에 drawImage를 사용합니다. 배경화면 이미지와 위치(x, y 좌표), 크기(width, height)가 변수로 들어갑니다.
9. update() : 횡스크롤 게임이기 때문에 이미지를 프레임 단위로 계속 그려주어야 하므로, 업데이트 함수를 만들어서 배경 화면을 계속 그려주는 기능을 넣었습니다.
10. class Player : 플레이어에 대한 객체를 만들어 주었습니다.
11. constructor(img, x, y, w, h) : 플레이어 객체에 대한 생성자를 만들어 주었습니다. 플레이어의 위치는 고정이기 때문에 speed 변수는 필요하지 않습니다.
12. draw(), update() : 배경화면에서 사용한 그리기 함수와 업데이트 함수와 같은 개념입니다.
13. class Obstacle : 장애물에 대한 객체를 만들어 주었습니다.
14. constructor(img, x, y, w, h, speed, passedChk) : 장애물 객체에 대한 생성자를 만들어 주었습니다. 장애물은 배경화면처럼 오른쪽에서 왼쪽으로 움직여야 하므로, speed(속도) 변수가 필요하고, 플레이어가 장애물을 뛰어 넘어서 충돌하지 않고 넘어가면 점수가 증가해야 하므로, 넘어갔는지를 체크하는 변수를 추가하였습니다.
15. canvas : 캔버스 태그를 담는 변수
16. ctx : 캔버스에서 사용할 context를 가져오는 변수
17. hud : hud 태그를 담는 변수
18. startPage : 시작 화면 관련 변수
19. startBtn : 시작하기 버튼 관련 변수
20. endPage : 끝 화면 관련 변수
21. totalScoreBoard : 끝 화면에서 표시될 점수 관련 변수
22. reStartBtn : 다시 하기 버튼 관련 변수
오늘은 횡스크롤 게임에 대한 기능적인 부분들의 코드를 1차적으로 작성해 보았습니다. 대부분의 기능들이 캔버스에서 이루어지다 보니 자바스크립트로 작성해야 될 부분들이 많이 있습니다. 기존에 만들었던 콘텐츠들에 비해 조금 더 복잡하지만 차근차근 하나씩 기능들을 만들어가다 보면 저희가 처음에 설계했던 대로 만들 수 있을 것입니다.