var list = [0,1,2,3,4,5,6,7,8,9];
var number = [];
for (var i = 0; i < 4; i++) {
var select = Math.floor(Math.random() * list.length);
number[i] = list.splice(select, 1)[0];
}지난 시간의 코드입니다. 현재 number 변수에는 네 자리 숫자의 배열이 저장되어 있습니다.
이제 공격자의 숫자를 받아야겠죠? 입력을 받는 함수는 prompt입니다. alert와 친구에요. prompt("숫자를 입력하세요"); 를 콘솔에 쳐보세요. 창이 뜨죠? 거기에 글자를 치면 그 값이 그대로 변수로 전달됩니다.
이제 열 번 반복적으로 숫자를 받을 것이기 때문에 반복문을 만듭니다. 그 전에 10번의 숫자를 셀 count 변수와, 스트라이크, 볼을 기록할 strike, ball 변수를 만들어줍니다. 반복문에는 이미 i 변수가 사용됐기 때문에 알파벳순서대로 j, k를 사용합니다.
var count = 0;
var strike = 0;
var ball = 0;
while (count < 10) {
// 숫자를 입력받고 비교를 준비하는 부분
var input = prompt('숫자를 입력하세요'); // 숫자를 받는 부분
var inputArray = input.split(''); // split함수는 아래에 설명
strike = 0; // strike와 ball의 개수를 초기화
ball = 0;
count++; // 시도 횟수는 하나 증가
// 입력받은 숫자를 비교분석하는 부분
for (var j = 0; j < 4; j++) {
for (var k = 0; k < 4; k++) {
if (number[j] == inputArray[k]) {
if (j === k) {
strike++;
} else {
ball++;
}
break;
}
}
}
// 결과를 표시하는 부분 console객체는 밑에 설명
if (strike === 4) {
console.log('홈런!!! ' + (count - 1) + '번 만에 맞추셨습니다');
break;
} else if (count >= 10) {
console.error('시도 횟수를 초과하셨습니다.');
} else {
console.info(inputArray.join('') + ': ' + strike + '스트라이크 ' + ball + '볼');
}
}차근차근 알아보죠. 일단 count는 0부터 9까지 시작합니다. 몇 번 만에 맞췄나를 보여줍니다. while 문을 쓰는 이유는 몇 번만에 맞출지(몇 번 반복될 지) 모르기 때문에 for 대신 while을 썼습니다.
반복문 안의 var input = prompt('숫자를 입력하세요');에서 입력된 숫자(숫자를 입력했지만 prompt는 문자열로 입력됩니다. 즉, 1234가 아니라 '1234'로 입력됩니다.)를 input변수에 저장하고, var inputArray = input.split(''); 에서 아까 input변수를 한 글자씩 따로 나눕니다.
새로운 함수인데요. 문자열.split(구분자) 함수가 바로 문자열을 쪼개서 배열로 만드는 역할을 합니다. 구분자가 ''(작은따옴표 두개)인데 그냥 한 글자씩 따로 떨어뜨리라는 겁니다. 따라서 '1234'.split('') == ['1','2','3','4']가 됩니다.
이제 수비자가 만든 네 자리 숫자와 공격자가 입력한 네 자리 숫자를 비교해야겠죠? for문이 두 번 중복된 곳이 바로 그 역할입니다.
for (var j = 0; j < 4; j++) {
for (var k = 0; k < 4; k++) {
if (number[j] == inputArray[k]) {
if (j === k) {
strike++;
} else {
ball++;
}
break;
}
}
}복잡해보일 수도 있지만 차근차근 보면 number[0]과 inputArray[0]을 비교하고, number[0]과 inputArray[1]을 비교하고, number[0]과 inputArray[2], ... , number[3]과 inputArray[3]을 비교하는 것을 알 수 있습니다.
그리고 number[k] == inputArray[j]일 때 (여기서 === 대신 ==을 썼습니다. 왜냐하면 number[j]는 숫자고 inputArray[k]는 문자열이기 때문에 자료형을 제외하고 값만 비교합니다.) 만약, j === k면 자리수도 같은 것이기 때문에 스트라이크가 됩니다. 다르다면 자리수는 같지 않고 값만 같은 것이기 때문에 볼이 되고요.
헷갈린다면 네 자리수 배열 두 개를 직접 만든 뒤에 반복적으로 계산해보세요. 마지막 break;는 number[j]와 inputArray[k]가 같을 경우 다음 자리로 넘어가기 위해 중복문을 하나 break하는겁니다. break는 모든 중복문을 멈추는 게 아니라 가장 가까운 하나만 멈춥니다. 물론 break를 생략해도 정상 작동하지만, 불필요한 비교를 그만두고 바로 다음 것으로 넘어가라고 알려주는 겁니다. 프로그래밍에서 효율과 성능은 중요하니까요.
if (strike === 4) {
console.log('홈런!!! ' + (count - 1) + '번 만에 맞추셨습니다');
break;
} else if (count >= 10) {
console.error('시도 횟수를 초과하셨습니다.');
} else {
console.info(inputArray.join('') + ': ' + strike + '스트라이크 ' + ball + '볼');
}결국 반복문을 돌면서 자동으로 비교해 strike와 ball이 ++되고, 결과만 표시해주면 됩니다. 결과 부분은 쉽죠? 근데 console객체를 처음 보셨을 겁니다. console객체는 우리가 실습할 때 썼던 브라우저의 F12 콘솔의 그 콘솔입니다. console.log(내용), console.info(내용), console.error(내용), console.warn(내용) 등이 있는데 각각 일반기록, 정보, 에러, 경고를 나타냅니다. 콘솔에 한 번 쳐보세요.
결과를 출력하는 부분 '홈런!!! ' + count + '번 만에 맞추셨습니다'를 보면 문자열에 count를 더합니다. 좀 이상하죠? 이게 문자열의 연결 방법입니다. 숫자는 + 하면 더해지지만, 문자열은 +하면 두 개의 문자열이 합쳐집니다. 숫자나 다른 것들도 강제로 문자열로 변경되어 합쳐집니다.
만약 count가 5라고 하면 홈런!!! 5번 만에 맞추셨습니다.가 됩니다. 숫자 5가 강제로 문자열 '5'로 바뀌어서 문자열끼리 더해지는 겁니다. 문자열에 더하는 것은 모두가 강제로 문자열이 된다는 것을 기억하세요!
마지막에 inputArray.join('')도 있는데 배열.join(구분자)는 배열을 합쳐서 문자열로 만드는데 배열의 아이템 사이에 구분자를 넣으란겁니다. 여기서 ''는 구분자 없이 그냥 합치라는 뜻입니다. [1,2,3,4].join('')=='1234'가 되고, [1,2,3,4].join(':')=='1:2:3:4'가 됩니다.
마지막은 처음부터 끝까지 완성 코드입니다. 실행 결과도 보여드릴게요.
저보다 더 빨리 맞춰보세요! ㅎㅎ
var list = [0,1,2,3,4,5,6,7,8,9];
var number = [];
for (var i = 0; i < 4; i++) {
var select = Math.floor(Math.random() * list.length);
number[i] = list.splice(select, 1)[0];
}
var count = 1;
var strike = 0;
var ball = 0;
while (count <= 10) {
var input = prompt('숫자를 입력하세요');
var inputArray = input.split('');
strike = 0;
ball = 0;
count++;
for (var j = 0; j < 4; j++) {
for (var k = 0; k < 4; k++) {
if (number[j] == inputArray[k]) {
if (j === k) {
strike++;
} else {
ball++;
}
break;
}
}
}
if (strike === 4) {
console.log('홈런!!! ' + (count - 1) + '번 만에 맞추셨습니다');
break;
} else if (count > 10) {
console.error('시도 횟수를 초과하셨습니다.');
} else {
console.info(inputArray.join('') + ': ' + strike + '스트라이크 ' + ball + '볼');
}
}찬찬히 다시 한 번 봐 보세요. 중요한 것은 알고리즘입니다. 아무리 언어를 알고 문법을 알더라도 알고리즘을 모르면 프로그램을 짤 수 없습니다. 조만간에 알고리즘 강의도 해야겠네요. 알고리즘을 알아야 언제 반복문을 쓰고 언제 조건문을 쓸 지 판단할 수 있습니다. 이 프로그램을 더 업그레이드 해보세요!
- prompt에서 취소를 눌렀을 때 게임을 종료하도록 업그레이드(힌트: prompt때 취소를 누르면 input이 null이 됩니다)
- 중복된 숫자(예: 2254)를 입력했을 때 오류가 표시되도록 업그레이드
- 몇 번째 시도인지 항상 보여주도록 업그레이드(힌트: console.info에 count를 추가하면 됩니다)
이제 왕초보를 벗어나셨습니다. 다음 강의부터는 자바스크립트에서 기본적으로 제공하는 객체와 함수들에 대해 알아보겠습니다. console이나 Math같은 것과, 배열.join() 배열.split()같은 함수들을요.
익명
ZeroCho
