자바스크립트로 숫자야구게임 만들기(2)

숫자야구게임의 규칙

1. 컴퓨터가 랜덤한 숫자 세개를 뽑는다. (범위는 1~9)
2. 사용자가 랜덤한 숫자 세개를 입력한다.(범위 1~9)
3. 사용자가 입력한 숫자 중에서 컴퓨터가 입력한 숫자와 인덱스, 값이 같은 숫자가 있으면 스트라이크이다.
4. 사용자가 입력한 숫자 중에서 컴퓨터가 입력한 숫자와 값은 같지만 인덱스는 다른 숫자가 있으면 볼이다.
5. 입력한 숫자 세개가 컴퓨터가 뽑은 숫자의 값과 인덱스 모두 동일하면 홈런이다.(게임 다시 시작)

 

실제 코드

var head = document.createElement('h1');
head.textContent = "숫자야구게임";
document.body.append(head);
var form = document.createElement('form');
document.body.append(form);
var input = document.createElement('input');
form.append(input);
var button = document.createElement('button');
button.textContent = "확인";
form.append(button);
var result = document.createElement('div');
document.body.append(result);
//화면을 구성하는 html 태그 작성

var num = [1,2,3,4,5,6,7,8,9];
var computer = [];
function pick () {    
    for(var i=0; i<3; i+=1) {   
        var random = num.splice(Math.floor(Math.random()*(9 - i)), 1)[0];   
        computer.push(random);
        }
   
//빈배열을 생성하여, 실행시킬때 빈 배열에 랜덤한 숫자가 들어갈 것이다.
//숫자는 num배열안의 값들 중에서 임의로 선택된다.(splice함수)
//splice를 실행하면 ([1] 과같이) 배열 타입으로 반환하므로 인덱스 번호인 [0]을 통해 number타입으로 받아올 수 있다.
//random을 인자로 받은 push함수는 computer 배열의 맨 뒷자리부터 값(요소)을 하나씩 넣는다.
}
pick();
//임의의 숫자를 뽑는 함수 실행
form.addEventListener('submit',function user(e) {    
    e.preventDefault();
    var userNum = input.value;
//사용자가 입력한 값을 담은 변수
    var comNum = computer.join('');
//생성된 임의숫자들(배열안의 요소)을 문자열로 가져와서 변수에 담았다.
    if(Number(userNum) === Number(comNum)) {       
        result.textContent="홈런입니다!";    
//입력한 값 === 임의숫자 이면 홈런이다.
//문자열이기 때문에 둘을 Number로 타입을 바꿔줘야한다.
    } else {        
        var strike = 0;       
        var ball = 0; 
//스트라이크와 볼의 횟수를 체크하기 위한 변수이다.      
        var inputNum = userNum.split('');
//유저가 입력한 숫자(문자열)을 split을 통해 배열로 만들었다.
    for(var i=0; i<3; i++) {            
        if(Number(inputNum[i]) === Number(computer[i])) {                
            strike+=1;                           
        } else if (computer.indexOf(Number(inputNum[i])) > -1) {                 
      //indexOf는 동일한 숫자 없으면 -1을 반환한다.               
        ball+=1; 
        }       
    }        
result.textContent = strike + "스트라이크" + ball + "볼입니다.";        
input.value='';        
input.focus();    
    }
})