안녕하세요 느종입니다.
저번 시간까지 HTML, CSS를 가지고 숫자 야구 게임의 외형을 만들어 보았습니다. 오늘은 게임을 할 수 있도록 내부적인 기능과 함수에 대해서 코드를 작성해 보도록 하겠습니다. 저는 되도록이면 바닐라 자바스크립트로 코드를 작성하지만 jQuery를 사용하셔도 상관없습니다. 함께 공부해요!
1. 자바스크립트 코드
startPage : 시작 화면 페이지를 담는 변수입니다.
startBtn : 시작하기 버튼을 담는 변수입니다.
endPage : 끝 화면 페이지를 담는 변수입니다.
restartBtn : 다시 시작하기 버튼을 담는 변수입니다.
numberDisplay : 숫자를 보여주는 화면을 담는 변수입니다.
countDisplay : 기회를 보여주는 화면을 담는 변수입니다.
btnGroup : 숫자 패드의 버튼 그룹을 담는 변수입니다.
clearBtn : 지우기 버튼을 담는 변수입니다.
confirmBtn : 확인 버튼을 담는 변수입니다.
logList : 사용자가 확인한 결과가 리스트로 표시되는 화면을 담는 변수입니다.
inputNumber : 사용자가 입력한 숫자를 담는 변수입니다.
correct : 정답 숫자를 담는 배열입니다.
count : 남은 기회를 담는 변수입니다.
init() : 초기화 함수입니다.
correct = [] : 정답 배열인 correct를 초기화해 줍니다.
count = 7 : 남은 기회도 다시 7로 초기화해 줍니다.
countDisplay.textContent = count : 초기화해 준 기회 변수를 화면에 나타냅니다.
logList.innerHTML = "" : 사용자가 확인한 숫자 리스트 내역을 초기화합니다.
btnGroupReset() : 숫자 패드 버튼 그룹도 초기화해 줍니다.
correct = randomNumber() : 정답 배열에 임의적인 4자리 숫자를 넣습니다.
randomNumber() : 0부터 9까지의 숫자 중에서 임의적으로 4개의 숫자를 뽑아서 4자리의 정답 숫자를 만드는 함수입니다.
let baseBallNumberArr = [] : 숫자 야구 게임 정답이 들어갈 임시 변수입니다.
while(baseBallNumberArr.length < 4) { : while문을 통해서 정답의 배열이 4자리가 될 때까지 반복문을 돕니다.
let rand = (Math.floor(Math.random() * 10)).toString() : 0부터 9까지의 숫자 중에 임의적으로 하나의 숫자를 뽑고 형식을 문자로 바꿔줍니다.
if(!baseBallNumberArr.includes(rand)) : 4자리의 정답 숫자에는 같은 숫자가 있으면 안 되기 때문에 방금 뽑은 숫자가 지금 배열에 있는지를 검사합니다.
baseBallNumberArr.push(rand) : 방금 뽑은 숫자가 지금 배열에 없다면 추가합니다.
return baseBallNumberArr : 임시 배열을 리턴합니다.
checkFunc() : 사용자가 입력한 숫자가 정답 숫자와 얼마나 일치하는지 검사하는 함수입니다.
let strike = 0 : 스트라이크 변수를 만들고 0으로 초기화해 줍니다.
let ball = 0 : 볼 변수를 만들고 0으로 초기화해 줍니다.
for(let i=0; i<inputNumber.length; i++) { : 사용자가 입력한 숫자 길이만큼 반복문을 돕니다.
if(inputNumber[i] === correct[i]) { : 사용자가 입력한 숫자와 정답의 숫자가 위치와 값 모두 일치할 경우
strike++ : 스트라이크 변수에 1을 더합니다.
} else if(correct.includes(inputNumber[i])) { : 사용자가 입력한 숫자와 정답의 숫자가 값은 있는데 위치가 일치하지 않을 때
ball++ : 볼 변수에 1을 더합니다.
return [strike, ball] : 스트라이크와 볼 변수를 쌍으로 하여 배열로 리턴합니다.
endFunc(res) : 숫자 야구 게임이 모두 끝났을 경우 실행되는 함수입니다.
endPage.classList.remove("hidden") : 끝 화면에서 hidden 클래스를 삭제합니다.
if(res === "success") { : 결과가 정답을 맞힌 경우 일 때
endPage.querySelector("h1").textContent = "성공" : 성공 문구를 보여줍니다.
endPage.querySelector("p").textContent = "🎉 정답입니다! [ " + correct.join(" ") + " ]" : 정답입니다! 문구와 함께 정답을 한번 더 보여줍니다.
} else if(res === "fail") { : 결과가 정답을 맞히지 못했을 경우 일 때
endPage.querySelector("h1").textContent = "실패" : 실패 문구를 보여줍니다.
endPage.querySelector("p").textContent = "💀 오답입니다! 다시 도전해주세요!" : 오답입니다 문구와 다시 도전해 주세요 문구를 보여줍니다.
btnGroupReset() : 숫자 패드 버튼 그룹을 초기화 하는 함수입니다.
inputNumberResest() : 사용자가 입력한 숫자도 초기화해 줍니다.
for(let i=0; i<btnGroup.length; i++) { : 숫자 패드 버튼 수만큼 반복문을 돕니다.
btnGroup[i].style.background = "#8f7a66" : 초기 색상으로 변경합니다.
btnGroup[i].disabled = false : 다시 클릭이 가능하도록 변경합니다.
inputNumberResest() : 사용자가 입력한 숫자와 화면을 초기화하는 함수입니다.
inputNumber = [] : 입력한 숫자를 초기화해 줍니다.
numberDisplay.textContent = "_ _ _ _" : 입력한 숫자가 나타나는 화면도 초기 모습으로 변경합니다.
2. 결론 & 관련 글
이번 시간에는 숫자 야구 게임 제작에 사용한 변수들과 초기화 함수, 리셋 함수, 랜덤 함수 등 여러 함수들에 대해서 코드를 작성해 보았습니다. 추후에 1인용이 아닌 2인용으로 게임을 확장시켜도 재밌을 것 같습니다. 다음 시간에는 나머지 함수들과 클릭 리스너 등에 대해서 코드를 작성해 보도록 하겠습니다. 다음 시간에 만나요!
👉 관련 글: