[자바스크립트] 야구게임 만들기
배열과 배열관련 메소드를 활용하여 야구게임을 만들어 보았다.
1. DOM을 이용한 html 코드
DOM을 이용하여 html를 작성하였다.
var divTitle = document.createElement("div");
document.body.appendChild(divTitle);
var strikeZone = document.createElement("h2");
divTitle.appendChild(strikeZone);
var form = document.createElement("form");
document.body.appendChild(form);
var input = document.createElement("input");
form.appendChild(input);
var button = document.createElement("button");
form.appendChild(button);
button.textContent = '입력';
var result = document.createElement("div");
document.body.appendChild(result);
var result2 = document.createElement("div");
document.body.appendChild(result2);
2. 배열의 활용
array에 배열을 1~9까지 저장하였다. 이 변수는 나중에 랜덤으로 1~9까지 수를 뽑기 위해 구성하였다.
array1에는 빈 배열을 만들었는데 그 이유는 1~9까지 뽑은 변수를 저장하기 위해 만들었다.
fail 변수는 후에 기능이 나오면 다시 설명을 하겠다.
var array = [1,2,3,4,5,6,7,8,9];
var array1 = [];
var fail = 0;ramdomArray 라는 함수는 array와 array1를 초기화 하기 위해 만들었고 그 후 for문에는 splice와Math.random 메소드를 통해 배열에 넣을 숫자를 랜덤으로 뽑을수 있다. 여기서 [0]을 사용한 이유는 각각의 배열이 아닌 하나의 배열을 뽑기 위해 사용하였다. 그 후 push 함수를 통하여 배열을 정렬 시켰다.
function randomArray(){
array = [1,2,3,4,5,6,7,8,9];
array1 = [];
fail =0
for(var i=0; i<4; i++){
var pick = array.splice(Math.floor(Math.random()*(9-i)), 1)[0];
array1.push(pick);
}
};
randomArray();사용 메소드
- splice 배열 추출 메소드
- Math.random 숫자를 무작위로 뽑음
- Math.floor 소수점 내림
- push 뽑은 배열 정렬
3. addEventListener 기능 구현 설명
button.addEventListener 을 통해 클릭이나 엔터를 사용하면 컴퓨터에서 만든 숫자와 사용자가 입력한 숫자를 비교를 할 수 있게 기능을 구현하였다. 여기서 엔터를 사용할 수 있는 이유는 form 태그를 사용하였고 기본적으로 엔터를 사용하면 초기화가 되지만 preventDefault(); 메소드를 통해 초기화를 안되게 만들었다. 그리고 나서 correct 변수에 사용자가 input에 넣은 수를 저장하였다.
button.addEventListener('click', function(e){
e.preventDefault();
var correct = input.value;사용 메소드
- preventDefault(); form 태그에서 엔터를 눌렀을 때 페이지 초기화 방지
4. addEventListener 기능 구현 설명2
첫번째 if 함수를 통해 만약 사용자가 입력한 숫자가 ramdom 함수가 만들어낸 숫자와 동일하다면 '홈런'이라는 텍스트가 나오게 설정하였고 후에 사용자가 정답을 맞췄기 때문에 randomArray(); 함수를 통해 초기화를 시켜줘 다시 게임을 할 수 있게 만들었다. 여기서 join 메소드를 사용한 이유는 join에 array에 저장된 수는 배열이기 때문에 배열을 문자로 바꾸는 메소드를 사용하여야 input에 저장된 문자와 비교 할 수 있기 때문이다.
if(array1.join('') === correct){
strikeZone.textContent = '홈런';
randomArray();
}사용 메소드
- join('') 함수를 통해 배열을 문자로 바꿔줌
만약 정답을 맞추지 못하였다면 fail이라는 변수가 하나 올라가게 되는데 이 변수는 만약 사용자가 정답을 맞추면 올라가게 된다. 변수를 만든 이유는 게임에 정답을 맞출 수 있는 기회이다. 틀린 횟수가 10번이 넘어가게 되면 randomArray(); 함수가 실행 되어 게임이 리셋되게 된다.
else{
fail +=1;
if(fail>10){
strikeZone.textContent = '10번이 넘었습니다.' + '정답은' + array1.join('') + '입니다.'
randomArray();
}기회가 10번 안쪽이면 스트라이크와 볼을 비교하게 된다. for문을 통해 4개의 배열을 비교하게 되는데 여기서 array1은 배열이기 때문에 correctArray라는 변수에 split 메소드를 사용하여 input에 저장된 문자를 배열로바꾸어 저장하여 비교를 해야된다. 후에 if문에서는 각 배열의 자리를 비교하여 스트라이크를 그렇지 않으면 indexOf을 통하여 array1에 같은 수가 있는지 없는지를 구분하여 볼의 여부를 결정한다.
(Number을 사용한 이유는 correctArray에 저장된 수들는 split메소드를 통해 바꾸었기 때문에 숫자로 바꿔줘야된다.)
var correctArray = correct.split('');
var strike = 0;
var ball = 0;
for(var i=0; i<4; i++){
if(array1[i]===Number(correctArray[i])){
strike +=1;
}
else if(array1.indexOf(Number(correctArray[i]))> -1){
ball +=1;
}
}사용 메소드
- Number 수로 바꿔주는 함수
- indexOf 배열에 어떠한 수가있는지 확인 하는 함수
후에는 스트라이크, 볼의 수를 텍스트로 출력하고 실패의 수도 같이 텍스트로 출력해 주었다.
result.textContent = strike + '스트라이크' + ball + '볼';
input.focus();
input.value = '';
result2.textContent = fail + '번했습니다.'
}사용 메소드
- focus() 커서를 다시 활성화 해주는 함수
5. 전체 코드
var divTitle = document.createElement("div");
document.body.appendChild(divTitle);
var strikeZone = document.createElement("h2");
divTitle.appendChild(strikeZone);
var form = document.createElement("form");
document.body.appendChild(form);
var input = document.createElement("input");
form.appendChild(input);
var button = document.createElement("button");
form.appendChild(button);
button.textContent = '입력';
var result = document.createElement("div");
document.body.appendChild(result);
var result2 = document.createElement("div");
document.body.appendChild(result2);
var array = [1,2,3,4,5,6,7,8,9];
var array1 = [];
var fail = 0;
function randomArray(){
array = [1,2,3,4,5,6,7,8,9];
array1 = [];
fail =0
for(var i=0; i<4; i++){
var pick = array.splice(Math.floor(Math.random()*(9-i)), 1)[0];
array1.push(pick);
}
};
randomArray();
button.addEventListener('click', function(e){
e.preventDefault();
var correct = input.value;
if(array1.join('') === correct){
strikeZone.textContent = '홈런';
randomArray();
}
else{
fail +=1;
if(fail>10){
strikeZone.textContent = '10번이 넘었습니다.' + '정답은' + array1.join('') + '입니다.'
randomArray();
}
var correctArray = correct.split('');
var strike = 0;
var ball = 0;
for(var i=0; i<4; i++){
if(array1[i]===Number(correctArray[i])){
strike +=1;
}
else if(array1.indexOf(Number(correctArray[i]))> -1){
ball +=1;
}
}
result.textContent = strike + '스트라이크' + ball + '볼';
input.focus();
input.value = '';
result2.textContent = fail + '번했습니다.'
}
}); 6. 부족했던 부분
- 배열이 문자로 저장되었는지 수로 저장되었는지 잘 몰라 헷갈렸다. > console.log을 통해 확인
- randomArray 함수로 만든 부분이 많이 사용하여 함수로 만들었지만 초기화를 잘못하여 많은 시간이 소요되었다.
- 로직 짜는 연습을 좀 더 해야될 것 같다.
