가위바위보 part2

컴퓨터 손 빠르게 바꿔주기

let compupterRsp = "rock";
let intervalId;

const rspIcon = {
  rock: `<i class="far fa-hand-rock"></i>`,
  scissors: `<i class="far fa-hand-peace"></i>`,
  paper: `<i class="far fa-hand-paper"></i>`,
};

const changeComputerHandFast = () => {
  intervalId = setInterval(() => {
    if (compupterRsp === "rock") compupterRsp = "scissors";
    else if (compupterRsp === "scissors") compupterRsp = "paper";
    else if (compupterRsp === "paper") compupterRsp = "rock";
    $computerRspImg.innerHTML = `${rspIcon[compupterRsp]}`;
  }, 50);
};

1. 처음로딩시 컴퓨터 손은 rock 으로 지정해주었다
2. icon html코드를 object를 활용해 묶어주었다
3. 0.05초마다 손이 바뀌는 함수 만들어 주었다.
4. 자바스크립트 데이터를 변경시킨 뒤 - > 화면에 보여준다

사람이 손을 클릭했을 때

$rspBtnsContainer.addEventListener("click", (e) => {
  if (!playing) return;
  const tagName = e.target.tagName;
  const target = tagName === "I" ? e.target.parentNode : e.target;
  
  if (target.tagName !== "BUTTON") return;
  
  playing = false;
  const value = target.id;
  humanRsp = value;
  showRSP();
  clearInterval(intervalId);
  handleScore();
  showScore();
  
  if (computerScore >= 3 || humanScore >= 3) {
    finishGame();
    return;
  }
  setTimeout(() => {
    initGame();
  }, 1000);
});

1. 버튼들이 있는 div에 이벤트 리스너를 등록 해 주었다

• 사람이 클릭했을 때 icon을 클릭할수도 icon을 감싸고 있는 button을 클릭할 수도 있기 때문에 tagName을 활용해준다

2. div안에서 빈 곳을 클릭 할 수도 있기때문에 tagName이 button이 아니면 return 시켜줘 아래 코드들이 실행 되지 않게 해준다
3. playing이라는 flag 변수를 사용해 줬는데 사람이 선택후 1초 뒤 다시 컴퓨터 손이 돌아가기 전에 클릭 하는 경우를 방지하기 위함이다(앞 포스팅 참고)

• flag변수는 게임을 한번이 아닌 여러번 할 때도 유용하게 쓰인다

4. 클릭된 버튼의 id를 humanRSP 에 할당한다
5. computerRSP 와 humanRSP 를 화면에 보여준다 - > rspIcon 이때 유용하다
6. 누가 이겼는지 판단해주고
7. 점수를 화면에 보여준다
8. 둘 중 3점이 넘어가면 게임을 끝내고 return 해준다

• 버그가 발생 할 수 있기 때문에 범위를 넓혀서 ===3이 아닌 >=3으로 설정해 준다

reset 하기

const initGame = () => {
  playing = true;
  showScore();
  changeComputerHandFast();
};

const reset = () => {
  //여기 clearinterval 중요 !!
  clearInterval(intervalId);
  computerScore = 0;
  humanScore = 0;
};

$resetBtn.addEventListener("click", () => {
  reset();
  initGame();
});

1. reset 버튼 누르면 모든 값을 reset시킨 뒤 다시 게임을 실행시켜 준다

둘 중 3점 됬을때 게임 끝내기

const finishGame = () => {
  playing = false;
  const message = computerScore >= 3 ? "컴퓨터 승리 !" : "인간 승리 !";
  showPopUpWithText(message);
};

reset 에는 clearInterval 해주고 finishGame에서는 안해준 이유

• finishGame이 실행될때는 사람이 가위,바위,보 중 선택한 경우이다
  그래서 그때 interval이 제거가 되고 setTimeout도 실행되지 않는다
• 하지만 reset때는 돌아가는 도중 reset 시킬 수 있으니까 꼭 제거를 해줘야 한다

출처 Let's get it 자바스크립트 프로그래밍
UI 출처 -https://velog.io/@eunjin/Javascript-Toy-Project-Mini-Game-%EA%B0%80%EC%9C%84%EB%B0%94%EC%9C%84%EB%B3%B4-%EA%B2%8C%EC%9E%84-%EB%A7%8C%EB%93%A4%EA%B8%B0-%ED%86%A0%EC%9D%B4%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8