[ JavaScript ] 반복문 사용하기_ 숫자야구 게임_3 ( 강좌 참고 )

📌 Self Check 아웃 만들기

지금까지 숫자만 맞히면 볼, 숫자와 자릿수까지 모두 맞히면 스트라이크 였다.

그런데 숫자를 하나도 맞히지 못하면 어떻게 될까?

 

문제!

숫자를 하나도 맞히지 못할 때의 상황

정답이 '1357'인데 '2468'을 입력하는 경우.

지금까지의 프로그래밍에서는 '0볼 0스트라이크'라고 표시된다.

이 대신에 아웃으로 표시해보자. 그리고 3아웃이 되면 패배하게 된다.

---

📌 순서도

내가 적은 순서도

책에서 제시한 순서도

---

📌 코드

    <script>
        const $input = document.querySelector('#input');   
        const $form = document.querySelector('#form');   
        const $logs = document.querySelector('#logs');   

        //numbers 빈 배열 만들고 그 안에 1~9까지의 숫자 넣기.
        const numbers = []; //[1,2,3,4,5,6,7,8,9]
        for (let n=0; n<9; n+=1){
            numbers.push(n+1);
        }

        //숫자 4개 뽑기.
        //answer 빈 배열 만들고, numbers 배열로부터 숫자를 하나씩 꺼낸다. 4번 반복한다.
        const answer = [];
        for (let n=0; n<=3; n+=1){ // 4번 반복.
            const index = Math.floor(Math.random() * (numbers.length-1)); // 0 ~ 8 정수. (+1 추가하면 0 ~ 9 정수.)
            answer.push(numbers[index]); //index를 무작위로 뽑고,numbers[index]로 실제 숫자를 가져온다.
            //그리고 answer 배열에 뽑은 숫자를 추가 (push)한다.
            numbers.splice(index,1); //numbers 배열에서는 제거(splice)한다.
            //(numbers배열에서 뽑았으니까 삭제하는 것이다.)
        }

        console.log(answer);
        console.log(numbers);

        const tries = [];
        function checkInput(input) {
            if (input.length != 4) { //길이는 4가 아닌가.
            return alert('4자리 숫자를 입력해 주세요.');
            }
            if (new Set(input).size != 4) { //중복된 숫자가 아닌가.
                //new Set은 중복이 없는 배열이다.
                return alert ('중복되지 않게 입력해주세요.'); 
            }
            if (tries.includes(input)){ //이미 시도한 값은 아닌가.
                return alert ('이미 시도한 값입니다.');
            }
            return true;
        }

        let out = 0; //아웃
        $form.addEventListener('submit',(event)=>{
            event.preventDefault(); //폼 태그의 기본 동작을 취소하는 코드.
            const value = $input.value;
            $input.value = ''; //입력한 값을 가져오는 코드. ( 숫자가 아니라 문자열로 값이 들어옴)

            //입력한 값을 checkInput 함수로 검증.
             if (!checkInput(value)){
                return; //입력값 문제 있을 때.  
            } 
            //입력값 문제 없을 때.
            //홈런인지 검사한다.
             if (answer.join('') === value){ //[3,1,4,6] => '3146' 배열을 문자열로 바꾸는 메소드가 join.
                //value 는 사용자가 입력한 값. 이것을 서로 비교하는 것이다.
                //=== 는 값과 타입 둘 다 검사한다. == 는 값을 비교하기 전에 타입이 다를 경우 타입을 변환 후 값을 비교한다.
                $logs.textContent = '홈런';
                return;
             }
             //10번 시도했는가.
             if (tries.length >= 9){
                const message = document.createTextNode(`패배. 정답은 ${answer.join('')}`); //텍스트를 만들고,
                $logs.appendChild(message); //로그 안에 추가한다.
                return;
             }
            //몇 스트라이크 몇 볼인지 검사 
            let strike = 0;
            let ball = 0;
            // answer : 3146 , value : 1347

            //for문을 이용한 방법.
            // for (let i = 0; i<answer.length; i++){
            //     const index = value.indexOf(answer[i]);
            //     if (index > -1) { //일치하는 숫자 발견. 겹치는 숫자가 있으면 -1보다 크다. 겹치는 숫자가 없으면 -1.
            //         //아래 코드로 볼과 스트라이크가 나눠짐.
            //         if (index === i){ //자릿수도 같음.
            //             strike += 1;
            //         } else { //숫자만 같음.
            //             ball += 1;
            //         }
            //     }
            // }
            // if (strike === 0 && ball === 0){
            //     out++;
            //     $logs.append(`${value}:아웃`,document.createElement('br'));
            // } else {
            //     //append에 여러개 추가할 수 있는데, 문자열and br 태그도 같이 넣을 수 있는 것이다.
            //     $logs.append(`${value}: ${strike} 스트라이트 ${ball} 볼`,document.createElement('br'));
            // }
            // if (out === 3){
            //     const message = document.createTextNode(`패배. 정답은 ${answer.join('')}`); //텍스트를 만들고,
            //     $logs.appendChild(message); //로그 안에 추가한다.
            //     return;
            // }
            
            //배열의 forEach를 이용한 방법.
            answer.forEach((element, i)=>{ //element : answer의 각 요소 / i : 그 요소에 대한 인덱스.
                const index = value.indexOf(element);
                if(index > -1){ //일치하는 숫자 발견.
                    if(index === i){ //자릿수도 같음.
                        strike += 1;
                    } else{ //숫자만 같음.
                        ball += 1;
                    }
                }               
            })
            if (strike === 0 && ball === 0){
                out++;
                $logs.append(`${value}:아웃`,document.createElement('br'));
            } else {
                //append에 여러개 추가할 수 있는데, 문자열and br 태그도 같이 넣을 수 있는 것이다.
                $logs.append(`${value}: ${strike} 스트라이트 ${ball} 볼`,document.createElement('br'));
            }
            if (out === 3){
                const message = document.createTextNode(`패배. 정답은 ${answer.join('')}`); //텍스트를 만들고,
                $logs.appendChild(message); //로그 안에 추가한다.
                return;
            }
            tries.push(value);//tries 배열에 입력한 값을 저장해서 시도 횟수를 1 늘려줌.
        });
    </script>
