렛츠기릿 자바스크립트 8 - 숫자야구게임(for문, indexOf())

숫자야구게임 1단계 - 4자리수 생성, 플레이어가 입력한 숫자의 유효성 검사

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>숫자야구</title>
  </head>
  <body>
    <form id="form">
      <input type="text" id="input" />
      <button>확인</button>
    </form>
    <div id="logs"></div>
    <script>
      const $input = document.querySelector("#input");
      const $form = document.querySelector("#form");
      const $logs = document.querySelector("#logs");

      //1단계 임의의 4자리 숫자 생성
      let answer = [];
      console.log(arr);
      while (answer.length < 4) {
        num = Math.floor(Math.random() * 9 + 1);
        if (!answer.includes(num)) {
          answer.push(num);
        }
      }

      console.log(answer);

      //2단계 플레이어가 입력한 4자리 숫자 검증
      const tries = [];

      const checkInput = function (input) {
        if (input.length !== 4) {
          alert("4자리의 숫자를 입력해야 합니다.");
          return false;
        }
        if (input.includes("0")) {
          alert("숫자 0은 포함될 수 없습니다.");
          return false;
        }
        if (new Set(input).size !== 4) {
          alert("중복된 숫자는 입력할 수 없습니다.");
          return false;
        }
        if (tries.includes(input)) {
          alert("이미 시도한 값입니다.");
          return false;
        }

        return true;
      };

      $form.addEventListener("submit", (event) => {
        event.preventDefault();
        const value = $input.value;
        $input.value = ""; //입력한 글자를 지워주는 센스
        if (checkInput(value)) {
          //입력값 문제가 없는 경우
          tries.push(value);
        } else {
          //에러가 있는 경우
        }
      });

     
    </script>
  </body>
</html>

if문 중첩 제거하기 (원본)

      $form.addEventListener("submit", (event) => {
        event.preventDefault();
        const value = $input.value;
        $input.value = ""; //입력한 글자를 지워주는 센스
        if (checkInput(value)) {
          //입력값 문제가 없는 경우


          //1. 홈런인 경우
          if (answer.join("") === value) {
            $logs.textContent = "홈런입니다.";
            return;
          }

          //2. 패배한 경우
          if (tries.length >= 9) {
            const message = document.createTextNode(
              `패배! 정답은 ${answer.join("")}`
            );
            $logs.appendChild(message);
            return;
            
          }

          tries.push(value);
        } else {
          //에러가 있는 경우
        }
      });

if문 중첩제거 1단계

      $form.addEventListener("submit", (event) => {
        event.preventDefault();
        const value = $input.value;
        $input.value = ""; //입력한 글자를 지워주는 센스
        if (checkInput(value)) {
          //입력값 문제가 없는 경우


          //1. 홈런인 경우
          if (answer.join("") === value) {
            $logs.textContent = "홈런입니다.";
            return;
          }

          //2. 패배한 경우
          if (tries.length >= 9) {
            const message = document.createTextNode(
              `패배! 정답은 ${answer.join("")}`
            );
            $logs.appendChild(message);
            return;
            
          }

          tries.push(value);
        } else {
          //에러가 있는 경우
        }
        //공통된 절차X
      });

▶ 1. 바깥쪽의 if문 또는 else문이 끝난 다음에 나오는 공통된 절차가 있는 경우 공통된 절차를 각 분기점 내부에 넣는다.

그리고 그 공통되었던 요소는 삭제해 준다.

▶ 현재 케이스의 경우에는 바깥쪽 if와 else구문이 끝난 후 공통된 절차가 존재하지 않는다. 따라서 특별한 조치X

if문 중첩제거 2단계

      $form.addEventListener("submit", (event) => {
        event.preventDefault();
        const value = $input.value;
        $input.value = ""; //입력한 글자를 지워주는 센스
        if (checkInput(value)) {
          //입력값 문제가 없는 경우


          //1. 홈런인 경우
          //짧은 if문 부터 실행 별도 조치X
          if (answer.join("") === value) {
            $logs.textContent = "홈런입니다.";
            return;
          }

          //2. 패배한 경우
          if (tries.length >= 9) {
            const message = document.createTextNode(
              `패배! 정답은 ${answer.join("")}`
            );
            $logs.appendChild(message);
            return;
            
          }

          tries.push(value);
        } else {
          //에러가 있는 경우
        }
        //공통된 절차X
      });

▶ 2. 안쪽의 if문과 바깥쪽 if문에 대응되는 else구문 중에서

짧은 구문이 먼저 실행되도록 안쪽의 if문을 작성한다.(switch)

▶ 안쪽 if문이 바깥쪽 if문에 대응되는 else구문과 비교해서 안쪽 if문이 더 짧은 경우 별도의 조치 필요X

▶ 현재 코드에는 "바깥쪽 if문과 대응되는 else구문"에 어떠한 코드도 적혀있지 별도의 조치X

