<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Baseball Game!!!</title>
</head>
<body>
<button id="strike">Strike</button>
<button id="ball">Ball</button>
<button id="restart" style="display:none">
재시작
</button>
<br />
B:<b id="b">0</b><br />
S:<b id="s">0</b><br />
O:<b id="o">0</b><br />
<script>
// 1. 버튼에 클릭 이벤트 부여
// 2. 버튼 클릭 시 정상 작동 여부
// 3. 4볼일때 정상적으로 초기화
// 4. 3스트라이크 일 때 정상적으로 아웃 및 초기화
// 5. 3 아웃일 때 게임 종료 및 재시작 display
// 6. 재시작 버튼 클릭 시 초기화 되는지
let strkcount = 0;
let ballcount = 0;
let outcount = 0;
// 스트라이크
let strk = document.getElementById('strike');
strk.addEventListener('click', function () {
strkcount += 1;
if (strkcount == 3) {
document.getElementById('s').innerHTML = 0;
document.getElementById('b').innerHTML = 0;
outcount += 1;
if (outcount == 3) {
document.getElementById('s').innerHTML = 0;
document.getElementById('b').innerHTML = 0;
outcount = 0;
strk.style.opacity = '0.6';
strk.style.cursor = 'not-allowed'
strk.style.pointerEvents = 'none';
bl.style.opacity = '0.6';
bl.style.cursor = 'not-allowed'
bl.style.pointerEvents = 'none';
restart.style.display = "inline";
}
document.getElementById('o').innerHTML = outcount;
strkcount = 0;
}
document.getElementById('s').innerHTML = strkcount;
});
// 볼
let bl = document.getElementById('ball');
bl.addEventListener('click', function () {
ballcount += 1;
if (ballcount == 4) {
document.getElementById('s').innerHTML = 0;
document.getElementById('b').innerHTML = 0;
outcount += 1;
if (outcount == 3) {
document.getElementById('s').innerHTML = 0;
document.getElementById('b').innerHTML = 0;
outcount = 0;
strk.style.opacity = '0.6';
strk.style.cursor = 'not-allowed'
strk.style.pointerEvents = 'none';
bl.style.opacity = '0.6';
bl.style.cursor = 'not-allowed'
bl.style.pointerEvents = 'none';
restart.style.display = "inline";
}
document.getElementById('o').innerHTML = outcount;
ballcount = 0;
}
document.getElementById('b').innerHTML = ballcount;
})
// 재시작
let rstrt = document.getElementById("restart");
rstrt.addEventListener('click', function () {
strk.style.opacity = '1';
strk.style.cursor = 'auto'
strk.style.pointerEvents = 'all';
bl.style.opacity = '1';
bl.style.cursor = 'auto'
bl.style.pointerEvents = 'all';
restart.style.display = "none";
})
</script>
</body>
</html>
Front-End/연습문