안녕하세요 느종입니다.
오랜만에 글을 작성하네요. 그동안 자바스크립트로 여러 가지 콘텐츠들을 만들어보았는데요. 너무 정적인 콘텐츠들만 만들었다는 생각을 문득 하게 되었습니다. 그래서 이번에는 동적인 콘텐츠를 만들어볼까 합니다. 그중에서도 쿠키런 게임과 비슷한 횡스크롤 게임을 한 번 만들어보려고 합니다. 캔버스와 애니메이션을 활용하여 코드를 작성할 예정입니다. 그러면 함께 공부해요!
설계
이번에는 시작 화면도 팝업(모달) 창으로 만들 생각입니다. 시작 화면에는 콘텐츠 제목과 콘텐츠 시작 내용, 시작하기 버튼으로 구성할 생각입니다.
메인 화면에는 횡스크롤 게임 요소만 들어가도록 구성할 생각입니다. 그 안에 플레이어나 장애물, 배경 화면, 점수 등이 포함됩니다.
결과 화면에는 메인 화면에서 나온 게임 점수와 다시 하기 버튼으로 구성할 생각입니다.
만들어질 게임 예시 화면입니다.
캔버스에다가 배경화면, 플레이어, 장애물을 그리고, requestAnimationFrame을 활용하여 애니메이션 효과를 적용하도록 할 것입니다.
게임 배경화면은 똑같은 이미지 2개를 연속적으로 그려주어 플레이어가 고정되어 있어도, 앞으로 움직이는 것처럼 보이게 할 것입니다.
플레이어는 스페이스바를 이용하여 점프를 할 수 있도록 할 예정입니다. 플레이어는 고정되어 있고, 위 아래로만 움직이도록 할 예정입니다.
장애물은 오른쪽에서 왼쪽으로 하나씩 나오는데 높이가 임의적으로 바뀌도록 할 예정입니다.
캔버스 화면 밖에서 그려지도록 하고, 화면에 보여지는 장애물을 하나의 배열로 묶고, 화면 밖으로 사라지는 장애물은 배열에서 삭제하도록 할 것입니다. 장애물 가로 길이는 고정으로 하고, 세로 길이만 최솟값과 최댓값을 정해서 임의적으로 바뀌도록 할 것입니다.
점수는 플레이어가 장애물을 부딪히지 않고, 뛰어 넘었을 경우 증가하도록 할 것입니다. 장애물의 위아래 양 옆 어느 부분이라도 부딪히지 않고, 뛰어넘어야 점수가 증가하도록 할 예정입니다.
플레이어가 장애물에 부딪히게 되면 게임이 끝나는 방식으로 구성할 예정입니다. 게임이 끝나면 결과 화면을 팝업(모달) 창으로 보여 줄 것입니다.
지금은 껍데기 부분만 만들다보니 이미지도 없고, 허접해 보이는데 다 만들고 난 후에 플레이어에 캐릭터 이미지를 추가하고, 장애물에도 아기자기한 이미지 등을 추가하는 등 자신의 입맛 데로 고도화시키면 될 것 같습니다.
해야 될 내용 정리 리스트
1. 800 x 300 캔버스 만들기
2. 배경화면, 플레이어, 장애물 각 객체 만들기
3. 각 이미지 생성 및 로드
4. 스페이스바를 이용하여 플레이어 점프 기능 만들기
5. 플레이어가 점프 후 바닥 아래로 내려가지 않도록 하기
6. 점프는 한 번만 되도록 하기
7. 장애물의 높이 최솟값과 최댓값을 정하고, 임의적으로 생성하기
8. 장애물이 화면 밖으로 사라지면 삭제하기
9. 장애물에 부딪히지 않고 뛰어 넘으면 점수 증가시키기
10. 장애물에 부딪히면 애니메이션 멈추고, 결과 화면 보여주기
11. 시작 화면, 결과 화면 팝업(모달) 창 만들기
12. 시작 화면에서 시작 하기 버튼을 누르면 게임 시작하기
13. 결과 화면에서 다시 시작 하기 버튼 누르면 게임 다시 시작하기
이번에 콘텐츠를 만들면서 해야 될 내용들을 대략적으로 정리해 보았는데요.
정리한 내용을 바탕으로 다음 시간에는 실질적인 코드를 작성해 보도록 하겠습니다.
더 추가하고 싶은 기능이나 변경하고 싶은 기능이 있으시면 수정하셔도 상관없습니다.
폴더 및 파일
항상 똑같이 js폴더와 css폴더를 나누고 파일 3개로 작성할 예정입니다. 자신의 입맛대로 하시면 될 듯싶습니다.
오늘은 이번에 만들 동적 콘텐츠인 횡스크롤 게임에 대한 전반적인 계획과 예시, 해야 될 작업들에 대해서 정리를 해보았습니다. 기존에 만들었던 콘텐츠들과 제작 방식이 약간 달라져서 코드도 길어지고 복잡해질 듯싶습니다. 하지만 앞서 정리한 내용을 바탕으로 하나씩 기능들을 만들어가다 보면 어느새 만들고자 하는 콘텐츠가 완성되어 있을 것이라 믿습니다. 다음 시간에는 시작 화면과 메인 게임 화면에 대해 코드를 작성해 보도록 하겠습니다.