if문 중첩제거 3단계

      $form.addEventListener("submit", (event) => {
        event.preventDefault();
        const value = $input.value;
        $input.value = ""; //입력한 글자를 지워주는 센스
        if (!checkInput(value)) {//if문 부정

          //1. 홈런인 경우
          if (answer.join("") === value) {
            $logs.textContent = "홈런입니다.";
            return;
          }

          //2. 패배한 경우
          if (tries.length >= 9) {
            const message = document.createTextNode(
              `패배! 정답은 ${answer.join("")}`
            );
            $logs.appendChild(message);
            return;
            
          }

          tries.push(value);
        } else {
          //에러가 있는 경우
        }
        //공통된 절차X
      });

▶ 3. 본래의 바깥의 if문을 부정한다.

if문 중첩제거 - 4단계

      $form.addEventListener("submit", (event) => {
        event.preventDefault();
        const value = $input.value;
        $input.value = ""; //입력한 글자를 지워주는 센스
        if (!checkInput(value)) {//if문 부정
		   return              
		}
          //1. 홈런인 경우
          //짧은 if문 부터 실행 별도 조치X
          if (answer.join("") === value) {
            $logs.textContent = "홈런입니다.";
            return;
          }

          //2. 패배한 경우
          if (tries.length >= 9) {
            const message = document.createTextNode(
              `패배! 정답은 ${answer.join("")}`
            );
            $logs.appendChild(message);
            return;
            
          }

          tries.push(value);
        } else {
          //에러가 있는 경우
        }
        //공통된 절차X
      });

▶ 4. 본래의 바깥쪽 if문을 return(함수 내부의 경우)이나 break(for문 내부의 경우)로 중단한다.

▶ 현재 코드에 return문을 추가한다. 중괄호를 추가한다.

if문 중첩제거 - 5단계

      $form.addEventListener("submit", (event) => {
        event.preventDefault();
        const value = $input.value;
        $input.value = ""; //입력한 글자를 지워주는 센스
        if (!checkInput(value)) {
          //if문 부정
          return; //return문 추가
        }
        //1. 홈런인 경우
        //짧은 if문 부터 실행 별도 조치X
        if (answer.join("") === value) {
          $logs.textContent = "홈런입니다.";
          return;
        }

        //2. 패배한 경우
        if (tries.length >= 9) {
          const message = document.createTextNode(
            `패배! 정답은 ${answer.join("")}`
          );
          $logs.appendChild(message);
          return;
        }

        tries.push(value);
      });

▶else문을 제거하고, if문을 좌측으로 정렬한다.

숫자야구게임 2단계-for문과 indexOf()

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>숫자야구</title>
  </head>
  <body>
    <form id="form">
      <input type="text" id="input" />
      <button>확인</button>
    </form>
    <div id="logs"></div>
    <script>
      const $input = document.querySelector("#input");
      const $form = document.querySelector("#form");
      const $logs = document.querySelector("#logs");

      //1단계 임의의 4자리 숫자 생성
      let answer = [];
      console.log(answer);
      while (answer.length < 4) {
        num = Math.floor(Math.random() * 9 + 1);
        if (!answer.includes(num)) {
          answer.push(num);
        }
      }

      console.log(answer);

      //2단계 플레이어가 입력한 4자리 숫자 검증
      const tries = [];

      const checkInput = function (input) {
        if (input.length !== 4) {
          alert("4자리의 숫자를 입력해야 합니다.");
          return false;
        }
        if (input.includes("0")) {
          alert("숫자 0은 포함될 수 없습니다.");
          return false;
        }
        if (new Set(input).size !== 4) {
          alert("중복된 숫자는 입력할 수 없습니다.");
          return false;
        }
        if (tries.includes(input)) {
          alert("이미 시도한 값입니다.");
          return false;
        }

        return true;
      };

      $form.addEventListener("submit", (event) => {
        event.preventDefault();
        const value = $input.value;
        $input.value = ""; //입력한 글자를 지워주는 센스
        if (!checkInput(value)) {
          //if문 부정
          return; //return문 추가
        }

        //입력값이 문제가 없는 경우
        //1. 홈런인 경우
        if (answer.join("") === value) {
          $logs.innerHTML += "홈런입니다.<br>";
          return;
        }

        //2. 패배한 경우
        if (tries.length >= 9) {
          const message = document.createTextNode(
            `패배! 정답은 ${answer.join("")}`
          );
          $logs.appendChild(message);
          return;
        }
        //몇 스트라이크 몇 볼인지 검사
        let strike = 0;
        let ball = 0;
        for (let i = 0; i < answer.length; i++) {
          const index = value.indexOf(answer[i]);
          if (index > -1) {
            //일치하는 숫자 발견
            if (index === i) {
              //자릿수도 같음
              strike += 1;
            } else {
              //숫자만 같음
              ball += 1;
            }
          }
        }

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

        tries.push(value);
      });
    </script>
  </body>
</html>

저작자표시 비영리 변경금지

'렛츠기릿 자바스크립트' 카테고리의 다른 글

forEach, map, fill 알아보기 (0)	2023.01.14
숫자야구게임 -self(3아웃인 경우) (0)	2023.01.14
렛츠기릿 자바스크립트 7 (계산기) -self(연달아 계산) (0)	2023.01.09
렛츠기릿 자바스크립트 7 (계산기) + 고차함수 + if중첩문 제거 (0)	2023.01.08
렛츠기릿 자바스크립트 6 (쿵쿵따) - self (0)	2023.01.08