숫자 야구 게임 만들기
숫자 1~ 9 중에서 중복되지 않게 네 개를 고릅니다.
10 번의 기회가 주어지고 상대편이 고른 숫자 네 개를 맞히면 됩니다.
이때 숫자만 맞는것이 아니라 숫자의 순서까지 맞혀야 합니다.
기회가 적은 대신, 틀릴 때마다 힌트를 줍니다.
맞힌 숫자의 개수, 숫자뿐만 아니라 순서까지 맞힌 개수(스트라이크)를 알려줍니다.
숫자만 맞으면 볼, 숫자에 순서까지 맞힌다면 스트라이크 입니다.
<body>
<form id="form">
<input type="text" id="input">
<button>확인</button>
</form>
<div id="logs"></div>
<script>
const $input = document.querySelector('#input')
const $form = document.querySelector('#form')
const $logs = document.querySelector('#logs')
const numbers = [];
for (let n = 0; n < 9; n += 1) {
numbers.push(n + 1)
}
const answer = [];
for (let n = 0; n < 4; n += 1) {
const index = Math.floor(Math.random() * numbers.length);
answer.push(numbers[index]);
numbers.splice(index, 1);
}
console.log(answer);
const tries = [];
function checkInput(input) {
if(input.length !== 4) {
return alert('4자리 숫자를 입력해 주세요.')
}
if(new Set(input).size !== 4) {
return alert('중복되지 않게 입력해 주세요.')
}
if(tries.includes(input)) {
return alert('이미 시도한 값입니다.')
}
return true;
}
let out = 0;
$form.addEventListener('submit', (e) => {
e.preventDefault();
const value = $input.value;
$input.value = '';
if(!checkInput(value)) {
return;
}
if(answer.join('') === value) {
$logs.textContent = '홈런!';
return;
}
if(tries.length >= 9) {
$logs.append(`패배! 정답은 ${answer.join('')}`)
return;
}
let strike = 0;
let ball = 0;
for(let i = 0; i < answer.length; i++) {
const index = value.indexOf(answer[i]);
if(index > -1) {
if(index === i) {
strike += 1;
} else {
ball += 1;
}
}
}
if(strike === 0 && ball === 0) {
out++;
$logs.append(`${value}: 아웃`, document.createElement('br'))
} else {
$logs.append(`${value}: ${strike} 스트라이크 ${ball}볼`, document.createElement('br'));
}
if(out === 3) {
$logs.append(`패배! 정답은 ${answer.join('')}`)
}
tries.push(value);
})
</script>
</body>
``
babypig