[Javascript] Baseball Game

Baseball Game

참고사항

참고 사이트: https://namu.wiki/w/숫자야구

🚨 특이 케이스에 대한 대응은 하지 않아도 괜찮습니다. 예) 중복 숫자 등

TODO

• 게임 시작 버튼 만들기
• 게임 시작 버튼을 클릭 했을때, 랜덤한 세 자리 숫자 만들기 (사용자에게 보여주진 않습니다.)
• 숫자 입력칸 만들기
• 사용자가 엔터키를 클릭 했을때, 입력값이 세자리 숫자가 아닌 경우 경고창 띄워주기
• 사용자가 엔터키를 클릭 했을때, 2단계에서 생성한 숫자와 사용자의 입력값 비교하기
• 각 자리 별로 비교하고, 같은 자리에 같은 숫자가 몇개 있는지 판별합니다. (스트라이크 갯수)
• 각 자리 별로 비교하고, 다른 자리에 같은 숫자가 몇개 있는지 판별합니다. (볼 갯수)
• 화면에 스트라이크와 볼의 갯수를 표기합니다.
• 사용자가 10회까지 시도할 수 있도록 제한합니다.
• 게임 재시작 버튼을 만들고, 재시작 할 수 있도록 합니다.

출력화면

✏️ 입력값이 세자리 숫자가 아닌 경우 경고창 띄우기

✏️ 사용자가 10회 이상 틀릴 시 재시작 버튼

사용자가 10회 이내 정답 입력 시 정답 화면

script

function handleStartButtonClick(){
  let count = 0;
  const answer = Math.floor(Math.random() * 900)+100;
  $inputNumber.addEventListener("keypress",enterPress);
  function enterPress() {
    if( window.event.keyCode==13 ){
      if(count===10){
        $inputNumber.removeEventListener("keypress",enterPress);
        count = -1;
        return;
      }
      count++;
      const number = $inputNumber.value;
      if(number>999 || number<100){
        alert("세자리 숫자를 입력해주세요.");
        return;
      }
    const numArray = String(number).split("");
    const answerArray = String(answer).split("");
    let strike = 0;
    let ball = 0;
    numArray.forEach((element,index) => {
      if(element === answerArray[index]){
        strike++;
      }
      answerArray.forEach((element2,index2)=>{
        if(element === element2){
          if(index !== index2){
          ball++;
          }
          return;
        }
        return;
      });
    });
    if(strike ===3){
      // 정답 화면 표시
      return;
    }

HTML DOM을 제어하는 코드는 생략하였고, 알고리즘만 작성하였다.

전체코드가 궁금하다면?

✏️ html과 css를 적용한 코드 👇

https://github.com/newsilver1028/Mini_Web_Project

✏️ 문제 출처

https://book.vanillacoding.co/starter-kit/step-6/baseball