들어가는 말
오늘은 JavaScript를 이용해 숫자야구게임을 구현해 보자!
처음부터 끝까지 혼자서 구현하기엔 아직 능력이 부족해 제로초님 강의의 도움을 받으면서 만들어 가기로 했다.
작업을 하기 전 가장 중요한 것은 순서도(알고리즘) 을 파악하는 것!! 그리고 동기와 비동기의 개념을 알게되었다. 간단하게는,,, 순서적 / 비순서적!
야구게임을 만들면서 배열 속성들을 몇개 더 알게 되었다.
pop과 shift / push와 unshift.
- pop : 숫자를 마지막꺼부터 하나씩 뽑는다.
- shift : 숫자를 앞에서부터 하나씩 뽑는다.
- push : 뽑은순서대로 앞에서부터 나열한다.
- unshift : 뽑은 순서대로 뒤에서부터 나열한다.
예시) 만약 숫자후보가 1 ~ 9 이고 for문에 의해 4번 반복된다면
- pop : 9, 8, 7, 6
- shift : 1, 2, 3, 4
- pop -> push : 9, 8, 7, 6
- pop -> unshift : 6, 7, 8, 9
- shift -> push : 1, 2, 3, 4
- shift -> unshift : 4, 3, 2, 1
pop과 shift를 사용하면 숫자후보 배열에서 뽑힌 숫자가 하나씩 사라진다! (중복 뽑기 X) -> 숫자배열 배열에 들어가는 느낌 (splice도 마찬가지이다!)
splice(a, b);
- 배열 속 숫자 중 a번째 자리부터 b개를 뽑는다. (a숫자 이후로 b개 선정)
예시
var 숫자후보 = [1,2,3,4,5,6,7,8,9]
var 뽑은것 - 숫자후보.splice(Math.floor(Math.random() * 9), 1);
- Math.floor(Math.random() *9)로 인해 숫자 0 ~ 8까지 랜덤한 숫자가 지정된다.
- 숫자후보에 속한 9개의 숫자들 중 '랜덤한 숫자 번째'(JS에서 순서는 0부터 시작한다) 부터 한개의 숫자가 지정된다.
- splice 로인해 뽑힌 숫자는 숫자후보에서 없어진다 (숫자의 갯수가 한씩 줄어든다.
join과 split
- 문자.split(구분자) -> 배열
- 배열.join(구분자) -> 문자
join (배열을 문자로)
>
var 숫자배열 [2,8,7,9];
String(숫자배열[0]) + String(숫자배열[1]) + String(숫자배열[2]) + String(숫자배열[3])
< 2879근데 이런식으로 코드짜는건.. 옳지않아..!!!!!!!!!!!!!!!
이럴때 사용하는게 배열을 문자로 변환해주는 join
> var 숫자배열 [2,8,7,9];
> 숫자배열.join('')
< "2879"
> 숫자배열.join(',')
< "2,8,7,9"join으로 배열 안의 것들을 특수기호로도 표현할 수 있다.
split (문자를 배열로)
> var 답 = '9546'
> 답.split()
< ["9546"]
> 답.split('')
< ["9", "5", "4", "6"].indexOf(값)
배열.indexOf(값) : 배열에 존재하는 값의 위치를 알 수 있다. (없으면 -1)
숫자야구 게임 만들기
순서도
게임의 규칙
- 10회의 제한 횟수 안에 제시된 숫자를 맞춰야 한다.
- 숫자+숫자의 위치까지 맞으면 스트라이크
- 숫자는 맞지만 그 위치가 다르면 볼
- 없는 숫자는 아무것도 없다.
게임 예시) 제시된 숫자 : 2638
- 유저1 의 정답 : 2345
판정1 : 1 스트라이크, 1볼
- 유저2의 정답 : 2367
판정 : 1스트라이크 2볼
- 유저3의 정답 : 2638
판정 : 홈런
주 사용 속성(?)
splice / Math.floor / pop / push / createElement / form / addEventListener / append / join / split / if ~ else / ceil
주의해야 할 부분
splice 성질로 인한 undefined
var 숫자후보 = [1,2,3,4,5,6,7,8,9];
var 숫자배열 = [];
for (var i = 0; i < 4; i += 1) {
var 뽑은것 = 숫자후보.splice(Math.floor(Math.random() * 9), 1)[0];
숫자배열.push(뽑은것);
}에서 splice로 인해 지정된 숫자는 숫자후보 배열에서 사라지므로 숫자후보의 숫자 갯수가 한씩 줄어든다. 이런 중에 splice로 인해 8번째 숫자의 1개 숫자 를 고르면 존재하지 않는 (9번째에 존재하는 숫자) 숫자를 뽑아야 하므로 undefined가 출력된다!
이를 막기 위해 splice(a, b)에서 a의 값도 반복문이 진행될수록 가능한 범위가 하나씩 줄어들도록 해야한다!
for (var i = 0; i < 4; i += 1) {
var 뽑은것 = 숫자후보.splice(Math.floor(Math.random() * (9 - i)), 1)[0]; 사칙연산 우선순위 계산 주의! 9-i를 괄호로 묶어야댐
문자와 배열 변환 / 문자와 숫자 변환
- 컴퓨터가 제시한 것은 숫자이고, 유저가 입력한 값은 문자로 인식되기에 이를 보완해 주어야 한다.
- 유저가 입력한 값은 문자이고, 컴퓨터가 제시한 것은 배열 이기 때문에 비교하기 위해선 이를 보완해 주어야 한다.
헤맨 부분
join 속성이 인식되지 않는다고...? 왜.. 오타도 안냈는데 왜...?
if (답 === 숫자배열.join('')) {
결과.textContent = '홈런';
입력창.value='';
입력창.focus();ㅠㅠ 정말 답을 알수가 없었다. 혹시나 해서 코드들을 그대로 복사하고 새로운 .js 파일을 만들어 붙여넣기하고, 그 파일을 html 파일과 연결시켜서 실행했더니 잘된다! 잉??????
결과에 따른 조건문,,
알고리즘에 따라 맞췄을때의 경로보다, 맞추지 않았을때 단계별로 결과를 출력해야 하는게 까다로웠다.
조건이 너무 많아서,,, 게임할땐 단순하게 보였는데 역시 뜯어보니 복잡하다 ^^ 게임은 할때나 재밌지,,