<!--코드출처 (도서) Let's Get IT 자바스크립트 프로그래밍-->

시도 횟수가 10번이 넘었거나 3번 아웃되어 패배하면 패배 메시지를 표시하는 앞의 코드가 중복이 된다.

이런 부분은 함수로 빼서 중복을 제거한다.

function defeated(){
            const message = document.createTextNode(`패배. 정답은 ${answer.join('')}`); //텍스트를 만들고,
             $logs.appendChild(message); //로그 안에 추가한다.
        }

let out = 0; //아웃
        $form.addEventListener('submit',(event)=>{
            event.preventDefault(); //폼 태그의 기본 동작을 취소하는 코드.
            const value = $input.value;
            $input.value = ''; //입력한 값을 가져오는 코드. ( 숫자가 아니라 문자열로 값이 들어옴)
			.
            .
            .
             //10번 시도했는가.
             if (tries.length >= 9){
                defeated();
                return;
             }
            //몇 스트라이크 몇 볼인지 검사 
            let strike = 0;
            let ball = 0;
            // answer : 3146 , value : 1347
            
            //배열의 forEach를 이용한 방법.
            answer.forEach((element, i)=>{ //element : answer의 각 요소 / i : 그 요소에 대한 인덱스.
                const index = value.indexOf(element);
                if(index > -1){ //일치하는 숫자 발견.
                    if(index === i){ //자릿수도 같음.
                        strike += 1;
                    } else{ //숫자만 같음.
                        ball += 1;
                    }
                }               
            })
            if (strike === 0 && ball === 0){
                out++;
                $logs.append(`${value}:아웃`,document.createElement('br'));
            } else {
                //append에 여러개 추가할 수 있는데, 문자열and br 태그도 같이 넣을 수 있는 것이다.
                $logs.append(`${value}: ${strike} 스트라이트 ${ball} 볼`,document.createElement('br'));
            }
            if (out === 3){
                defeated();
                return;
            }
            tries.push(value);//tries 배열에 입력한 값을 저장해서 시도 횟수를 1 늘려줌.
        });
        
<!--코드출처 (도서) Let's Get IT 자바스크립트 프로그래밍-->

