JS 숫자야구 구현

숫자야구 구현하기.

• push: 뒤에 밀어 넣는 것 (1, 2, 3, 4)
• pop: 마지막 순으로 뽑아 나가는 것 (9, 8, 7, 6)
• shift: 앞에서부터 뽑아 나가는 것 (1, 2, 3, 4)
• unshift: 앞에 밀어 넣는 것 (4, 3, 2, 1)
• splice: 뽑고 싶은 위치 기입
  • 4를 뽑고 싶으면 해당 위치인 3 / 해당 위치로부터 하나를 뽑고 싶다 1
  • ex) splice(3, 1) → 3
  • ex) splice(3, 3) → 3, 4, 5
• [0]을 기입하는 이유는 첫번째로 선택하려고 하는 것. 그렇지 않으면 각각의 배열로 출력됨.
  • ex) [1], [4], [2], [9]
  • 우리가 원하는 배열 → [1, 4, 2, 9]
• 배열.join: 배열을 합치게 해줌.
  • join(''): “1234”
  • join(','): “1,2,3,4”
  • join(':'): “1:2:3:4”
• 문자.split: 문자를 배열로 만들어줌.
• indexOf: 해당 배열에서 해당 내용이 어디에 들어있는지 찾아줌.
  • ex) array[2, 3, 5, 9]에서 array.indexOf(3) → [1]
  • 없으면 -1

var body = document.body;
var num;
var numArray;

function pickNum() {
  num = [1,2,3,4,5,6,7,8,9];
  numArray = [];
  for (var i = 0; i < 4; i += 1) {
    var pick = num.splice(Math.floor(Math.random() * (9 - i)), 1)[0];
    numArray.push(pick);
  }
}

pickNum();

var result = document.createElement('h1');
body.append(result);
var form = document.createElement('form');
document.body.append(form);
var input = document.createElement('input');
form.append(input);
input.type = 'text';
input.maxLength = 4;
var button = document.createElement('button');
button.textContent = '입력';
form.append(button);
var wrong = 0;

form.addEventListener('submit', function num_baseball (e) {
    e.preventDefault();
    console.log(numArray);
    var answer = input.value;
    if (answer === numArray.join('')) {
        result.textContent = '홈런';
        input.value = '';
        input.focus();
        pickNum();
        wrong = 0;
    } else { // 답이 틀리면
        var answerArray = answer.split('');
        var strike = 0;
        var ball = 0;
        wrong += 1;
        if ( wrong > 10) {
            result.textContent = '10번 넘게 틀려서 실패! 답은' + numArray.join(',') + '였습니다!';
            input.value = '';
            input.focus();
            pickNum();
            wrong = 0;
        } else {
            for(var i =0; i < 3; i+= 1) {
                if (Number(answerArray[i]) === numArray[i]) {
                    strike += 1;
                } else if (numArray.indexOf(Number(answerArray[i])) > -1) {
                    ball +=1;
                }
            }

            result.textContent = strike + 'strike' + ball + 'ball입니다.';
            input.value= '';
            input.focus();
        }
    }
});

---

REFERENCE
https://www.inflearn.com/course/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B2%8C%EC%9E%84-%EA%B0%9C%EB%B0%9C/lecture/17174?tab=curriculum&mm=null