개발일기

#4 숫자야구

세고래 2021. 7. 4. 18:58

※소소한 개인 프로젝트 기록입니다.

1) 과정

이번엔 숫자야구다.

숫자야구의 방식은, 상대방이 고른 4개의 숫자를 맞히는 게임이다.

 

가령, 상대방이 1234 를 골랐다고 하자.

내가 제출한 정답이 1243일 경우 2스트라이크 2볼이 되는데,

자리수, 숫자 모두 같을 경우 스트라이크로, 자리는 다르지만 정답에 포함되어있는 숫자일 경우 볼로 처리한다.

(위와 같은 경우에는 1,2가 자리, 숫자가 똑같아서 2스트라이크. 4,3은 자리는 다르지만 정답에 포함되어 있으므로 2볼.)

내가 만든 게임에서는 10번의 기회 내에 정답을 제출하면 승리(홈런), 10번의 기회 내에 정답을 맞히지 못하거나 혹은 아웃(0스트라이크 0볼)이 3번 될 경우 패배하고 정답이 무엇인지 출력된다.

 

앞서 간략하게 설명했지만 그래도 들어있는 기능을 정리하고 가겠다.

- 10번의 기회동안 정답 제출 가능. 제출합 답과 해당 답에 대한 스트라이크와 볼 정보를 입력창 밑에 나열 

- 0스트라이크 0볼은 아웃으로 처리, 삼진 아웃은 정답제출횟수와 상관없이 바로 패배

- 10번의 기회를 모두 소진하면 패배. 패배하면 정답이 무엇인지 알려줌

- 승리하면 '홈런'임을 알려줌

+ 숫자 야구 게임을 할 것인지 여부 묻기(예/아니오 에 따라 실행여부 달라짐)

+ setTimeout으로 마치 상대방이 진짜 고르고 있는 것처럼 연출

 

- 는 zero cho 님 강의에서 기본적으로 나오는 기능이고,

+는 내가 임의적으로 추가한 기능이다.(+css 도 내가 임의로 좀 꾸몄다!)

 

그리고 숫자야구 게임에서 중요한 건 바로 '에러처리'이다.

사용자가 정답으로 입력하는 값이 올바른 형식인지 확인하고,

올바른 형식이 아니라면 다시 입력하라고 alert로 알려줘야 한다!

 

다음은 처리해줘야 하는 에러의 경우다.

1. 4자리의 숫자가 아닌 경우

2. 숫자만 입력되지 않은 경우(다른 자료형과 섞여있거나 아예 숫자가 들어오지 않은 경우)

3. 이전에 시도했던 답을 제출한 경우 (쓸데없이 기회를 소진하는 것을 방지)

4. 4자리 중 중복된 숫자를 사용한 경우 (숫자야구 게임은 숫자당 1번씩만 쓸 수 있음)

 

const chkInput=(value)=>{
    if(value.length!==4){ //4자리가 아니라면
        return alert('4개의 숫자를 입력해주세요.');
    }
    else if(isNaN(value)){//숫자말고 다른게 들어오면
        return alert('숫자만 입력해주세요.');
    }
    else if(tries.includes(value)){ //이미 이전에 제출한 답이라면
        return alert('이미 시도한 값입니다. 다시 입력해주세요.');
    }
    else if(new Set(value).size!==4){//set은 중복된 값이 들어오지 않음. 중복된 값이 없으면 size가 4
        return alert('중복된 숫자가 있습니다. 다시 입력해주세요.');
    }
    return true;
};
}

(Set 객체에 대한 설명은 참고자료에 첨부)

2) 결과

 

3) 참고자료

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Set

 

Set - JavaScript | MDN

Set 객체는 자료형에 관계 없이 원시 값과 객체 참조 모두 유일한 값을 저장할 수 있습니다.

developer.mozilla.org

- Set 객체에 대한 설명

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/random

- Math.random() 함수

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

 

Array.prototype.splice() - JavaScript | MDN

splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.

developer.mozilla.org

-splice() 함수

https://thebook.io/080270

 

더북(TheBook): Let's Get IT 자바스크립트 프로그래밍

 

thebook.io

- zero cho 님, Let's Get It 자바스크립트 프로그래밍

728x90

'개발일기' 카테고리의 다른 글

#3-2 계산기(+α 버전)  (0) 2021.07.02
#3-1 계산기  (0) 2021.06.27
#2 쿵쿵따 게임  (0) 2021.06.25
#1 로또 번호 추첨기  (0) 2021.06.07