Notice
Recent Posts
Recent Comments
Link
«   2024/10   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

프로그래밍 삽질 중

Let's Get IT 자바스크립트 프로그래밍 - 숫자야구(아웃 추가, 시도 횟수 추가) 본문

과거 프로그래밍 자료들/Javascript&typescript

Let's Get IT 자바스크립트 프로그래밍 - 숫자야구(아웃 추가, 시도 횟수 추가)

평부 2022. 7. 22. 15:20

 

* 출처 : https://thebook.io/080270/part02/ch05/

 

Let's Get IT 자바스크립트 프로그래밍: 5장 반복문 사용하기_숫자야구 게임

 

thebook.io

* 숫자 야구

- 1~9까지 중복되지 않는 숫자 4개를 고른다

- 4개의 숫자 중 랜덤하게 섞은 후 답을 맞춘다

- 위치가 같고 숫자가 같은 경우 = strike, 숫자만 같을 경우 = ball

- ex) [3, 4, 9, 5] 일 때 정답을 [1, 2, 3, 4] 입력 시 0 스트라이크 2볼

 

 

* array.push()

- 원하는 숫자를 배열에 넣기

 

  const numbers = [];
        for (let n = 1; n < 10; n++) {
            numbers.push(n);
        }
        console.log("numbers : ", numbers); //[1, 2, 3, 4, 5, 6, 7, 8, 9]

 

* indexOf, includes

- 배열이나 문자열에 원하는 매서드가 있는지 확인

 

const topGun1 = ['maverick', 'iceman', 'goose', 'hollywood'];

//indexOf : 숫자로 나옴(1은 존재, -1은 존재하지 않음)
topGun1.indexOf('hangman'); // -1(false)
topGun1.indexOf('iceman'); // 1 (true)

//includes : true, false로 나옴(true는 존재, false는 존재하지 않음)
topGun1.includes('maverick'); //true
topGun1.includes('rooster'); //false

 

* forEach, map

- forEach는 반복문 효과를 내는 배열의 메서드

-> 인수로 함수를 넣고, 이 함수가 각각의 배열 요소들에 순서대로 적용되는 구조입니다.

 

- map  기존 배열의 요소를 일대일로 다른 값으로 바꿈.

-> 단, 기존 배열의 값이 바뀌는 것이 아니라 새로운 배열을 만듭니다.

 

//forEach
const numbers2 = value.forEach((number, aIndex) => {
            console.log("number", number); //1 2 3 4 5 6 7 8 9
            console.log("aIndex", aIndex); //0 1 2 3 4 5 6 7 8 
        });

//map
const numbers3 = Array(9).fill().map((v, i) => i + 1);
        console.log("numbers2 : ", numbers2);  //[1, 2, 3, 4, 5, 6, 7, 8, 9]

 

* document.createElement, document.createTextNode

- 각각 태그와 텍스트를 만드는 메서드

- 단, 다른 태그에 append나 appendChild 하기 전까지는 화면에 보이지 않습니다.

 

*  appendChild와 append

- document.createElement, document.createTextNode로 만든 태그나 텍스트를 선택한 태그의 자식 태그로 넣음 

- appendChild로는 하나만 넣을 수 있고, append를 사용하면 여러 개를 동시에 넣을 수 있음

- 또한, append로 텍스트를 추가할 때는 document.createTextNode 대신 문자열을 바로 넣어도 됩니다.

 

 

 

* 숫자 야구 

- 아웃 추가 : 스트라이크와 볼이 각각 0일 때 아웃이 1씩 증가, 아웃이 3개일 때 값을 보여줌

- 시도 횟수 추가 : tires.length 값은 0부터 시작하므로 +1를 추가할 것(tires.length가 >= 9면 패배이므로 그 전에 보여줘야 함) 

 

* 결과

 

* array.map 사용 중 차이점 발견 :  i+1 과 i++은 다르다 

- i+1은 현재 i 값에 1을 더하겠다는 의미이며 i값이 증가하지 않고 i++로 쓰면 i=i+1로 i 값이 증가함

