TIL no.11 - JS 배열 (숫자야구 게임 구현#1)

김종진·2020년 12월 15일

TIL array js 반복문

JavaScript

목록 보기

4/18

JavaScript Array

자바스크립트 문법 공부를 숫자야구 게임을 구현해보면서 배워보았다.
배열과 배열 내장함수(splice,push,pop,split 등)을 제대로 배웠다.

배열이란?
el = [1,2,3,4]
이와 같이 순차적으로 데이터를 저장하는 자료구조
배열 데이터 선택 방법
array[index]
el[0] = 1 , el[2] = 3

숫자야구 게임 프로그래밍

★ 프로그램 구현
프로그래밍 코딩에 있어 알고리즘을 먼저 그려보고 순서대로 구현하는 것이 중요하다는 것을 배웠다.

1. 랜덤 숫자 4자리 추출

let numberArray = [1,2,3,4,5,6,7,8,9];
let number = [];

for (let i = 0; i < 4; i++){
    let selectedNum = numberArray.splice(Math.floor(Math.random() * (9 - i)),1)[0];
    number.push(selectedNum);
}

1-1. 후보 숫자를 변수 numberArray에 배열로 담아줍니다.
1-2. 반복문을 돌려 무작위로 하나씩 숫자를 뽑아서 number 변수에 담아줍니다.
(9 - i) 가 작성된 이유는 숫자 9개에서 하나를 추출 후 다음 숫자 추출 시 숫자가 8개 있는 상태에서 뽑아야 하기 때문입니다. 그렇지 않을 경우 undefinded(이미 뽑힌) 값이 나올 수 있기 때문입니다.

splice

splice(시작인덱스, 갯수)
시작위치를 지정 후 적은 갯수 만큼 배열에서 값을 삭제합니다.
ex)
a = [1,2,3,4,5]
b = a.splice(1,2)
console.log(b) // 제거한 요소를 배열로 반환 [2,3]
splice 함수를 사용할 경우 원본 배열은 변경됩니다.

push

push(값)
배열 맨뒤에 해당 값을 추가합니다.
ex)
a = [1,2,3]
a.push(4)
console.log(a) // [1,2,3,4]

2. 숫자 입력후 게임 결과 판별

const form = document.querySelector('form');
const input = document.querySelector('input');

form.addEventListener('submit', function(e){
    e.preventDefault();
    let answer = input.value;
    if( answer === number.join('')){
        cosnole.log('홈런')
    } else {
    	console.log('실패')
    }

2-1. input창에 숫자 4자리를 입력하고 제출합니다.
e.preventDefault(); 코드를 작성해주는데 이유는 form의 'submit' 이벤트가 발동시 페이지의 새로고침이 발생하기 때문에 그 작업을 막아주기 위함입니다.
2-2. number의 값은 배열로 나오기 때문에 join 함수를 사용 하여 input 값과 비교 해줍니다.

console.log(number) // [1,2,3,4]
console.log(answer) // 1234
console.log(number('')) // 1234

join

join(구분기호)
배열 속 값을 구분기호로 문자열로 합쳐줍니다.
ex)
a = [1,2,3,4]
b = a.join('') // 빈칸
c = a.join("-") // "-"
console.log(b) // 1234
console.log(c) // 1-2-3-4

2-3. number.join('')값과 answer 값이 같다면 '홈런' 다르다면 '실패'

3. 실패시 득점 결과 판별

form.addEventListener('submit', function(e){
    e.preventDefault();
    let answer = input.value;
    if( answer === number.join('')){
        cosnole.log('홈런')
    } else {
    	let answerArray = answer.split('');
        let strike = 0;
        let ball = 0;
        for ( let i = 0; i < 4; i++){
            if(Number(answerArray[i]) === number[i]){
                strike++;
                } else if(number.indexOf(Number(answerArray[i])) > -1) {
                ball++;
                }
            }
     }

3-1 answer 값을 split함수로 나눠줍니다.

split

split(구분의 기준이 되는 문자열)
문자열 값을 구분기준으로 배열로 반환합니다.
ex)
a = 1234
b = a.split('')
c = a.split('',2) // 2개의 배열만 반환하고 나머지는 버림
console.log(b) // ["1", "2", "3", "4"]
console.log(c) // ["1", "2"]

3-2. 문제와 입력 숫자 값이 다를시 한자리씩 반복문을 통해 비교를 해줍니다.
Number(answerArray[i]) === number[i] 이렇게 작성한 이유는 answerArray의 값은 문자열이고 number값은 숫자이기 때문에 Number로 감싸줘서 숫자를 비교하도록 합니다.
여기서 숫자 값이 같을 시 자리도 일치, 숫자도 일치 이기 때문에 strike입니다.

3-3. strike가 아닐시 입력 숫자가 다른 자리에 있는지 검사해봅니다.