숫자야구 게임 만들기

프로젝트 소개

• 예전에 우리가 학창시절에 펜으로 직접 쓰면서 했던 그 숫자야구를 웹페이지에서 구현
• 컴퓨터가 가지고 있는 임의의 4자리 숫자를 맞추는 게임

게임 플레이 링크

https://mementomoricarpediem.github.io/wecode/numberbaseball.html

게임 방법

1. 서로 다른 4자리 숫자를 입력창에 넣고 "제출" 버튼 클릭
2. 컴퓨터가 가지고 있는 4자리 숫자와 비교한 결과를 Strike, Ball, Out 숫자로 알려줌
3. S의 숫자는 해당 숫자와 위치를 맞춘 수, B은 해당 숫자는 있지만 위치가 틀린 수, O은 입력한 숫자가 아예 없는 수
4. History에 찍히는 자신의 피드백을 봐가며, 최대한 빨리 맞추기~!

주요 기능

1. 중복되지 않는 숫자 4자리를 랜덤하게 생성 (for 컴퓨터)
2. 입력되는 숫자 중 어느 하나라도 중복되는 경우, 안내창 팝업.
3. 매회 결과를 우측 창에서 S, B, O로 표시
4. 맞출때까지의 S, B, O 피드백 결과를 누적적으로 하단의 History 창에 표시
5. 정답 맞추면, 축하 사운드 재생 및 텍스트 표시

최종코드

const computerNum = [];
let his = [];
function pickRanNum() {
  for (var i = 0; i < 4; i++) {
    let randomNum = Math.floor(Math.random() * 10);
    if (computerNum.includes(randomNum)) {
      randomNum = Math.floor(Math.random() * 10);
      i--;
    } else {
      computerNum.push(randomNum);
    }
  }
  console.log(computerNum);
}

function guess(e) {
  e.preventDefault();
  const guessNum = Array.from(input.value);
  console.log(guessNum);

  guessNum.some((num) => {
    const guessNumValidate = Array.from(input.value);
    console.log(guessNumValidate);
    guessNumValidate.splice(guessNumValidate.indexOf(num), 1);

    if (guessNumValidate.includes(num)) {
      alert('동일한 숫자가 2번이상 반복되지 않도록 다시 입력해주세요.');
      return (input.value = '');
    }
  });

  let strike = 0;
  let ball = 0;
  let out = 0;

  for (var i = 0; i < 4; i++) {
    if (parseInt(guessNum[i]) == computerNum[i]) {
      strike++;
    } else if (computerNum.includes(parseInt(guessNum[i]))) {
      ball++;
    } else {
      out++;
    }
  }
  console.log(strike, ball, out);

  let html;
  let htmlHistory;

  if (strike == 4) {
    html = `
          <p class='score'> Conglatulation~ 👏👏</p>
          `;
    var applause = new Audio('applause.wav');
    applause.play();
  } else {
    html = `
        <p class='score'> ${strike}<span style="color:blue">S</span> ${ball}<span style="color:yellow">B</span> ${out}<span style="color:red">O</span> </p>
        `;
    htmlHistory = `<p class='score' ㄴ> ${input.value}  ================>  ${strike}S ${ball}B ${out}O </p>
        `;
  }
  score.innerHTML = html;
  his.push(htmlHistory);
  history.innerHTML = his.join('');
}

function reset() {
  input.value = '';
}

const history = document.querySelector('.history');
const score = document.querySelector('.resultDisplay');
const input = document.querySelector('#guessNumber');
const submit = document.querySelector('#guess');
const replay = document.querySelector('#replay');
submit.addEventListener('click', guess);
replay.addEventListener('click', reset);

pickRanNum();

느낀 점

• 관련 프로젝트 강의 영상(인프런)을 일부 참고는 했으나, 전혀 다르게 customization 한 것임
• 작지만 스스로 만든 결과물에 굉장한 보람을 느낌
• 중복 숫자를 입력하지 못하게 하는 기능에서 좀 막혔으나 나름 해결했음.