[형, 채강임] 3주차 결과
목표
- [인프런] 웹 게임을 만들며 배우는 React강좌 부분 듣기
사진
총 24강의(3개 게임) 수강 완료
숫자야구
![]() |
![]() |
![]() |
![]() ![]() |
![]() ![]() |
총 10회의 도전 기회를 주고 현재 시도한 횟수를 알려준다. 그리고 해당 숫자의 스트라이크와 볼을 S와 B로 각각 알려준다. 4개의 숫자를 맞추면 '홈런!!!'이라는 경고창이 뜬 후 새로운 숫자야구 게임이 생성되며 '홈런!'이라는 문구가 상단에 노출된다. 4개의 숫자를 틀리면 '게임을 다시 시작합니다.'라는 경고창이 뜬 후 동일하게 새로운 게임이 생성되고 '시도 횟수 10회 초과! 정답'을 상단에 노출하고 게임을 재개합니다.
반응 속도 체크
![]() |
![]() |
![]() |
![]() |
![]() |
시작하기 전 '클릭해서 시작을 하세요.' 문구를 띄우며 초기 상태를 유지한다. 클릭을 하면 빨간 배경과 '초록색이 되면 클릭하세요.' 문구를 띄우고 연두색이 되면 흘러가는 시간을 잰 후 클릭이 끝나면 나온 시간을 하단에 노출한다. 만약 빨간색인 준비상태에서 클릭을 하게 되면 '예측 금지' 문구를 띄어 다시 시작하도록 한다.
가위바위보
가위바위보가 랜덤으로 발생하는 도중에 '바위', '가위', '보' 중 하나를 클릭하면 잠시 멈춘 뒤 그 행동과 버튼의 대결구도와 비교한 후 '승리', '무승부', '패배'를 띄우게 된다. 이후 승리하면 +1점, 패배하면 -1점, 무승부면 변동 없는 구조로 현재 점수를 최하단에 표시한다.
느낀점
- 이제는 webpack에 대한 이해를 저번 주보다 확실히 잡고 간 것 같다. 또한 React에서 Class 버전과 Hooks 버전 두 가지를 이용하여 게임을 만드는 연습을 하고 있어서 보다 React구조에 더 빠르게 다가갈 수 있는 것 같다.