JAVASCRIPT 미니프로젝트 - 숫자야구게임

자바스크립트라는 글자가 너무 길어서 앞으로 잡스라고 부를거임.
주변 컴공과나 개발자인 친구들은 자스나 자슼이라고 부른다는데,
그건 너무 야이 자슥아 이런 느낌이라 별로...

암튼 잡스 배운지 1주일 됐고 미니프로젝트로 숫자야구 만들기~_~

      // 랜덤 숫자 정답
      const numbers = [];
      for (i = 0; i < 10; i++) {
        numbers.push(i);
      }

      const answer = [];

      for (i = 0; i < 4; i++) {
        const random = Math.floor(Math.random() * 10);
        if (!answer.includes(random)) {
          answer.push(numbers[random]);
        } else {
          i--;
        }
      }

랜덤한 숫자 만들어서 4자리 정답 만듦

      // 중복 숫자, 숫자 4개가 아닐 시 입력 불가 메시지 화면 출력
      const tries = [];
      function devPioint(input) {
        if (input.length !== 4) {
          return alert("4자리를 입력해 주세요");
        } else if (new Set(input).size !== 4) {
          return alert("중복되지 않게 입력하세요");
        } else if (tries.includes(input)) {
          return alert("이미 시도한 값입니다.");
        } else {
          return true;
        }
      }

일단 게임시작하고 중복으로 숫자 입력하는거랑 4자리가 아닌 숫자 입력하면
다시 입력하라고 설정을 줬음
맞다 숫자 입력할 때도 중복숫자 못 넣게도 함

       // 횟수 초과 문구 생성
      function failed() {
        const message = document.createTextNode(
          `💥횟수 초과💥 정답은 ${answer.join("")} 입니다. 리셋하세요`
        );
        result.appendChild(message);
      }

      // 콘솔로 정답 확인
      console.log(answer);

게임 횟수는 10회로 제한
10회 이상 숫자를 입력했을 때 쓰일 함수 생성

      // 게임 룰 & 개발사항
      let out = 0;
      form.addEventListener("submit", (event) => {
        // 폼태그로 감짜서 submit이벤트를 사용하면 버튼을 클릭하지 않고도 Enter를 눌러 값을 제출할 수 있다.
        event.preventDefault(); //폼 태그의 기본 동작을 취소하는 코드
        // 폼태그는 submit이벤트가 발생할 때 기본으로 브라우저를 새로고침하므로, 게임초기화를 방지하기 위해 새로고침을 막는다.
        const value = input.value; // 숫자가 아니라 문자열로 값이 들어온다
        input.value = "";
        const valid = devPioint(value);

        // 홈런 or 낫 홈런
        if (!valid) {
          return;
        } else if (answer.join("") === value) {
          result.textContent = "👏👏Home Run!👏👏";
          return;
        } else if (tries.length > 8) {
          failed();
          return;
        }

        // strike & ball 수 검사
        let strike = 0;
        let ball = 0;
        for (i = 0; i < 4; i++) {
          const index = value.indexOf(answer[i]);
          if (index > -1) {
            // 일치하는 숫자 확인
            if (index === i) {
              // 자릿수도 같음
              strike += 1;
            } else {
              // 숫자만 같음
              ball += 1;
            }
          }
        }

        // 정답 입력 횟수
        let counting = 10 - (1 + tries.length);

        // 정답 일치 확인(strike & ball 유무)
        if (strike === 0 && ball === 0) {
          result.append(
            `[남은 횟수 ${counting}] 입력한 숫자: ${value} 정답에 포함된 숫자가 없습니다👊`,
            document.createElement("br")
          );
        } else {
          result.append(
            `[남은 횟수 ${counting} 입력한 숫자: ${value} Strike: ${strike} Ball: ${ball} `,
            document.createElement("br")
          );
        }
        tries.push(value);
      });

진짜 숫자야구게임 틀 만들기
홈런인지 아닌지로 먼저 제어문으로 시작하고
입력한 숫자가 스트라이크인지 볼인지 확인해주는 코드와
정답을 입력한 횟수를 확인할 수 있도록 해줌.

아 일단 수업 1분전이라 여기까지 쓰겠음
빠이빠이