야구 전광판 만들기
1. 스트라이크 3개면 아웃 1개 카운트
이때 스트라이크와 볼 카운트는 0으로 초기화
2. 볼 4개면 스트라이크와 볼 카운트 0으로 초기화
3. 아웃카운트 3개면 스트라이크, 볼 버튼 비활성화
요소.disabled = true; // 비활성화
요소.disabled = false; //활성화
4. 아웃카운트 3개면 재시작 버튼 보임
요소를 보이게 하는 법 : 요소.style.display = "inline";
요소를 숨기는 법 : 요소.style.display = "none";
5. 재시작 버튼을 누르면 스트라이크, 볼 버튼 활성화
모든 카운트는 0으로 초기화, 재시작 버튼 숨김
<!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>
</head>
<body>
<button id="strike">Strike</button>
<button id="ball">Ball</button>
<button id="restart" style="display:none">재시작</button>
<br>
S:<b id="s">0</b><br>
B:<b id="b">0</b><br>
O:<b id="o">0</b><br>
</body>
<script>
const st = document.querySelector("#strike");
const ba = document.querySelector("#ball");
const re = document.querySelector("#restart");
const cs = document.querySelector("#s");
const cb = document.querySelector("#b");
const co = document.querySelector("#o");
let sn = 0;
let bn = 0;
let on = 0;
st.addEventListener("click", () => {
sn++;
cs.innerHTML = sn;
if (sn >= 3) {
alert("스트라이크 아웃!");
on++;
co.innerHTML = on;
resetS_B();
// bn = 0;
// cb.innerHTML = bn;
// sn = 0;
// cs.innerHTML = sn;
}
if (on >= 3) {
alert("게임 over!");
st.disabled = true;
ba.disabled = true;
re.style.display = "inline";
}
});
ba.addEventListener("click", () => {
bn++;
cb.innerHTML = bn;
if (bn >= 4) {
alert("볼입니다.")
resetS_B();
// bn = 0;
// cb.innerHTML = bn;
// sn = 0;
// cs.innerHTML = sn;
};
});
re.addEventListener("click", () => {
resetS_B();
// bn = 0;
// cb.innerHTML = bn;
// sn = 0;
// cs.innerHTML = sn;
on = 0;
co.innerHTML = on;
st.disabled = false;
ba.disabled = false;
re.style.display = "none";
});
// 겹치는 부분 함수로 만들기
function resetS_B() {
bn = 0;
cb.innerHTML = bn;
sn = 0;
cs.innerHTML = sn;
}
</script>
</html>'공부기록 > 실습' 카테고리의 다른 글
| 3월 23일 (2) AJAX 정보 받아서 표로 만들기 (0) | 2023.03.23 |
|---|---|
| 3월 23일 (1) 웹 사이트 따라서 만들기 (0) | 2023.03.23 |
| 3월 10일 반 별 성적 관리 프로그램 (0) | 2023.03.15 |
| 연습 문제 2. 윤년 계산기 만들기 (0) | 2023.03.08 |
| 연습 문제 1. 합격 여부 계산하기 (0) | 2023.03.08 |
