가위 바위보(3개가아닌 5개.)

사이트 데모

강의

html에서 onclick이벤트를 주고 js에서 그에 맞는 함수 생성.
<i class="far fa-hand-rock" title="Rock" id="playerRock"></i>

//선택을 바도 아이콘 변화
function select(playerChoice) {
  checkResult(playerChoice);
  //선택, 스타일과 텍스트 전달.
  switch (playerChoice) {
    case 'rock':
      playerRock.classList.add('selected');
      playerChoiceEl.textContent = ' --- 바위';
      break;
    case 'paper':
      playerPaper.classList.add('selected');
      playerChoiceEl.textContent = ' --- 보';
      break;
    case 'scissors':
      playerScissors.classList.add('selected');
      playerChoiceEl.textContent = ' --- 가위';
      break;
    case 'lizard':
      playerLizard.classList.add('selected');
      playerChoiceEl.textContent = ' --- 도마뱀';
      break;
    case 'spock':
      playerSpock.classList.add('selected');
      playerChoiceEl.textContent = ' --- 스팍';
      break;
    default:
      break;
  }
}

스위치 케이스 문 활용.
윈도우의 기본 선택을 이 선택 기능으로 할당.
window.select = select;

컴퓨터가 5개중에 랜덤 선택하게 하기.

-- math.random으로 얻은 난수를 조건문으로 선택하게 하기.

  const computerChoiceNumber = Math.random();
  if (computerChoiceNumber < 0.2) {
    computerChoice = 'rock';
  } else if (computerChoiceNumber <= 0.4) {
    computerChoice = 'paper';

승패 결과 출력. 점수 확인.

승패의 경우를 객체로 저장.

const choices = {
  rock: { name: 'Rock', defeats: ['scissors', 'lizard'] },
  paper: { name: 'Paper', defeats: ['rock', 'spock'] },
  scissors: { name: 'Scissors', defeats: ['paper', 'lizard'] },
  lizard: { name: 'Lizard', defeats: ['paper', 'spock'] },
  spock: { name: 'Spock', defeats: ['scissors', 'rock'] },
};

const choice = choices[playerChoice];
만약 유저가 선택한 값 (choice)에 대해.

컴퓨터가 낸 선택이
if (choice.defeats.indexOf(computerChoice) > -1) {
defeats의 값에 없다면 승리.
있으면 유저의 패배다.

// 결과 확인 점수증가 승패 결과 출력.
function updateScore(playerChoice) {
  if (playerChoice === computerChoice) {
    resultText.textContent = "비겼습니다.";
  } else {
    const choice = choices[playerChoice];
    if (choice.defeats.indexOf(computerChoice) > -1) {
      startConfetti();
      resultText.textContent = '이겼습니다.';
      playerScoreNumber++;
      playerScoreEl.textContent = playerScoreNumber;
    } else {
      resultText.textContent = '졌습니다.';
      computerScoreNumber++;
      computerScoreEl.textContent = computerScoreNumber;
    }
  }
}

추가기능 사용

색종이가 떨어지는 애니메이션 (confetti)
필수적인 건 아니다.