안녕하세요 느종입니다.
이번 시간에는 숫자 야구 게임의 외형을 만들어볼까 합니다. 제가 디자인적 소질은 없기 때문에 외형 같은 경우는 마음대로 자신의 역량대로 만드시면 될 것 같습니다. 외형보다 중요한 건 안에 기능들이죠!! 그럼 함께 공부해요.
1. 해야 될 내용 정리 리스트
2. 시작 화면과 끝 화면 팝업창으로 만들기
3. 메인 화면에서 상단 화면과 숫자 패드, 하단 버튼 구현하기
4. 숫자 패드를 눌렀을 시 상단 화면에 표시되도록 구현하기
5. 지우기 버튼을 눌렀을 시 입력한 숫자 지우기
6. 확인 버튼을 눌렀을 시 정답과 비교하는 함수 만들기
7. 비교 후에 결과물을 사용자가 볼 수 있도록 리스트 목록으로 보여주기
8. 게임을 시작하면 임의적인 4자리 숫자 만들기
9. 게임을 진행할 수 있는 기회에 대해 숫자를 정하고, 상단 오른쪽에 나타내기
10. 초기화 함수, 게임을 진행할 수 있는 기회를 모두 소진했을 때 실행될 결과 함수 등 만들기
11. 메인 화면에서 왼쪽 창과 오른쪽 창에 대해 반응형으로 만들기(PC, 모바일)
2. 시작 화면 페이지
지난 시간 설계 항목에서 만들었던 그대로 시작 화면 페이지를 만들었습니다. 사다리 게임이랑 거의 똑같고, 인원수를 설정하는 항목만 빠졌습니다. 그 대신에 숫자 야구 게임에 대한 간략한 설명을 추가하였습니다. 이번에도 팝업 형태로 페이지를 만들었고, 시작하기 버튼을 누르면 사라지도록 할 계획입니다. 팝업 형태가 아닌 페이지 형식으로 만들어서 각각 페이지별로 이동할 수 있도록 하여도 상관없습니다.
3. HTML 코드
[ index.html ]
HTML 코드 입니다.
이번에도 크게 3가지 영역으로 나뉘어 있습니다.
게임 시작 화면 페이지 영역과 게임 끝 화면 페이지 영역은 별로 어려울 것 없는 코드입니다.
팝업 페이지 형태로 되어 있고, 글과 버튼으로 구성되어 있습니다.
게임 메인 화면 페이지 영역은 2가지 영역으로 구분 지었습니다. 사용자랑 상호 작용하는 영역과 상호 작용한 내용을 보여주는 영역 이렇게 2가지로 만들었습니다. 앞서 저희 목표가 이번에는 반응형으로 콘텐츠를 만들어보기였기 때문에 이렇게 영역을 구분 지었습니다. PC나 태블릿에서는 2가지 영역이 가로로 배치될 것이고, 모바일에서는 2가지 영역이 세로로 배치될 것입니다.
4. CSS 코드
[ style.css ]
5. 메인 화면 페이지
숫자 야구 게임 메인 화면 페이지입니다.
앞서 설명한대로 PC화면에서 찍은 거라 2가지 영역이 가로로 배치되어 있습니다.
왼쪽 영역은 사용자가 숫자 키패드를 눌러 정답을 유추해 낼 수 있도록 구성을 하였습니다.
저희가 설계한대로 상단에는 숫자 키패드를 누르면 해당 숫자가 입력이 되는 화면을 만들었고, 그 옆에는 기회를 카운트할 수 있는 화면을 만들었습니다.
중간에는 숫자 키패드를 사용자가 편하게 클릭할 수 있도록 만들었습니다.
하단에는 사용자가 숫자를 입력하다가 지울 수 있는 지우기 버튼과 숫자를 모두 입력한 후에 내가 입력한 숫자가 정답인지 아닌지를 확인할 수 있는 확인 버튼을 만들었습니다.
오른쪽 영역에는 왼쪽 영역에서 숫자를 입력하고 난 후 확인 버튼을 누르게 되면 누른 숫자와 그 숫자에 대한 결과가 나오도록 하였습니다. 결과는 리스트 형식으로 나오도록 구성하였습니다.
저는 총 7번의 기회로 하였는데 이 부분은 임의대로 바꾸셔도 상관없습니다.
오늘은 숫자 야구 게임의 전체적인 외형에 대해 코드를 작성해 보았습니다. HTML, CSS는 정말 정답이 없고, 본인 스타일대로 만드시면 될 것 같습니다. 다음 시간에는 숫자 야구 게임의 내부 기능과 함수들에 대해서 코드를 작성해 보도록 하겠습니다. 그래도 하나하나 만들다 보니 콘텐츠가 점점 쌓여가는 것 같습니다. 그럼 다음 시간에 만나요~