<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>
let result = condition ? value1 : value2;
condition true면 value1 아닐경우 value2 실행
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