TIL-18 JS로 가위 바위 보 게임 만들기

PRB·2021년 7월 21일
0

JavaScript

목록 보기
11/24
post-thumbnail
<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.backgroundSize = 'auto 200px'
        const rspX = {
            scissors: '0', // 가위 
            rock: '-220px', // 바위
            paper: '-440px' // 보
        }
        let computerRsp = 'scissors'
        const changeRsp = () => { // 컴퓨터 돌아하는 
            if (computerRsp === 'scissors'){
                computerRsp = 'rock'
            }
            else if(computerRsp === 'rock'){
                computerRsp = 'paper'
            }
            else if(computerRsp === 'paper'){
                computerRsp = 'scissors'
            }
            $computer.style.background = `url(${IMG_URL}) ${rspX[computerRsp]} 0`
            $computer.style.backgroundSize = 'auto 200px'
        } 
        let intervalId = setInterval(changeRsp, 50)
        const scoretable = {
            rock: 0,
            scissors: 1,
            paper: -1,
        }
        let score = 0
        const clickButton = () => {
            clearInterval(intervalId);
            $rock.removeEventListener('click', clickButton)
            $scissors.removeEventListener('click', clickButton)
            $paper.removeEventListener('click', clickButton)
            const myChoice = event.target.id
            let myScore = scoretable[myChoice];
            let computerScore = scoretable[computerRsp];
            const diff = myScore - computerScore;
            let message;
            if ([2, -1].includes(diff)) {
                score += 1;
                message = '승리'
            }
            else if ([-2,1].includes(diff)) {
                score -= 1;
                message = '패배'
            }
            else {
                message = '무승부'
            }
            $score.textContent = `${message} 총: ${score}`;
            setTimeout(() => {
                intervalId = setInterval(changeRsp, 50)
                $rock.addEventListener('click', clickButton)
                $scissors.addEventListener('click', clickButton)
                $paper.addEventListener('click', clickButton)
            }, 600)
        }
        $rock.addEventListener('click', clickButton)
        $scissors.addEventListener('click', clickButton)
        $paper.addEventListener('click', clickButton)

    </script>
</body>

알게 된 점

1. 조건부 연산자 ‘?’

let result = condition ? value1 : value2;

condition true면 value1 아닐경우 value2 실행

2. 템플릿 리터럴

var name = '아이폰' var price = 500 var num = 10; 
`${name}의 구매가는 ${price * num}원 입니다.`

참고사이트
https://www.youtube.com/watch?v=6j_g9O0sxkI&list=PLcqDmjxt30RvEEN6eUCcSrrH-hKjCT4wt&index=65
https://ko.javascript.info/ifelse
https://curryyou.tistory.com/185

profile
사용자 입장에서 사용자가 원하는 것을 개발하는 프론트엔드 개발자입니다.

0개의 댓글