안녕하세요 느종입니다.
지난 시간에는 숫자 야구 게임에 사용한 각종 변수들을 작성하였고, 초기화 함수, 랜덤 숫자 함수, 정답인지 체크하는 함수, 게임이 끝났을 때 실행되는 함수 등 각종 함수들에 대해서 살펴보았는데요. 오늘은 나머지 함수들과 클릭 리스너 등에 대해서 코드를 작성해 보도록 하겠습니다. 함께 공부해요!
1. 자바스크립트 코드
startBtn.addEventListener("click", function() { : 시작하기 버튼을 클릭했을 때 실행 되는 함수입니다.
startPage.classList.add("hidden") : 시작 페이지가 사라져야 하므로 hidden class를 추가합니다.
endPage.classList.add("hidden") : 끝 페이지가 보이면 안 되므로 hidden class를 추가합니다.
reStartBtn.addEventListener("click", function() { : 다시 시작하기 버튼을 클릭했을 때 실행 되는 함수입니다.
startPage.classList.remove("hidden") : 시작 페이지가 다시 나타나야 되므로 hidden class를 삭제합니다.
endPage.classList.add("hidden") : 끝 페이지가 사라져야 하므로 hidden class를 추가합니다.
init() : 게임을 다시 시작하기 위해서 모든 변수와 함수를 초기화하는 함수인 init()를 실행합니다.
for(let i=0; i<btnGroup.length; i++) { : 숫자 패드 그룹에 클릭 이벤트를 추가하기 위하여 반복문을 사용합니다.
btnGroup[i].addEventListener("click", function() { : 모든 숫자 패드 그룹에 클릭 이벤트를 추가합니다.
if (inputNumber.length < 4) { : 입력한 숫자가 4자리를 초과하면 더 이상 클릭이 되지 않게 하기 위한 코드입니다.
currentNum = btnGroup[i].textContent : 현재 숫자 패드의 숫자를 넣는 변수입니다.
btnGroup[i].style.background = "#ddd" : 클릭한 숫자 패드의 배경색을 바꿉니다.
btnGroup[i].disabled = true : 클릭한 숫자 패드는 더 이상 클릭이 되지 않도록 변경합니다.
if(inputNumber.length < 4 && !inputNumber.includes(currentNum)) { : 입력한 숫자가 4자리 리 미만이고, 현재 입력한 숫자가 기존에 입력한 숫자에 포함되어 있지 않다면
inputNumber.push(currentNum) : inputNumber 배열에 현재 클릭한 숫자를 추가합니다.
numberDisplay.textContent = inputNumber.join(" ") + " _".repeat(4 - inputNumber.length) : 숫자를 보여주는 화면에 입력한 숫자가 나타나도록 추가합니다.
confirmBtn.addEventListener("click", function() { : 정답 확인 버튼에 클릭 리스너를 추가합니다.
if (inputNumber.length < 4) { : 입력한 숫자가 4자리 미만일 때
alert("숫자 4개를 입력해주세요!") : 알림 창으로 "숫자 4개를 입력해주세요!" 문구를 표시합니다.
return : return을 통해서 함수 밖으로 나갑니다.
const [strike, ball] = checkFunc() : 저번 시간에 살펴본 체크 함수의 값을 배열 쌍으로 입력합니다.
const li = document.createElement("li") : 사용자가 확인한 결과가 리스트로 표시되어야 하므로 li 태그를 생성합니다.
li.textContent = inputNumber.join("") + " → " +strike + "S " + ball + "B" : 입력한 숫자 배열과 확인한 결과를 li 태그에 추가합니다.
logList.appendChild(li) : 생성하고 값을 입력한 li 태그를 확인한 결과를 담는 logList에 추가합니다.
if (strike === 4) { : strike가 4개 라면(정답일 경우)
setTimeout(() => { : 약간의 시간차를 두기 위해서 사용합니다.
endFunc("success") : 결과 함수에 success 문구를 추가하여 실행합니다.
}, 500) : 0.5초 정도의 시간차를 발생합니다.
count-- : 숫자 야구 게임에 주어진 기회를 1 차감합니다.
countDisplay.textContent = count : 차감 된 숫자를 업데이트합니다.
if(strike !== 4 && count === 0) { : strike가 4가 아니면서 모든 기회를 소진했을 때
endFunc("fail") : 결과 함수에 fail 문구를 추가하여 실행합니다.
btnGroupReset() : 정답 확인 버튼을 눌렀을 경우에 모든 숫자 패드 버튼을 초기화합니다.
clearBtn.addEventListener("click", function() { : 지우기 버튼을 클릭했을 때 발생하는 함수입니다.
btnGroupReset() : 모든 숫자 패드 버튼을 초기화합니다.
init() : 처음 게임을 실행할 때 초기화 함수를 실행합니다.
2. 결론 & 관련 글
총 4번의 포스팅을 통해 숫자 야구 게임을 완성했습니다. 어렸을 때 펜과 종이로 친구들과 자주 하던 게임이었는데 이렇게 자바스크립트를 통해서 제작을 해보니 기분이 새롭네요. 지금은 기본 베이스로 간단하게 제작을 하였지만 1인용이 아닌 다인용으로 개발하거나, 기회 방식을 변경하거나, 숫자가 아닌 다른 형식으로 개발을 해봐도 재밌을 것 같습니다. 다음 시간에는 어떤 콘텐츠를 제작할지 아직 모르겠지만 금방 포스팅을 작성하도록 하겠습니다.
👉 관련 글: