<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<form id="form">
<input type="text" id="input">
<button>확인</button>
</form>
<div id="logs"></div>
</body>
<script>
let $input = document.querySelector('#input')
let $form = document.querySelector('#form')
let $logs = document.querySelector('#logs')
let numbers = [] //1~9까지 숫자
let answer = [] //1~10까지 숫자에서 4자리를 뽑음
let tries = [] //사용자가 입력한 답들.
//1~10 숫자 뽑기
for (let i = 0; i < 9; i++) {
numbers.push(i + 1)
}
//numbers에서 무작위 4자리 숫자 뽑기
for (let i = 0; i < 4; i++) {
let index = Math.floor(Math.random() * numbers.length) //0~8까지 뽑는데 +1을 해주지 않는 이유는 인덱스로 접근할거기 때문.
answer.push(numbers[index])
numbers.splice(index, 1)
}
//에러 체크 함수
function checkerror(useranswer) {
if (useranswer.length !== 4) {
return alert('4자리 숫자를 입력해주세요')
}
else if (new Set(useranswer).size !== 4) {
return alert('중복된 숫자는 입력하지 마십시오')
}
else if (tries.includes(useranswer)) {
return alert('이미 입력한 값입니다')
}
else return true;
}
$form.addEventListener('submit', (event) => {
event.preventDefault();
let useranswer = $input.value; // 문자열으로 저장됨
$input.value = ''
if (!checkerror(useranswer)) {
return //에러체크에 걸리면 그냥 끝내버림
}
if (answer.join('') === useranswer) {
$logs.textContent = '홈런입니다'
return
}
if (tries.length >= 9) {
$logs.textContent = `패배했습니다 정답은 ${answer} 입니다`
return
}
let strike = 0;
let ball = 0;
for (i = 0; i < 4; i++) {
let index = answer.indexOf(useranswer[i])
if (index > -1) {
if (index === i) {
strike += 1
}
else {
ball += 1
}
}
}
$logs.textContent = `${useranswer} = ${strike}스트라이크 ${ball}볼 입니다 \n`
tries.push(useranswer)
})
</script>
</html>숫자야구를 만들어봤다. 중요하다고 생각하는 코드는 Math.random() 으로 무작위 숫자를 만들고 숫자배열에서 뽑는것과 splice 하므로 정해진 길이가 아닌 .length로 접근한다는점. 또한 new Set과 preventdefault의 사용정도.
숫자야구 군대에서 근무 설 때 선후임이랑 하고 놀았는데, 사람 머릿속으로는 쉽게 쉽게 순서도와 연산이 되지만, 직접 코드를 짤 때는 일일이 작동방식을 세분화하고 그에 맞는 연산자를 써야 하니 귀찮더라도 순서도를 그리는게 낫겠다.
@banhogu