https://github.com/1gyou1/subway-game
https://github.com/1gyou1/subway-game
api async-await react-router-dom reactjs usenavigate-hook useparams-hook
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/1gyou1/subway-game
- Owner: 1GYOU1
- Created: 2023-10-25T01:24:37.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-01-13T15:42:03.000Z (over 1 year ago)
- Last Synced: 2024-12-26T19:14:02.195Z (5 months ago)
- Topics: api, async-await, react-router-dom, reactjs, usenavigate-hook, useparams-hook
- Language: JavaScript
- Homepage: https://1gyou1.github.io/subway-game/
- Size: 6.86 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# subway-game
- 2023년 11월 진행
- React.js 라이브러리, 지하철 노선도 API를 사용하여 지하철 랜덤 호선 맞추기 게임 구현
### 👀 MainPage View
### 📌 주요 기술 스택
### 📌 주요 기능
- 인트로 애니메이션
- 지하철 노선도 API
- 숫자 랜덤 노출
- 타이머
- 정답, 오답, 중복 체크
### Github Pages
https://1gyou1.github.io/subway-game/
### 프로젝트 진행 과정
1.
프로젝트 기획/구상
2. 프로젝트 설치, 개발 환경 세팅
3. 인트로 애니메이션 구현
4. 게임 시작, 방법 화면 구현
5. 체크박스로 노선 선택해서 선택한 노선만 랜덤 호출 (Select.js)
ㄴ 처음 게임 옵션은 1, 2, 3, 4호선 중에 선택하여 랜덤
ㄴ 업그레이드 버전은 1, 2, 3, 4, 5, 6, 7, 8, 9호선 모두 랜덤 고정
6. 0 ~ 4중에 랜덤으로 숫자 노출
ㄴ한 문제마다 랜덤 돌리기
ㄴ Select 컴포넌트에서 선택한 호선 배열로 가져오고 index 랜덤으로 돌려서 출력
7. api 맨 처음 한번만 가져오기. ex - {['01호선', '평택역']}
ㄴ 필요한 형태로 가져오기{{ LINE_NUM, STATION_NM }, [1, 평택], [1, 금정]}
ㄴ 서울역 예외처리 - 데이터가 '서울'이 아닌 '서울역'으로 되어있어서 수정 필요.
8. input (정답 칸에)입력 텍스트 받아오기
ㄴ입력한 값 useState에 넣고(inputValue) 특수문자, 영어, 숫자 입력 제한
9. input에 답안 입력 후 엔터키, 클릭 시 제출, 초기화
ㄴ 자동 input focus
10. 제출한 입력값이 api 요소의 호선(0번째 배열 요소값), 역 이름(1번째 배열 요소값)이 비교
ㄴ 맞으면 원본배열에서 삭제, 내 맞춘 답안 정답 배열 setCorrect에 넣기
ㄴ 같은 역이름을 가진 다른 호선 배열 값도 삭제(중복 체크), 내 맞춘 답안 정답 배열 setCorrect에 넣기
ㄴ 이미 정답 배열에 있는 값이라면 중복 이미지 노출
11. 정답, 오답, 중복 이미지 노출
ㄴ 정답, 오답, 중복이면 다음 문제 노출
ㄴ 정답이면 quizCount++ (퀴즈 타이틀 숫자 + 1)
ㄴ 정답이면 myScore 점수 올리기 (한 문제당 + 10)
12. 최대 10문제 진행 quizCount++
13. 타이머기능 10초 -> 10초 지나면 게임 오버. (결과 페이지로)
14. 새로 고침 방지
15. 결과 값 params로 전달
16. 결과 페이지 노출 (상, 중, 하)
17. Next stage
ㄴ nextStage intro.js
ㄴ nextStage Go.js
ㄴ 1~9호선 랜덤 노출
ㄴ 5초 안에 맞추기
18. nextStage에서 게임오버하면 nextStage로 재시작 버튼 생성
ㄴ 처음부터 버튼도 생성