자바스크립트 숫자 야구 게임 만들기 — Bulls & Cows 완벽 튜토리얼
이 글에서는 자바스크립트(JavaScript)를 이용해 고전 게임인 숫자 야구(Bulls and Cows)를 직접 구현해보겠습니다. 이 프로젝트는 변수, 반복문, 조건문, 이벤트 리스너 등 기본기를 종합적으로 익히는 데 매우 적합합니다. 이 게임을 자바스크립트로 만들게 된 계기는 어렸을 적에 친구들끼리 펜과 종이만 있으면 어디서든 재미있게 했었던 기억이 있습니다. 이제는 종이와 펜이 없더라도 PC나 폰으로 언제 어디서든 숫자 야구 게임을 즐길 수 있도록 하기 위해 만들게 되었습니다.
1. 숫자 야구 게임이란?
숫자 야구 게임은 컴퓨터가 임의로 생성한 4자리 숫자를 사용자가 추측하는 게임입니다. 각 자릿수는 중복되지 않으며, 숫자와 위치가 모두 일치하면 Strike, 숫자만 맞고 위치가 다르면 Ball로 판정됩니다.
사용자가 1356을 입력하면 → 1 Strike, 1 Ball
2. 기본 HTML 구조 만들기
먼저 HTML에서 입력창, 숫자 패드 버튼, 확인 버튼, 결과 표시 영역을 구성합니다. 사용자가 숫자 패드로 숫자를 입력하면 상단 디스플레이에 입력한 숫자가 표시 되고, 확인 버튼을 누르게 되면 결과 표시 영역에서 결과를 확인할 수 있습니다.
3. JavaScript 로직 작성하기
이제 핵심 로직을 작성해보겠습니다.
전체 코드는 혹시라도 원하시는 분이 있으면 올리도록 하겠습니다.
randomNumber()은 게임을 시작할 때 실행되는 함수이고, 4자리의 랜덤한 숫자를 배열로 저장합니다.
checkFunc()은 사용자가 입력한 숫자와 정답의 숫자를 비교하여 결과를 리턴해줍니다.
확인 버튼을 누르게 되면 리턴 받은 결과를 결과 표시 영역에 리스트로 추가합니다.
// 1. 랜덤 숫자 4자리 생성
function randomNumber() {
let baseBallNumberArr = [];
while(baseBallNumberArr.length < 4) {
let rand = (Math.floor(Math.random() * 10)).toString();
if(!baseBallNumberArr.includes(rand))
baseBallNumberArr.push(rand);
}
return baseBallNumberArr;
}
const correct = randomNumber();
// 2. 검사 함수
function checkFunc() {
let strike = 0;
let ball = 0;
for(let i=0; i {
endFunc("success");
}, 500);
}
count--;
countDisplay.textContent = count;
if(strike !== 4 && count === 0) {
setTimeout(() => {
endFunc("fail");
}, 500)
}
btnGroupReset();
});
4. 완성 화면 예시
숫자 패드를 이용하여 입력란에 숫자를 입력하고 확인 버튼을 누르면, 결과 영역에 Strike과 Ball 수가 표시됩니다. 그냥 제한없이 하면 재미없으니깐 게임을 할 수 있는 횟수 제한을 두었습니다. 모든 자리를 맞히면 “정답입니다!” 문구와 함께 팝업창이 나타납니다. 다시 하기 버튼을 눌러서 다시 게임을 시작 할 수 있습니다. 주어진 횟수안에 정답을 맞히지 못하면 "실패입니다!" 문구와 함께 팝업창이 나타납니다.
5. 응용 아이디어
- 시도 횟수 제한 설정으로 난이도 조절 - easy / normal / hard 모드로 만든 후 각각 횟수를 5 / 7 / 9 이런식으로 설정해주면 난이도 조절을 적용할 수 있습니다.
- 난이도 선택 (3자리 / 5자리) - 지금은 4자리 숫자로 하였지만, 3자리나 5자리로 확장하면 이것도 난이도 조절을 적용할 수 있습니다.
- 점수 시스템으로 발전시키기 - 지금은 맞추기까지만 구현되어 있는데 Strike를 더 빨리 맞출 수록 높은 점수를 받을 수 있도록 적용하면 좋을 것 같습니다.
- 점수를 저장하기 - 점수를 서버에 저장해서 다른 사용자들과 경쟁을 하거나, 랭킹 시스템을 추가할 수 있습니다.
마무리
이 튜토리얼을 통해 자바스크립트의 핵심 로직(반복문, 배열, 조건문)을 자연스럽게 익힐 수 있습니다. 이런 방식으로 직접 작동하는 프로젝트를 꾸준히 쌓으면, 포트폴리오로도 활용할 수 있습니다.