티스토리 뷰

WEB/JavaScript

[제로초JS] chap7 가위바위보

Harimad 2022. 1. 13. 18:24 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>가위바위보</title>
  <style>
    #computer {
      width: 142px; height: 200px;
    }
  </style>
</head>
<body>
  <div id="computer"></div>
  <div>
    <button class="btn" id="scissors">가위</button>
    <button class="btn" id="rock">바위</button>
    <button class="btn" id="paper">보</button>
  </div>
  <div id="score">0</div>

  <script>
    const $computer = document.querySelector('#computer');
    const $score = document.querySelector('#score');
    const $rock = document.querySelector('#rock');
    const $scissors = document.querySelector('#scissors');
    const $paper = document.querySelector('#paper');
    const IMG_URL = './rsp.png';
    $computer.style.background = `url(${IMG_URL}) 0 0`;
    $computer.style.backgroundSize = 'auto 200px';

    const rspX = {
      scissors : '0',
      rock: '-220px',
      paper: '-440px',
    };
    
    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);

    //가위: 1, 바위: 0, 보: -1
    //나\컴퓨터   가위  바위  보
    //가위        0     1     2
    //바위        -1    0     1
    //보          -2    -1    0
    const scoreTable = {
      rock: 0,
      scissors: 1,
      paper: -1,
    };
    //버튼을 클릭하면 setInterval이 멈췄다가 1초 뒤에 다시 실행
    let clickable = true;
    let me = 0;
    let computer = 0;
    const clickButton = () => {
      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;
        if ([2, -1].includes(diff)) {
          me += 1;
          message = '승리';
        } else if ([-2, 1].includes(diff)) {
          computer += 1;
          message = '패배';
        } else {
          message = '무승부';
        }

        if (me >= 3) {
          $score.textContent = `나의 승리! me: ${me}, 컴: ${computer}`;
          return;
        } else if (computer >= 3) {
          $score.textContent = `컴퓨터 승리! me: ${me}, 컴: ${computer}`;
          return;
        } else {
          $score.textContent = `${message} me: ${me}, 컴: ${computer}`;
        }
      //점수 계산 및 화면 표시
        setTimeout(() => {
          clickable = true;
          intervalId = setInterval(changeComputerHand, 50);
        }, 1000);
      }
    };
    $rock.addEventListener('click', clickButton);
    $scissors.addEventListener('click', clickButton);
    $paper.addEventListener('click', clickButton);
  </script>
</body>
</body>
</html>
가위바위보
0

 

 

 

 

저작자표시 비영리 변경금지 (새창열림)

'WEB > JavaScript' 카테고리의 다른 글

[크롬 앱 만들기] #3.6 css in js | getter setter  (0) 2022.01.16
[제로초JS] chap8 반응속도테스트  (0) 2022.01.14
var와 let 차이 이해하기  (0) 2022.01.13
[제로초JS] chap6 타이머 사용한 로또추첨기  (0) 2022.01.13
[제로초JS] chap5. 숫자야구게임  (0) 2022.01.11
댓글
링크
다크모드
Document description javascript psychology
⬅
더보기 ,제목1 태그 호버