🚀 Start

랜덤으로 출력되는 가위바위보와 유저가 누른 것에 따라 승부를 판별하는 게임이다. 랜덤 그림 출력, 승부판별, 승무패 10회 출력, 모달창 구현을 하였다. 목업 툴을 통해 대략적으로 구상해본 화면이다.

✔️ 랜덤 출력

유저가 맞출 숫자를 4개의 난수로 생성해놔야한다.

1️⃣ setInterval : 주어진 시간 간격을 두고 changeHand 반복 실행

2️⃣ changeHand: 바위일때 가위로, 가위일때 보로, 보일때 바위로 변경

4️⃣ array.push(chosen): 숫자를 array 배열에 저장.

 useEffect(() => {
   
    console.log('다시 실행');
    interval.current = window.setInterval(changeHand, 100);
    return () => {
     
      console.log('종료');
      clearInterval(interval.current);
    };
  }, [imgCoord]);

...

  const changeHand = () => {
    if (imgCoord === rspCoords.바위) {
      setImgCoord(rspCoords.가위);
    } else if (imgCoord === rspCoords.가위) {
      setImgCoord(rspCoords.보);
    } else if (imgCoord === rspCoords.보) {
      setImgCoord(rspCoords.바위);
    }
  };

✔️ 승부 판별

1️⃣ clearInterval: 반복 타이머 초기화

2️⃣ myScore : scores배열에 유저가 선택한 값 저장.

3️⃣ cpuScore: 랜덤으로 변경되고 있던 값이 scores배열에 저장.

• computerChoice: 전달받은 imgCoord(랜덤지정된 가위바위이미지)와 rspCoords(가위,바위,보 고유값)이 같은지 확인. (TS에 대한 자세한 설명)
• 왜냐하면, 이미지에 가위,바위,보가 있지만 컴퓨터는 모르기 때문에 해당 이미지가 가위,바위,보의 고유값을 가지기 위하여.

const computerChoice = (imgCoords: ImgCoords) => { 
  return (Object.keys(rspCoords) as ['바위', '가위', '보']).find(k => {
    return rspCoords[k] === imgCoords;
  })!;

4️⃣ diff : 유저가 선택한 값 - 컴퓨터가 선택한 값

• 유저: 가위 선택 / 컴퓨터: 바위 선택

  • 가위(1) - 바위(0) = 1 (짐)

• 유저: 가위 선택 / 컴퓨터: 가위 선택

  • 가위(1) - 바위(1) = 0 (비김)

• 유저: 가위 선택 / 컴퓨터: 보 선택

  • 가위(1) - 바위(-1) = 2 (이김)

5️⃣ 승무패 누적 계산

const onClickBtn = (choice: keyof typeof rspCoords) => () => {
  
    clearInterval(interval.current); // 1️⃣ 번
    const myScore = scores[choice]; // 2️⃣ 번
    const cpuScore = scores[computerChoice(imgCoord)]; // 3️⃣ 번
    const diff = myScore - cpuScore; // 4️⃣ 번
  
    // 5️⃣ 번
    if (diff === 0) { 
      setDraw(prevScore => prevScore + 1);
    } 
    else if ([-1, 2].includes(diff)) {
      setResult('이겼습니다!  ');
      setWin(prevScore => prevScore + 1);
    } 
    else {
      setResult('졌습니다! ');
      setLose(prevScore => prevScore + 1);
    }
  
    setTimeout(() => {
      interval.current = window.setInterval(changeHand, 100);
      setResult('Click the Button ');
    }, 300);
  };

...
 <button onClick={onClickBtn('가위')}>✌️</button>
 <button onClick={onClickBtn('바위')}>✊</button>
 <button onClick={onClickBtn('보')}>🖐</button>

✔️ 시도횟수 & 모달창

• 앞서 누적된 승,무,패 값이 10이 되면 모달찰 출력. 즉, 기회는 10번.

     {win + draw + lose === 10 && (
        <Modal rsp={'가위바위보'} rspWin={win} rspDraw={draw} rspLose={lose} />
      )}

💡 모달창
: 모달창 하나를 재사용하기 위하여 게임마다 보여줘야할 결과를 props로 Modal컴포넌트에 전달한다.
자세히 👉 모달창 기능 구현

🖥 실제 구현 화면