숫자 야구 게임 | 아웃 만들기

⚾︎ 순서도 수정

아웃 만들기

if(strike === 0 && ball === 0) {
    out++;
    $logs.append(
      `${value}`, 
      document.createElement('br'), 
      ` 🙅🏻‍♂️ 아웃 🙅🏻‍♂️`,  
      document.createElement('br'), 						
      document.createElement('br')
    );
  } else {
    $logs.append(
      `${value}`,
      document.createElement('br'), 
      `${strike} 스트라이크 ${ball} 볼`,
      document.createElement('br'), 
      document.createElement('br')
    );
  }
  if (out === 3) {
    defeated();
    return;
  }

---

✨ 완성 ✨

✅ 10회 입력하기

✅ 경고창

✅ 홈런

✅ 아웃

배열 반복문

1. forEach((element, index) => {})

배열 한 자리 한 자리마다 함수를 적용해서 실행해 준다.

const answer = [3,1,4,6];
const value = '3214';
let strike = 0;
let ball = 0;
answer.forEach((element, i) => {
    const index = value.indexOf(element);
    if(index > -1) {
        if (index === i){
            strike += 1;
        } else {
            ball += 1;
        }
    }
})

2. map((element, index) => {})

반복문 역할을 하면서 값을 바꿔 준다.
단, 기존 배열은 바뀌지 않음.

✅ for 문

const arr = [1,2,3,4];
const result = [];
for(let i = 0; i < 4; i++){
    result.push(arr[i] * 2);
}

result // (4) [2, 4, 6, 8]

✅ map

const arr = [1,2,3,4];
const result = [];
arr.map((element, i) => {
    return element * 2;
})

// (4) [2, 4, 6, 8]

3. fill()

빈배열을 만들 때 어떤 값으로 채울지 사용한다.

• Array(9) : 배열의 개수가 9개인 빈배열이 만들어 짐.
  

• Array(9).fill() : 배열 각 요소에 undefined 를 반환.

• Array(9).fill(0) : 배열 각 요소에 0을 반환.

1,2,3,4,5,6,7,8,9 를 반환하고 싶다면, 요소는 모두 0이더라도 인덱스는 0,1,2,3,4,5,6,7,8 이므로 i(인덱스) + 1 을 return 값으로 반환한다.

fill, map 은 연달아서 사용할 수 있기 때문에 편리하다.

---

💬 마치며...

html 과 css 를 더 다듬고, 게임 방법을 추가하였다.
모두 문제없이 잘 작동한다. 😊
숫자 야구 게임을 만들며, 배운 내용은 Math.random, append, appendChild, indexOf, includes 가 있었다.

또한, 배열의 3가지 메서드 (forEach, map, fill) 을 추가로 공부하였다.