유저가 가위, 바위, 보 중에 선택을 하면 컴퓨터가 랜덤한 값으로 가위 바위 보를 낸다.
컴퓨터와 사용자의 각 스코어를 확인할 수 있도록 하였다.
문득 단순한 게임을 만들어보고 싶다는 생각이 들어 React를 활용해 만들어보았다.
원리 자체는 굉장히 단순하다보니 크게 만드는데 어려움은 없었으나
state관리를 위해 redux를 써볼까 한 걸 아직 적용을 못해보았다.
또한 중복되어 있는 코드들은 리팩토링을 할 필요가 있어보인다. 리팩토링 시 추가 커밋 예정.
- 가위바위보 게임 룰 적용
- 3선승제로 승리 또는 패배 시 결과 팝업
- 팝업창 종료 시 전체 초기화
- styled-components를 활용한 css
- 가장 궁금한 건 가위바위보 게임룰을 적용시키면서 생겼는데, 각자 승리조건을 단순화 시키는 방법을 모르겠다. 구글링을 해봐도 딱히 안나오는 거 같은데, 하드코딩을 하는 수 밖에 없었을까? 아직도 모르겠음
- 대략 6시간
- 추가 기능 구현 중 (11.13)
- result 값을 기준으로 특정 코멘트일 때 스코어가 올라가는 형태로 코딩을 했는데, 중복된 코멘트가 나올 경우(같은 경우의 수가 연달아 출력됐을 경우) Score합산이 이루어 지지 않는 버그가 발견됨. result값을 참조 배열로한 useEffect 를 사용해서 발생한 문제인데, 이에 대해서 해결책을 생각 중.
- 기존에는 useEffect를 통해 result값이 변경될 때마다 함수를 실행하는 형태를 취했으나, 이런 경우 result값의 변화가 없을 경우에는 함수가 실행되지 않는다는 단점이 있었다.
- 그런 이유로 result값이 결정될 때 플레이어가 승리했다면 increasePlayerScore를 패배했다면 increaseEnemyScore를 실행하도록 하였다.