[R.N] 숫자 맞추기 게임
내가 1~99사이의 숫자를 입력하면 컴퓨터가 그 숫자를 맞추는 게임이다.
컴퓨터가 숫자 맞추기를 시도할때마다
나는 up. down을 통해 정답에 가까워질 수 있도록 힌트를 준다.
몇번만에 앱이 정답에 도출되었는지도 최종 화면에서 확인가능하다.
SPA 방식으로 Screen-component만 구현, (page는 1개)
https://github.com/heesangs/miniNumGame/commits/main/
GitHub - heesangs/miniNumGame: programing tutorial
programing tutorial. Contribute to heesangs/miniNumGame development by creating an account on GitHub.
github.com
커밋 내용 정리
2025년 3월 2일
• Start Game Screen & TestInput
- 게임 시작화면에 input과 스타일 적용
- Primary버튼 생성(pressable > View > Text로 구현)하고
- App.tsx와 연결.
2025년 3월 5일
• Input & Button & Bg 게임 화면에서 랜덤 숫자 생성 기능 추가.
- App.tsx 백그라운드에 Gradient + Image 추가하기.
- Primary버튼에 스타일 추가하기 (pressed, normal 상태 정의)
- press 됐을때 함수 정의 (일단 콘솔부터)
• Input & Button logic and Alert 버튼, 인풋, 얼럿 추가
- useState를 사용해 TextInput설정.
- 초기화 버튼에 state 초기화 하기
- confirm 버튼 생성시 숫자가 1~99까지만 입력되고 다른것들이 들어가면 Alert 출력하기
2025년 3월 6일
• Screen Change & Component Style & Color Style
- Primary버튼에 컬러를 Color.js로 컴포넌트화 한다.
- 앱 시작화면 타이틀을 Title.js로 컴포넌트화 한다.
- GameScreen.js를 만들고 View와 Text로 기본 뼈대를 만들고 스타일을 적용한다.
- StartGameScreen의 Confirm 버튼에 조건을 걸고 Alert 반환하기
- App.tsx에도 useState 사용하고, 특정 조건만족시에 gameScreen으로 넘어가도록 하기.
- 변동 가능한 {screen} 화면 (시작화면, 혹은 게임화면)을 safeAreaView로 감싸서 출력해놓기.
2025년 3월 10일
• Game Screen RandomNum 게임 화면에서 랜덤 숫자 생성 기능 추가.
- NumberContainer 컴포넌트 만들기
- GameScreen에 랜덤숫자 로직 만들기
- useState로 랜덤숫자 상태관리하기. (최초, 현재 숫자들)
2025년 3월 12일
• lower & greater button and logic
- 숫자 추측을 위한 ‘높음’ 및 ‘낮음’ 버튼과 관련 로직 구현
2025년 3월 13일
- 게임 종료 화면 추가.
- 게임중 화면에 useEffect 사용해서 게임오버 화면으로 넘기기.
2025년 3월 18일
• ButtonStyle & AddIcon & fontChange
- StartGameScreen에 View로 감싸져있는 부분을 Card.js 파일 생성하고 스타일 적용.
- 타이틀 텍스트를 InstructionText.js 생성하고 스타일 적용.
- 폰트 적용하기
- 버튼에 아이콘 추가 및 스타일 변경.
- 게임 종료 화면의 스타일링 개선.
2025년 3월 19일
• Start New Game & roundNumber Logic
- 새로운 게임 시작 기능과 라운드 번호 로직 구현.
2025년 3월 22일
- GameScreen 하단 스크롤에 FlatList 적용하기
2025년 3월 23일
반응형 디자인을 위한 Dimension API 적용.
2025년 3월 29일
• Responsive & Dimension API All Pages
- 모든 페이지에 반응형 디자인과 Dimension API 적용.
- 플랫폼별 UI 및 상태 표시줄 개선.