안녕하세요 느종입니다.
이번 시간에는 카카오톡이나 네이버에서도 자주 볼 수 있는 사다리 게임을 만들어볼까 합니다. 친구들과 함께 간단히 내기를 할 때면 자주 사용을 했었는데요. 그래서 처음 생각으로는 간단하게 자바스크립트로 금방 만들 수 있지 않을까 했었는데, 만들다 보니 은근 생각해 주어야 할 부분이 꽤 있더라고요. 그래도 항상 하듯이 정리 리스트를 만들고 하나씩 만들다 보니 금방 완성할 수 있었습니다. 그럼 함께 공부해요!
1. 설계
이번에도 시작 화면과 끝 화면은 팝업창으로 만들 생각입니다.
시작 화면에는 콘텐츠 제목과 사다리 게임에 참여하는 인원수를 입력할 수 있는 영역을 넣을 생각입니다. 그리고 인원을 다 입력한 후에 시작하기 버튼을 누르게 되면 사다리 게임이 시작되도록 할 계획입니다.
메인 화면에는 시작 화면에서 입력한 인원수에 맞게 사다리가 생성되도록 할 계획입니다.
끝 화면에는 메인 화면에서 나온 결과를 보여주고, 다시 하기 버튼을 추가할 계획입니다.
위에서 설계한대로 만들었을 경우 예시 화면입니다.
시작 화면입니다.
앞서 얘기한대로 팝업창으로 만들 계획이고, 콘텐츠 제목을 넣었습니다.
그리고 인원수를 설정할 수 있도록 아래에 플러스 버튼과 마이너스 버튼을 만들 계획입니다.
최소 인원은 2명, 최대 인원은 5명으로 제한을 둘 예정인데, 이 부분은 자신의 입맛대로 바꾸시면 될 듯싶습니다. 인원수 설정이 끝나고 시작하기 버튼을 눌렀을 시 메인 화면이 보이도록 할 예정입니다.
메인 화면입니다.
시작 화면에서 설정한 인원수에 맞춰서 사다리가 생성이 되도록 합니다.
그리고 사용자가 1번부터 5번까지의 번호 중에 클릭을 하기 전까지는 결과를 알 수 없도록 사다리의 세로 부분만 보이도록 할 계획입니다.
사용자가 1번부터 5번까지의 번호 중에 하나를 클릭했을 경우 사다리의 가로 부분들이 나타나도록 하고, 하단에 결과물도 보이도록 할 계획입니다. 그리고 사용자가 클릭한 번호 아래에 작은 노란 원을 만들고, 노란 원이 사다리를 따라서 움직여 내려가도록 할 것입니다. 이 부분은 노란 원이 아닌 본인이 만든 캐릭터를 넣으시고, 걷는 애니메이션 등을 넣으시면 좀 더 그럴싸한 사다리 게임이 될 것 같습니다.
끝 화면입니다.
메인 화면에서 선택한 번호에 대한 결과물이 보이도록 할 계획입니다.
그리고 다시 하기 버튼을 추가할 계획입니다. 사실 끝 화면은 별 거 없는 것 같습니다.
1. 해야 될 내용 정리 리스트
1. 사다리 영역과 시작 화면 영역, 끝 화면 영역 구분해서 만들기
2. 시작 화면 영역에서 인원수를 입력할 수 있도록 input 태그와 플러스, 마이너스 버튼 만들고 서로 연동하기
3. 인원 수는 최소 2명, 최대 5명으로 제한 걸기
4. 입력한 인원 수에 맞게 상단 버튼과 하단 버튼, 사다리 생성하기
5. 사다리 세로줄, 가로줄 만들기
6. 가로줄을 생성할 때 같은 위치에서 만들지 않도록 하기
7. 사용자가 버튼을 클릭하면 해당 경로 계산하고, 그 아래에 노란 원 생성하기
8. 계산한 경로를 따라서 노란 원이 이동하는 모습을 시각적으로 보여주기 위해서 setTimeout 메서드를 사용해서 위치 변경해 주기
9. 시작 함수, 끝 함수, 다시 시작하기 함수, 초기화 함수, 랜덤 함수 등등 만들기
지금 생각나는대로 작성한 것이라서 추후에 추가되는 내용들은 자세하게 설명하도록 하겠습니다.
정리한 내용을 바탕으로 다음 시간에는 외형에 대한 코드를 먼저 작성해 보도록 하겠습니다.
2. 폴더 및 파일
이번에도 css, js 폴더를 만들고, 같은 위치에 index.html 파일을 만들어서 코드를 작성하였습니다.