안녕하세요 느종입니다.
오늘은 저번 시간에 이어서 HTML, CSS 코드를 작성해 보도록 하겠습니다.
외형적인 부분을 먼저 만들고 난 후 내부 기능에 대한 코드를 작성해 볼까 합니다. 횡스크롤 게임은 대부분 캔버스 안에서 동작들이 이루어지기 때문에 HTML, CSS코드는 길지가 않습니다.
저번 시간에 대략적으로 해야 될 내용들을 정리해 보았는데요. 외형적인 부분부터 하나씩 코드로 바꿔보도록 하겠습니다. 함께 공부해요.
1. 해야 될 내용 정리 리스트
2. 배경화면, 플레이어, 장애물 각 객체 만들기
3. 각 이미지 생성 및 로드
4. 스페이스바를 이용하여 플레이어 점프 기능 만들기
5. 플레이어가 점프 후 바닥 아래로 내려가지 않도록 하기
6. 점프는 한 번만 되도록 하기
7. 장애물의 높이 최솟값과 최댓값을 정하고, 임의적으로 생성하기
8. 장애물이 화면 밖으로 사라지면 삭제하기
9. 장애물에 부딪히지 않고 뛰어 넘으면 점수 증가시키기
10. 장애물에 부딪히면 애니메이션 멈추고, 결과 화면 보여주기
11. 시작 화면, 결과 화면 팝업(모달) 창 만들기
12. 시작 화면에서 시작 하기 버튼을 누르면 게임 시작하기
13. 결과 화면에서 다시 시작 하기 버튼 누르면 게임 다시 시작하기
1. 시작 화면 페이지
기존에 만들었던 콘텐츠의 시작 화면과는 많이 달라졌습니다.
시작 화면 자체도 모달(팝업) 창으로 만들고, 콘텐츠 제목, 조작 방법 설명, 시작하기 버튼으로 구성하였습니다. 기존에 만들었던 콘텐츠처럼 그냥 페이지로 만드셔도 무방합니다. 시작 하기 버튼을 누르면 시작 화면 모달(팝업) 창은 없어지고 횡스크롤 게임이 시작됩니다.
[ index.html ]
HTML 코드는 다음과 같습니다.
게임 화면은 canvas 태그를 사용하여 구현하였고, 전체적으로 position: relative, absolute를 주어 점수 HUD, 시작 화면(팝업), 결과 화면(팝업)이 위치하도록 구성하였습니다. 캔버스의 크기는 자신의 생각대로 조절하시면 될 것 같습니다. 결과 화면은 나중에 보여줘야 하기 때문에 hidden 클래스를 추가하여 숨겨주었습니다.
2. 메인 화면 페이지
메인 화면 페이지입니다.
지난 시간에 구성한 그대로 만들었습니다.
게임 화면 자체가 캔버스에서 구현하다 보니 전체적인 코드는 자바스크립트로 작성하였습니다. 저는 임의적으로 플레이어와 장애물 모두 사각형 모양을 사용하였는데, 더 귀엽고 멋있는 게임을 만드시려면 다양한 캐릭터 이미지나 장애물 이미지를 추가하시면 될 것 같습니다.
플레이어(초록색 사각형)의 위치는 고정되어 있고, 스페이스바를 눌렀을 때 위아래로 점프 동작만 하게끔 구현하였습니다.
장애물(빨간색 사각형)의 위치는 오른쪽에서 왼쪽으로 나오게끔 하였고, 배경화면 밖에서 생성되어 하나씩 나오도록 하였습니다. 규칙적으로 똑같은 높이의 장애물이 나오면 재미가 없으므로, 장애물이 생성되는 시간과 장애물의 높이가 매번 달라지도록 구현하였습니다.
장애물을 뛰어넘으면 점수가 +1점이 되도록 하였고, 장애물에 부딪히게 되면 게임이 끝나도록 구현하였습니다.
[ style.css ]
style.css는 다음과 같습니다.
화면 대부분을 캔버스 안에서 구현하다 보니 css 코드도 짧아졌네요.
앞서 얘기했듯이 캔버스 태그, 점수 HUD, 팝업 화면, 버튼 등의 css 코드만 작성하시면 됩니다.
오늘은 지난 시간에 이어서 횡스크롤 게임 외형적인 부분에 대해 코드를 작성해 보았습니다. 처음 설계한 대로 정리 리스트 목록에 있는 내용을 하나씩 만들어가다 보면 끝이 보일 것 같습니다. 외형적인 부분은 크게 어려운 부분이 없었기 때문에 쉽게 따라서 코드를 작성하실 수 있을 것입니다. 다음 시간에는 실질적으로 게임이 동작하는 자바스크립트 코드를 작성하도록 하겠습니다. 캔버스 안에서 플레이어, 장애물, 배경화면에 대한 객체를 만들고, 플레이어는 점프 기능, 장애물과 배경화면은 움직이는 기능들을 구현할 예정입니다. 그 외에도 플레이어와 장애물 충돌을 체크하는 기능, 스페이스바를 누르는 시간에 비례하여 플레이어 점프 높이가 달라지는 기능, 장애물의 높이와 생성 시간을 임의적으로 하는 기능, 플레이어와 장애물이 충돌하였을 때 게임이 끝나고, 결과 화면(팝업) 창이 뜨도록 하는 기능 등을 만들어 볼 생각입니다. 다음 시간에 만나요~