가위바위보 (html / js)

가위바위보 게임을 하려고 합니다.

절차

프로그래밍 사고

시작

->컴퓨터카 가위바위보를 연속해서 낸다.
->게이머가 가위바위보를 선택하여 버튼을 누른다.
->게이머가 버튼을 누르면 컴퓨터의 가위바위보와 비교를 한다.
->누가 이겼는지 알려준다.
->다시 진행한다

---

코드

• 컴퓨터카 가위바위보를 연속해서 낸다.

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

let intervalId = setInterval(changeComputerHand, 50);

• 게이머가 가위바위보를 선택하여 버튼을 누른다.

$rock.addEventListener('click', clickButton);
$scissors.addEventListener('click', clickButton);
$paper.addEventListener('click', clickButton);

• 게이머가 버튼을 누르면 컴퓨터의 가위바위보와 비교를 한다.

let clickable = true;
let score = 0;
const clickButton = (event) => {
  if (clickable) {
    clearInterval(intervalId);
    clickable = false;
    // 점수 계산 및 화면 표시
    const myChoice = event.target.textContent === '바위'
      ? 'rock'
      : event.target.textContent === '가위'
        ? 'scissors'
        : 'paper';
    const myScore = scoreTable[myChoice];
    const computerScore = scoreTable[computerChoice];
    const diff = myScore - computerScore;

    let message;
    // 2, -1은 승리조건이고, -2, 1은 패배조건, 점수표 참고
    if ([2, -1].includes(diff)) {
      score += 1;
      message = '승리';
    } else if ([-2, 1].includes(diff)) {
      score -= 1;
      message = '패배';
    } else {
      message = '무승부';
    }
  }
};

• 누가 이겼는지 알려준다.

$score.textContent = `${message} 총: ${score}점`;

• 다시 진행한다

setTimeout(() => {
  clickable = true;
  intervalId = setInterval(changeComputerHand, 50);
}, 1000);

---

더 나아가기

• 컴퓨터와 가위바위보를 해서 5판 3선 승제로 게임을 끝내기

if (gamerWin >= 3) {
    $score.textContent = `승리! 축하드립니다.`
} else if (pcWin >= 3) {
    $score.textContent = `패배! 인공지능의 시대!`
} else {
    $score.textContent = `${message}! ${gamerWin} : ${pcWin}`;
    setTimeout(() => {
        clickable = true;
        intervalId = setInterval(changeComputerHand, 50);
    }, 1000);
}

화면

소스코드(github)
링크텍스트

출처 "ZeroCho TV"
링크텍스트