안녕하세요 느종입니다.
오늘은 사다리 게임의 외형에 대해서 코드를 작성해 보도록 하겠습니다. 저번 시간에 대략적으로 해야 될 내용들을 정리해 보았는데요. 그중에서 HTML 부분과 CSS 부분에 대해 코드를 작성해 보도록 하겠습니다. 오늘은 딱히 어려운 부분이 없으니 편하게 보시면서 함께 코드를 작성하면 될 듯싶습니다. 함께 공부해요!
1. 해야 될 내용 정리 리스트
2. 시작 화면 영역에서 인원수를 입력할 수 있도록 input 태그와 플러스, 마이너스 버튼 만들고 서로 연동하기
3. 인원 수는 최소 2명, 최대 5명으로 제한 걸기
4. 입력한 인원 수에 맞게 상단 버튼과 하단 버튼, 사다리 생성하기
5. 사다리 세로줄, 가로줄 만들기
6. 가로줄을 생성할 때 같은 위치에서 만들지 않도록 하기
7. 사용자가 버튼을 클릭하면 해당 경로 계산하고, 그 아래에 노란 원 생성하기
8. 계산한 경로를 따라서 노란 원이 이동하는 모습을 시각적으로 보여주기 위해서 setTimeout 메서드를 사용해서 위치 변경해 주기
9. 시작 함수, 끝 함수, 다시 시작하기 함수, 초기화 함수, 랜덤 함수 등등 만들기
1. 시작 화면 페이지
저번 회차에서 만들었던 횡스크롤 게임 시작 화면과 유사합니다.
시작 화면을 팝업으로 띄우고, 콘텐츠 제목과 인원수를 입력할 수 있는 영역을 추가하였습니다.
인원수는 저희가 계획한대로 최소 2명에서 최대 5명까지로 설정을 하였고, 플러스, 마이너스 버튼을 이용하여 숫자가 증가하도록 하였습니다.
인원수 설정을 하고 난 뒤 시작하기 버튼을 누르면 시작 화면 팝업창이 사라지고, 메인 화면이 나오도록 하였습니다.
[ index.html ]
index.html입니다.
총 3개의 영역으로 이루어져 있습니다.
첫 번째 영역은 메인 게임 화면입니다. 상단 버튼, 하단 버튼, 사다리의 경우는 자바스크립트를 통해서 동적으로 생성해주어야 하기 때문에 틀만 잡아주시면 됩니다.
두 번째 영역은 시작 화면입니다. 앞서 얘기한 대로 콘텐츠 제목과 인원수를 입력할 수 있는 부분을 추가하였습니다. 인원수가 보이는 부분은 input type="number" 태그를 활용하였습니다.
세 번째 영역은 끝 화면입니다. 끝 화면에는 사다리 게임을 하고 난 뒤 결과물이 나오는 부분과 다시 게임을 할 수 있는 버튼을 추가하였습니다.
[ style.css ]
css는 다음과 같습니다.
이 부분은 자신의 입맛대로 마음대로 변경하셔도 됩니다. 추가할 것이 있으면 추가하시고, 지울 것이 있다면 지우셔도 무방합니다!
2. 메인 화면 페이지
메인 게임 화면입니다.
상단에 사용자가 선택할 수 있는 버튼이랑 하단에 결과를 표시하는 버튼이 시작 화면에서 설정한 인원수만큼 생성이 되도록 하였습니다. 그리고 그 바로 밑에 사다리가 나타나도록 하였습니다. 사용자가 상단 버튼을 클릭하기 전에는 사다리의 세로줄만 나타나도록 하였고, 사용자가 버튼을 클릭하는 순간 사다리의 가로줄이 임의적으로 생성이 되고, 선택한 버튼 바로 아래에 노란원이 생성이 되도록 하였습니다. 그리고 선택한 버튼에 해당하는 경로를 따라서 이동하도록 시각적으로 보이도록 구현하였습니다.
저는 구현하지 못하였는데, 포스팅을 작성하다 보니 노란원이 이동하는 경로를 따라서 색이 그려지도록 하면 더 직관적일 것 같네요. 그리고 사용자가 선택한 버튼의 색도 다르게 해 주면 사용자가 보기에 더 좋을 것 같습니다.
오늘은 사다리 게임의 외형적인 골격에 대해 HTML과 CSS 코드를 작성해 보았습니다. 사다리 게임 같은 경우에는 게임 방법도 다양한 것 같습니다. 제가 만든 것처럼 상단의 버튼을 누르게 되면 결과를 보이는 방법, 카카오톡에 있는 사다리 게임처럼 인원수와 벌칙을 정하고, 게임을 시작하면 바로 결과를 보여주는 방법 등등 다양한 방법들이 있는 것 같습니다. 하지만 큰 틀은 같기 때문에 자신이 사용해야 될 콘텐츠에 맞게 변형해서 코드를 작성하면 될 것 같습니다. 다음 시간에는 내부적인 기능과 함수들을 자바스크립트 코드로 작성해 보도록 하겠습니다.