(출처 : https://life-with-coding.tistory.com/291)

 

i+1 과 i++ 의 차이점

인트로 우리는 조건문 또는 반복문, 구문을 작성할때 i+1또는 i++을 넣습니다. 이 두 가지 연산자 사용은 명확히 다릅니다. i+1로 쓰게 된다면 현재 i값에 1을 더한 값을 쓰겠다는 의미이므로 i값이

life-with-coding.tistory.com

// i+1은 현재 i 값에 1을 더하겠다는 의미이며 i값이 증가하지 않음
const array = Array(10).fill().map((v, i) => i+1); 
// i++로 쓰면 i=i+1로 i 값이 증가함
const array2 = Array(10).fill().map((v, i) => i++);

console.log(array); //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(array2); //[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

 

 

더보기 
<!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>
    <div id="triesGame"></div>
    <form id="form">
        <input type="text" id="input" />
        <button>확인</button>
    </form>
    <div id="logs"></div>
    <script>
        const $form = document.querySelector('#form');
        const $input = document.querySelector('#input');
        const $logs = document.querySelector('#logs');

        const $triesGame = document.querySelector('#triesGame');

        const numbers = []
        let out = 0;

        for (let n = 1; n < 10; n += 1) {
            numbers.push(n);
        }
        
        //const number를 map을 이용한 방법
        //const numbers = const numbers = Array(10).fill().map((v, i) => i++);
        //i++이 아닌 i+1로 할 경우 10567 값이 이런 식으로 나옴

        const answer = [];
        for (let n = 0; n < 4; n++) {
            const index = Math.floor(Math.random() * numbers.length);
            answer.push(numbers[index]);
            numbers.splice(index, 1);
        }
        console.log(answer.join(''));

        const tries = [];
        function checkInput(input) {
            if (input.length !== 4) {
                return alert('4자리 숫자를 입력하세요');
            }
            if (new Set(input).size !== 4) {
                return alert('중복되지 않게 입력하세요');
            }
            if (tries.includes(input)) {
                return alert('이미 시도한 값입니다.');
            }
            return true; //return alert = return undefined(undefined는 if문에서 false)
        }

        $form.addEventListener('submit', (event) => {
            event.preventDefault();
            const value = $input.value; //숫자지만 문자열로 가져옴
            $input.value = '';
            const valid = checkInput(value);
            if (!valid) return; //형식이 맞지 않으면 입력 x
            if (answer.join('') === value) { //형식과 값이 맞는 경우
                $logs.textContent = '홈런입니다!';
                return;
            }
            if (tries.length >= 9) {
                $triesGame.textContent = '';
                $logs.append(`패배! 정답은 ${answer.join('')}`);
                return;
            } else {
                $triesGame.textContent = '';
                $triesGame.append(`${tries.length + 1}번 시도, 총 ${10 - (tries.length + 1)}번 남았습니다.`)
            }
            let strike = 0;
            let ball = 0;

            answer.forEach((number, aIndex) => {
                const index = value.indexOf(String(number));
                if (index > -1) {
                    if (index === aIndex) {
                        strike += 1;
                    } else {
                        ball += 1;
                    }
                }
            })
            if (strike === 0 && ball === 0) {
                out++;
                $logs.append(`${value} : ${out}아웃 | ${strike} 스트라이크 ${ball} 볼`, document.createElement('br'));
            } else {
                $logs.append(`${value} : ${strike} 스트라이크 ${ball} 볼`, document.createElement('br'));
            }
            if (out === 3) {
                $logs.append(`${out} 아웃! 정답은 ${answer.join('')}`, document.createElement('br'));
            }
            tries.push(value);
        })
    </script>
</body>

</html>

 

* 결과 동영상

 

* 문제점 

- 아웃 되거나 시도 횟수를 초과할 경우 더 이상 입력해도 값이 눌러지지 않아야 함

(현재는 눌러지는 상황)

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

'과거 프로그래밍 자료들 > Javascript&typescript' 카테고리의 다른 글

자바스크립트 체크 박스 선택 및 전체 체크박스 선택  (0) 2022.09.01
Let's Get IT 자바스크립트 프로그래밍 - 로또 번호 맞추기  (0) 2022.07.22
자바스크립트 개념 5가지 정리 - 추가 중  (0) 2022.07.21
Let's Get IT 자바스크립트 프로그래밍 - 카드 짝 맞추기  (0) 2022.07.20
slice, concat, forEach + 원본을 바꾸는 매서드, 바꾸지 않는 매서드  (0) 2022.07.20
'과거 프로그래밍 자료들/Javascript&typescript' Related Articles more