1. HTML 세팅하기

2. 컴퓨터가 가위바위보 선택하기

setInterval(()=>{
      if(computerChoice === 'scissors') {
          computerChoice = 'rock';
      } else if(computerChoice === 'rock') {
          computerChoice = 'paper';
      } else {
          computerChoice = 'scissors';
      }
      $computer.style.background = `url(${IMG_URL}) ${rspX[computerChoice]} 0`;
      $computer.style.backgroundSize = 'auto 200px'; 
}, 50);

let intervalId = setInterval(changeComputerHand, 50);

1. style.background는 항상 style.backgroundsize와 함께 써주는 것이 좋다.
2. rspx[computerChoice] ≠ rspx.computerChoice

• rspx[ ] 의 괄호 자리는 값/변수(변수를 넣으면 어차피 값이 들어감)이 들어가야 한다. 따라서 해당 상황의 경우에는 rspx.computerChoice 를 하면 문자열이 들어간다. (rspX["computerchoice"]와 같은 상황).

1. setInterval 함수의 반환값은 타이머 아이디이며, clearInterval(아이디)를 하면 타이머가 제거된다.
2. setTimeout 함수의 반환값은 타이머 아이디이며, 역시 clearTimeout(아이디)를 하면 타이머가 제거된다.

const clickButton = () => {
      clearInterval(intervalId);
      setTimeout(()=> {
      clearInterval(intervalId);
      intervalId = setInterval(changeComputerHand, 50);
      }, 1000);
};
$rock.addEventListener('click', clickButton);
$scissors.addEventListener('click', clickButton);
$paper.addEventListener('click', clickButton);

3. 점수 계산하기

(1) 가위바위보 숫자화

const scoreTable = {
      scissors : 1,
      rock : 0,
      paper : -1,
}

(2) 승/패/무승부 결정

const myChoice = event.target.textContent ==='바위' ? 'rock' : 
     event.target.textContent ==='가위' ? 'scissors' : 'paper';
            
const diff = scoreTable[myChoice] - scoreTable[computerChoice];

if (diff === 2 || diff === -1) {
   console.log('승리');
} else if (diff === -2 || diff === 1 ){
   console.log('패배');
} else {
   console.log('무승부')
}