숫자야구란?

3~4자리의 숫자를 임의로 정한뒤, 서로에게 3/4자리의 숫자를 불러서 결과를 확인합니다.
그리고 그 결과를 토대로 상대가 적은 숫자를 예상한 뒤 맞힙니다.

• 사용된 숫자는 1~9까지 서로 다른 숫자이다.
• 숫자는 맞지만 위치가 틀리면 볼, 숫자와 위치가 전부 맞으면 스트라이크, 숫자와 위치가 전부 틀리면 아웃이다.

---

1. 랜덤한 4자리 숫자 구하기

• numberArray 라는 배열에 1~9를 입력
• 반복문을 통해 배열에서 랜덤한 숫자를 splice로 뽑아 number에 중복되지 않는 숫자를 집어 넣음.

let numberArray = [1,2,3,4,5,6,7,8,9];
let number = [];
function gameStart(){
  for (let i=0; i<4; i++){
  let selectedNum = numberArray.splice(Math.floor(Math.random()*(9-i)),1)[0]
  number.push(selectedNum)
  }
  console.log(number)
}

2. 입력된 값 가져오기

• form에서 submit 이벤트가 발생 시, 입력창에 입력된 값을 가져오도록 함.
  이때, 새로고침을 하게되는데 e.preventDefault(); 라는 코드를 통해 새로고침을 취소하게 됩니다.

form.addEventListener('submit', function(e){
  e.preventDefault();
  let answer = input.value;
  console.log(answer);
});

3. 홈런 여부 확인

• 랜덤한 4자리 숫자는 배열로 구하였으므로 홈런 여부 확인 시에는 답변에 입력된 값과 비교하기위해 join("")으로 랜덤 숫자를 문자열로 만들어 홈런 여부 확인

if (answer == number.join("")) {
    result.textContent = "홈런!!";
    input.value = "";
    input.focus();
    resetBtn.addEventListener("click", () => {
      pickNum();
    });
    turn = 0;
  }

4. Ball, Strike 여부 확인

• 홈런이 아닐 경우, 작성한 답을 문자열에서 배열로 변경하는 split('')로 변경하여 확인
• Strike의 경우, for문을 통해 해당 배열의 i번째 요소끼리 맞는지 확인
• Ball의 경우, Strike의 아닌 경우 for문을 통해 랜덤한 숫자에서 작성한 답의 i번째 요소가 indexOf()을 통해 일치하는 숫자가 있는지 확인

else{
      for (let i = 0; i < 4; i++) {
        if (Number(answerArray[i]) == number[i]) {
          strike++;
        } else if (number.indexOf(Number(answerArray[i])) > -1) {
          ball++;
        }
      }    
    }

---

Inflearn 제로초의 Javascript 게임 개발