ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [Javascript] 자바스크립 셀프 체크 - 3판 2선승제로 만들기
      Javascript 2023. 6. 2. 18:01
      반응형

      배운 내용 정리하기

       

      setInterval()

      setTimeout 과 비슷한 효과를 냅니다.

      다만, 한 번 실해되고 마는 setTimeout과는 다르게 지정한 시간마다 주기적으로

      지정한 함수를 실행합니다.

       

      사용법

      setInterval(() => {
	// 함수내용
}, 밀리초)

       

      clearInterval, clearTimeout

      각 setInterval, setTimeout를 실행하지 않도록 막는 함수이다.

      사용법

      let 아이디 = setInterval(함수, 밀리초);
clearInterval(아이디);
let 아이디 = setTimeout(함수, 밀리초);
clearTimeout(아이디);

       

      배열.includes

      ||를 사용

      diff === '바나나' || diff === '사과' || diff === '키위'
// 또는
['바나나','사과','키위'].includes(diff);

      한 코드는 배열의 includes 메서도로 반복을 줄일 수 있습니다. 다음 두 코드는 같은 동작 수행

       

      removeEventListener

      addEventListener로 연결한 함수로 removeEventListener로 제거할 수 있습니다.

      단, 연결할 때의 함수와 제거할 때의 함수가 같아야 합니다.

      function 함수() {
태그.addEventListener('이벤트', 함수)
태그.removeEventListener('이벤트', 함수)
}

       

      셀프체크 - 5판 3 선승제로 만들기

      문제 요구사항

      ■ 5판 3선승제, 3번 이긴 쪽이 최종 승리, 무승부 무효

      ■ Hint => 컴퓨터의 점수와 내 점수를 따로 계산

       

      코드 구현

      <!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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 id="scissors" class="btn">가위</button>
        <button id="rock" class="btn">바위</button>
        <button id="paper" class="btn">보</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 computerChioce = 'scissors';
        const changeComputerHand = () => {
            if (computerChioce === 'scissors') {  //가위일 때
                computerChioce = 'rock'; //바위로 바꿔준다.
                $computer.style.background = `url(${IMG_URL}) ${rspX.rock} 0`;
                $computer.style.backgroundSize = "auto 200px";
            } else if (computerChioce === 'rock') { //바위일 때
                computerChioce = 'paper'; //보로 바꿔준다.
                $computer.style.background = `url(${IMG_URL}) ${rspX.paper} 0`;
                $computer.style.backgroundSize = "auto 200px";
            } else {  //보일 때 rspX.computerChio
                computerChioce = 'scissors'; // 가위로 바꿔준다.
                $computer.style.background = `url(${IMG_URL}) ${rspX[computerChioce]} 0`;
                $computer.style.backgroundSize = "auto 200px";
            }
        }
        let intervaIld = setInterval(changeComputerHand, 50); //0.05초마다 바뀜

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

        // clickButton 5번 호출, 인터벌 1번, 2번, 3번, 4번, 5번(애만 intervaIld)
        // 그 다음에 버튼을 클리하면 5번만 취소
        let clickable = true;
        let scroe = 0;
        let user = 0;
        let com = 0;
        const clickButton = () => {
            if (clickable) {
                clearInterval(intervaIld); //타이머 제거(이미지 멈춤), 클릭하자마자 실행
                clickable = false;
                
                //점수 계산 및 화면 표시
                const myChoice = event.target.textContent === '바위'
                    ? 'rock'
                    : event.target.textContent === '가위'
                    ? 'scissors'
                    : 'paper';

                let message;
                // 2, -1은 승리조건, -2, 1은 패배조건, 점수표 참고
                const myScore = scoreTable[myChoice];
                const computerScore = scoreTable[computerChioce];
                const diff = myScore - computerScore;
                
                if ([2, -1].includes(diff)){
                    scroe += 1;
                    user += 1;
                    message = '승리!';
                } else if ([-2, 11].includes(diff)) {
                    scroe -= 1;
                    com += 1;
                    message = '패배!';
                } else {
                    message = '무승부!';
                }

                if(user >= 3 ) {
                    $score.textContent = `나의 승리 ${user}:${com}`;
                } else if (com >= 3) {
                    $score.textContent = `컴퓨터의 승리 ${user}:${com}`;
                } else {
                    $score.textContent = `${message} ${user}:${com}`;
                }
                setTimeout(() => { //1초 멈췄다가 다시 움직임
                    clickable = true;
                    intervaIld = setInterval(changeComputerHand, 50); //타이머마다 ID가 달라지므로, 달라진 ID 저장 필수
                }, 1000);

                console.log(
                    computerChioce, myChoice, myScore, computerChioce, diff, message
                );
            }
        };

        $rock.addEventListener('click', clickButton);
        $scissors.addEventListener('click', clickButton);
        $paper.addEventListener('click', clickButton);
    </script>
</body>

</html>

      게임 종료 시 이미지 멈추는 기능은 구현하지 못했다.

       

      결과 화면

      답 코드

                let message;
          //2, -1은 승리조건, -2, 1은 패배조건, 점수표 참고
          if ([2, -1].includes(diff)) {
            me += 1;
            message = "승리!";
          } else if ([-2, 1].includes(diff)) {
            computer += 1;
            message = "패배!";
          } else if (diff === 0) {
            message = "무승부!";
          }
          if (me >= 3) {
            $score.textContent = `나의 승리 ${me}:${computer}`;
          } else if (computer >= 3) {
            $score.textContent = `컴퓨터의 승리 ${me}:${computer}`;
            return;
          } else {
            //다음 타이머 실행 x
            $score.textContent = `${message} ${me}:${computer}`;
            setTimeout(() => {
              //1초 멈췄다가 다시 움직임
              clickable = true;
              intervalId = setInterval(changeComputerHand, 50); //타이머마다 ID가 달라지므로, 달라진 ID 저장 필수
            }, 1000);
          }
          console.log(
            computerChoice,
            myChoice,
            myScore,
            computerScore,
            diff,
            message
          );
        }
      };

      else 안에 setTimeout을 넣어서 게임이 끝나면 그림이 움직이지 않게 처리하였다.

       

      정답 화면

      출처

      https://url.kr/no9x64

       

       

       

       

      반응형

      'Javascript' 카테고리의 다른 글

      [JavaScript] 자바스크립트 8강 셀프 체크 - 속도 순으로 정렬하기  (0) 2023.06.06
      [Javascript] 자바스크립트 8장 Date 사용하기_반응속도 테스트  (0) 2023.06.05
      [JavaScript] 자바스크립트 객체 다루기 - 가위바위보 게임  (0) 2023.05.25
      [JavaScript] 자바스크립트 셀프 체크 - 공 색칠하기  (1) 2023.05.24
      [Javascript] 자바스크립트 블록, 함수 스코프, 클로저 문제  (0) 2023.05.23

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바