📌 전체 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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');   

        //numbers 빈 배열 만들고 그 안에 1~9까지의 숫자 넣기.
        const numbers = []; //[1,2,3,4,5,6,7,8,9]
        for (let n=0; n<9; n+=1){
            numbers.push(n+1);
        }

        //숫자 4개 뽑기.
        //answer 빈 배열 만들고, numbers 배열로부터 숫자를 하나씩 꺼낸다. 4번 반복한다.
        const answer = [];
        for (let n=0; n<=3; n+=1){ // 4번 반복.
            const index = Math.floor(Math.random() * (numbers.length-1)); // 0 ~ 8 정수. (+1 추가하면 0 ~ 9 정수.)
            answer.push(numbers[index]); //index를 무작위로 뽑고,numbers[index]로 실제 숫자를 가져온다.
            //그리고 answer 배열에 뽑은 숫자를 추가 (push)한다.
            numbers.splice(index,1); //numbers 배열에서는 제거(splice)한다.
            //(numbers배열에서 뽑았으니까 삭제하는 것이다.)
        }

        console.log(answer);
        console.log(numbers);

        const tries = [];
        function checkInput(input) {
            if (input.length != 4) { //길이는 4가 아닌가.
            return alert('4자리 숫자를 입력해 주세요.');
            }
            if (new Set(input).size != 4) { //중복된 숫자가 아닌가.
                //new Set은 중복이 없는 배열이다.
                return alert ('중복되지 않게 입력해주세요.'); 
            }
            if (tries.includes(input)){ //이미 시도한 값은 아닌가.
                return alert ('이미 시도한 값입니다.');
            }
            return true;
        }

        function defeated(){
            const message = document.createTextNode(`패배. 정답은 ${answer.join('')}`); //텍스트를 만들고,
             $logs.appendChild(message); //로그 안에 추가한다.
        }
        let out = 0; //아웃
        $form.addEventListener('submit',(event)=>{
            event.preventDefault(); //폼 태그의 기본 동작을 취소하는 코드.
            const value = $input.value;
            $input.value = ''; //입력한 값을 가져오는 코드. ( 숫자가 아니라 문자열로 값이 들어옴)

            //입력한 값을 checkInput 함수로 검증.
             if (!checkInput(value)){
                return; //입력값 문제 있을 때.  
            } 
            //입력값 문제 없을 때.
            //홈런인지 검사한다.
             if (answer.join('') === value){ //[3,1,4,6] => '3146' 배열을 문자열로 바꾸는 메소드가 join.
                //value 는 사용자가 입력한 값. 이것을 서로 비교하는 것이다.
                //=== 는 값과 타입 둘 다 검사한다. == 는 값을 비교하기 전에 타입이 다를 경우 타입을 변환 후 값을 비교한다.
                $logs.textContent = '홈런';
                return;
             }
             //10번 시도했는가.
             if (tries.length >= 9){
                defeated();
                return;
             }
            //몇 스트라이크 몇 볼인지 검사 
            let strike = 0;
            let ball = 0;
            // answer : 3146 , value : 1347

            //for문을 이용한 방법.
            // for (let i = 0; i<answer.length; i++){
            //     const index = value.indexOf(answer[i]);
            //     if (index > -1) { //일치하는 숫자 발견. 겹치는 숫자가 있으면 -1보다 크다. 겹치는 숫자가 없으면 -1.
            //         //아래 코드로 볼과 스트라이크가 나눠짐.
            //         if (index === i){ //자릿수도 같음.
            //             strike += 1;
            //         } else { //숫자만 같음.
            //             ball += 1;
            //         }
            //     }
            // }
            // if (strike === 0 && ball === 0){
            //     out++;
            //     $logs.append(`${value}:아웃`,document.createElement('br'));
            // } else {
            //     //append에 여러개 추가할 수 있는데, 문자열and br 태그도 같이 넣을 수 있는 것이다.
            //     $logs.append(`${value}: ${strike} 스트라이트 ${ball} 볼`,document.createElement('br'));
            // }
            // if (out === 3){
            //     const message = document.createTextNode(`패배. 정답은 ${answer.join('')}`); //텍스트를 만들고,
            //     $logs.appendChild(message); //로그 안에 추가한다.
            //     return;
            // }
            
            //배열의 forEach를 이용한 방법.
            answer.forEach((element, i)=>{ //element : answer의 각 요소 / i : 그 요소에 대한 인덱스.
                const index = value.indexOf(element);
                if(index > -1){ //일치하는 숫자 발견.
                    if(index === i){ //자릿수도 같음.
                        strike += 1;
                    } else{ //숫자만 같음.
                        ball += 1;
                    }
                }               
            })
            if (strike === 0 && ball === 0){
                out++;
                $logs.append(`${value}:아웃`,document.createElement('br'));
            } else {
                //append에 여러개 추가할 수 있는데, 문자열and br 태그도 같이 넣을 수 있는 것이다.
                $logs.append(`${value}: ${strike} 스트라이트 ${ball} 볼`,document.createElement('br'));
            }
            if (out === 3){
                defeated();
                return;
            }
            tries.push(value);//tries 배열에 입력한 값을 저장해서 시도 횟수를 1 늘려줌.
        });
    </script>
</body>
</html>
<!--코드출처 (도서) Let's Get IT 자바스크립트 프로그래밍-->

아웃 결과

---

-(도서) Let's Get IT 자바스크립트 프로그래밍

https://thebook.io/

Let's Get IT 자바스크립트 프로그래밍

-(강좌) 렛츠기릿 자바스크립트

https://www.inflearn.com/course

[무료] [리뉴얼] 렛츠기릿 자바스크립트 - 인프런 | 강의