숫자 야구 게임 (html / js)

숫자로 하는 야구 게임을 만들어 보겠습니다.

절차

프로그래밍 사고

시작
->random한 4개의 숫자 문제로 생성
->참가자가 번호를 입력한다
->번호를 검사한다
-4자리가 맞는지
-중복 되어 있진 않는지
-이미 제출한 숫자가 아닌지
->번호를 비교한다
->정답 번호와 같은 번호인가? 홈런을 표시한다
->같은 번호가 있는가? 볼과 스트라이크를 알려준다
->없다면 아웃을 알려준다.
->10회 입력시 실패

---

코드

• random한 4개의 숫자 문제로 생성

const numbers = Array(9).fill().map((el,idx)=>{
        return idx+1;
  })
const answer = []
for(let i=0;i<4;i++){
  let ranNum  = Math.floor(Math.random()*numbers.length)
  answer.push(numbers[ranNum]);
  numbers.splice(ranNum,1);
}

• 참가자가 번호를 입력한다
  input = $input.value;
• 번호를 검사한다

const checkInput = (input) => {
  if (input.length !== 4) {
    alert('4자리를 입력해주세요')
    return;
  }
  if (new Set(input).size !== 4) {
    alert('중복된 값이 있습니다.')
    return;
  }
  if (tries.includes(input)) {
    alert('이미 확인한 값 입니다.')
    return;
  }
  return true;
}

• 번호를 비교한다

for (let n = 0; n < 4; n++) {
  let idx = input.indexOf(answer[n])
  if (idx > -1) {
    if (idx === n) {
      strike += 1

    } else {
      ball += 1
    }
  }
}

• 정답 번호와 같은 번호인가? 홈런을 표시한다

if (input === answer.join('')) {
  $logs.append('홈런!');
}

• 같은 번호가 있는가? 볼과 스트라이크를 알려준다

$logs.append(`${strike}스트라이크 ${ball}볼`, document.createElement('br'));

• 없다면 아웃을 알려준다.

if (strike + ball === 0) {
  out++;
  $logs.append(`${out}아웃`, document.createElement('br'));
} else {
  $logs.append(`${strike}스트라이크 ${ball}볼`, document.createElement('br'));
}
if (out === 2) {
  fail();
  return;
}

• 10회 입력시 실패

function fail(){
  $logs.append('실패입니다.',document.createElement('br'));
}
if (tries.length >= 9) {
  fail();
  return;
}

---

소스코드(github)
링크텍스트
출처 "ZeroCho TV"
링크텍스트