- 2023년 11월 진행
- React.js 라이브러리, 지하철 노선도 API를 사용하여 지하철 랜덤 호선 맞추기 게임 구현
- 인트로 애니메이션
- 지하철 노선도 API
- 숫자 랜덤 노출
- 타이머
- 정답, 오답, 중복 체크
https://1gyou1.github.io/subway-game/
-
프로젝트 기획/구상
-
프로젝트 설치, 개발 환경 세팅
-
인트로 애니메이션 구현
-
게임 시작, 방법 화면 구현
-
체크박스로 노선 선택해서 선택한 노선만 랜덤 호출 (Select.js)
ㄴ 처음 게임 옵션은 1, 2, 3, 4호선 중에 선택하여 랜덤
ㄴ 업그레이드 버전은 1, 2, 3, 4, 5, 6, 7, 8, 9호선 모두 랜덤 고정 -
0 ~ 4중에 랜덤으로 숫자 노출 ㄴ한 문제마다 랜덤 돌리기
ㄴ Select 컴포넌트에서 선택한 호선 배열로 가져오고 index 랜덤으로 돌려서 출력 -
api 맨 처음 한번만 가져오기. ex - {['01호선', '평택역']}
ㄴ 필요한 형태로 가져오기{{ LINE_NUM, STATION_NM }, [1, 평택], [1, 금정]}
ㄴ 서울역 예외처리 - 데이터가 '서울'이 아닌 '서울역'으로 되어있어서 수정 필요. -
input (정답 칸에)입력 텍스트 받아오기 ㄴ입력한 값 useState에 넣고(inputValue) 특수문자, 영어, 숫자 입력 제한
-
input에 답안 입력 후 엔터키, 클릭 시 제출, 초기화
ㄴ 자동 input focus -
제출한 입력값이 api 요소의 호선(0번째 배열 요소값), 역 이름(1번째 배열 요소값)이 비교
ㄴ 맞으면 원본배열에서 삭제, 내 맞춘 답안 정답 배열 setCorrect에 넣기
ㄴ 같은 역이름을 가진 다른 호선 배열 값도 삭제(중복 체크), 내 맞춘 답안 정답 배열 setCorrect에 넣기
ㄴ 이미 정답 배열에 있는 값이라면 중복 이미지 노출 -
정답, 오답, 중복 이미지 노출
ㄴ 정답, 오답, 중복이면 다음 문제 노출
ㄴ 정답이면 quizCount++ (퀴즈 타이틀 숫자 + 1)
ㄴ 정답이면 myScore 점수 올리기 (한 문제당 + 10) -
최대 10문제 진행 quizCount++
-
타이머기능 10초 -> 10초 지나면 게임 오버. (결과 페이지로)
-
새로 고침 방지
-
결과 값 params로 전달
-
결과 페이지 노출 (상, 중, 하)
-
Next stage
ㄴ nextStage intro.js
ㄴ nextStage Go.js
ㄴ 1~9호선 랜덤 노출
ㄴ 5초 안에 맞추기 -
nextStage에서 게임오버하면 nextStage로 재시작 버튼 생성
ㄴ 처음부터 버튼도 생성