<html>
<head>
<meta charset="utf-8" />
<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}) -446px 0`;
$computer.style.backgroundSize = 'auto 200px';
let rspX = {
scissors: '0px',
rock: '-230px',
paper: '-446px'
}
let currentrsp = 'scissors'
let changersp = function () {
if (currentrsp === 'scissors') {
currentrsp = 'rock'
}
else if (currentrsp === 'rock') {
currentrsp = 'paper'
}
else if (currentrsp === 'paper') {
currentrsp = 'scissors'
}
$computer.style.background = `url(${IMG_URL}) ${rspX[currentrsp]} 0`;
$computer.style.backgroundSize = 'auto 200px'
}
let intervalID = setInterval(changersp, 50);
let clickable = true;
let scoretable = {
rock: 0,
scissors: 1,
paper: -1,
}
let score = 0;
let message
let clickbutton = (event) => {
if (clickable) {
clearInterval(intervalID)
clickable = false;
let myChoice = event.target.textContent
if (myChoice === '가위') {
myChoice = 'scissors'
}
else if (myChoice === '바위') {
myChoice = 'rock'
}
else if (myChoice === '보') {
myChoice = 'paper'
}
let myscore = scoretable[myChoice]
let computerscore = scoretable[currentrsp]
let diff = myscore - computerscore
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(changersp, 50);
}, 1000);
}
}
$rock.addEventListener('click', clickbutton)
$scissors.addEventListener('click', clickbutton)
$paper.addEventListener('click', clickbutton)
</script>
</body>
</html>setinterval, settimeout, clearinterval 메서드를 사용했다.
clearinterval을 사용할때는 setinterval을 id로 담아서 ()안에 넣어 사용한다.
또한 settimeout으로 setinterval을 다시 사용하고 싶을때 다시 id를 지정해야 다음 동작에서도 사용가능하다.
@banhogu