안녕하세요 느종입니다.
이번 시간에는 어렸을 때 친구들끼리 자주 하던 게임 중의 하나인 숫자 야구 게임을 만들어볼까 합니다.
간단하게 설명하자면 문제 출제자가 임의의 4자리 숫자를 정하면, 나머지 사람들이 그 임의의 4자리 숫자를 맞히는 게임입니다. 그냥 찍어서 맞히면 재미가 없으니깐 스무고개 방식으로 4자리씩 숫자를 제시해서 힌트를 받는 방식입니다. 4자리 중에 자리와 숫자가 모두 일치하면 스트라이크, 자리는 일치하지 않지만 숫자가 있다면 볼 이렇게 표시합니다.
이번에도 하나씩 할 일을 목록으로 정리하고 코드를 완성해 나가도록 하겠습니다. 함께 공부해요!
1. 설계
이번 숫자 야구 게임에서도 시작 화면과 끝 화면은 팝업창으로 만들도록 하겠습니다.
시작 화면과 끝 화면에는 크게 추가해야 될 부분이 없습니다.
시작 화면에는 콘텐츠 제목과 설명, 시작하기 버튼을 추가할 계획입니다.
메인 화면에는 숫자 야구 게임을 할 수 있도록 숫자 패드와 숫자 리스트 등을 추가할 계획입니다.
끝 화면에는 메인 화면에서 가져온 결과를 보여주고, 다시 하기 버튼을 넣을 계획입니다.
2. 예시 화면
시작 화면 예시입니다.
팝업창으로 만들 계획이고, 큰 기능은 없습니다.
숫자 야구 게임 제목과 설명이 추가되고, 시작하기 버튼을 누르게 되면 게임이 시작되도록 할 계획입니다.
메인 화면 예시입니다.
크게 왼쪽 창과 오른쪽 창으로 나뉘어 있습니다.
왼쪽 창의 경우 사용자와 상호 작용하는 공간입니다.
오른쪽 창의 경우 사용자가 왼쪽 창에서 상호 작용한 결과를 표시하는 공간입니다.
이번에는 반응형도 추가해 볼 생각입니다.
PC나 태블릿에서는 예시 화면처럼 왼쪽 창과 오른쪽 창이 가로로 나오도록 할 계획입니다.
모바일에서는 왼쪽 창 밑으로 오른쪽 창이 위치하여 가독성을 좋게 할 계획입니다.
상단에는 사용자가 숫자 패드를 입력하면 숫자가 나오는 화면이 위치해 있고, 그 옆에는 남은 질문 횟수를 알 수 있는 창을 넣을 계획입니다.
중간에는 숫자를 입력할 수 있는 숫자 패드를 넣을 계획입니다.
하단에는 입력한 숫자를 모두 지울 수 있는 버튼과 4자리를 모두 입력한 후에 입력한 숫자에 대해 정답인지 아닌지를 확인할 수 있는 버튼을 만들 계획입니다.
확인 버튼을 누르게 되면 오른쪽 창에 입력한 숫자에 대한 내용과 결과를 리스트 형식으로 표시되도록 할 계획입니다.
결과 화면 예시입니다.
메인 화면에서 나온 결과를 보여주도록 할 계획입니다.
주어진 기회 안에 정답을 맞힐 경우 성공이라고 표시하고, 한 번 더 정답을 보여주도록 할 것입니다.
기회 안에 정답을 맞히지 못할 경우 실패라고 표시하고, 해당 문구가 보이도록 할 계획입니다.
다시 하기 버튼을 누르게 되면 시작 화면 팝업창이 나오고 다시 게임을 할 수 있도록 할 계획입니다.
3. 해야 될 내용 정리 리스트
1. 시작 화면, 끝 화면, 메인 화면 영역 구분해서 만들기
2. 시작 화면과 끝 화면 팝업창으로 만들기
3. 메인 화면에서 상단 화면과 숫자 패드, 하단 버튼 구현하기
4. 숫자 패드를 눌렀을 시 상단 화면에 표시되도록 구현하기
5. 지우기 버튼을 눌렀을 시 입력한 숫자 지우기
6. 확인 버튼을 눌렀을 시 정답과 비교하는 함수 만들기
7. 비교 후에 결과물을 사용자가 볼 수 있도록 리스트 목록으로 보여주기
8. 게임을 시작하면 임의적인 4자리 숫자 만들기
9. 게임을 진행할 수 있는 기회에 대해 숫자를 정하고, 상단 오른쪽에 나타내기
10. 초기화 함수, 게임을 진행할 수 있는 기회를 모두 소진했을 때 실행될 결과 함수 등 만들기
11. 메인 화면에서 왼쪽 창과 오른쪽 창에 대해 반응형으로 만들기(PC, 모바일)
이번에 해야 될 내용들에 대해서 간략하게 정리를 해보았습니다.
다음 시간부터 정리한 내용들을 바탕으로 코드를 하나씩 작성해 보도록 하겠습니다.
4. 폴더 및 파일
항상 저는 같은 방식으로 css, js 폴더를 만들고, index.html 파일을 만들어서 작업을 합니다.
이번 시간에는 숫자 야구 게임을 만들기 위한 설계와 예시 화면에 대해 포스팅을 해보았는데요.
이번에도 하나씩 자세하게 설명을 첨부하면서 만들어 가보도록 하겠습니다.