숫자야구 게임 프로그래밍

4. 도전 횟수 제한하기

게임에 아슬아슬한 묘미를 주기 위해 도전 횟수를 제한합니다.

4-1. 답이 틀렸을때 도전 횟수가 초과하면 게임을 종료하도록 합니다.

const turnNum = document.querySelector('.turn'); // 남은 횟수 표시 
let turn = 0; // 게임 횟수
...
else { // 답이 틀렸을때 
  if(turn > 5){
    result.textContent = "실패 답은 "+ number.join('') + "였습니다.";
    turnNum.textContent = "없습니다";
  }
  else{
  ...
  }
}

5. 게임 정보 표시하기

5-1. 답이 틀렸을 때 strike와 ball 값 표시
5-2. input 값과 결과값을 리스트에 표시
5-3. turnNum (남은 기회 수) 1회 차감 후 표시

let answerRow = document.createElement('div');
const turnNum = document.querySelector('.turn');
...
else {
    	let answerArray = answer.split('');
        let strike = 0;
        let ball = 0;
        turnNum.textContent = 3 - turn; // turn 횟수가 1씩 올라가면서 남은횟수는 1씩 차감
        for ( let i = 0; i < 4; i++){
            if(Number(answerArray[i]) === number[i]){
                strike++;
                } else if(number.indexOf(Number(answerArray[i])) > -1) {
                ball++;
                }
            }
           result.textContent = `${strike}Strike ${ball}Ball`
           answerRow.textContent =` ${input.value}  ${result.innerText}`
           list.appendChild(answerRow);
     }

Template literals

Template literals은 내장된 표현식을 허용하는 문자열 리터럴입니다.
해당 문자열은 백틱(`)으로 감싸줍니다.

ex) 
let strike = 1 
let ball = 2
result.textContent = 
`${strike}Strike ${ball}Ball`
// 텍스트는 "1Strike 2Ball" 이 출력됩니다.
result.textContent = `${strike+ball} 포인트`
// 텍스트는 "3포인트" 가 출력됩니다. 

createElement , appendChild

자바스크립트 이용하여 HTML 요소를 추가합니다.
document.createElement('div');
다음과 같은 코드를 생성합니다.

<div></div>

document.createTextNode( '프론트엔드' )
프론트엔드 라는 문자열을 생성합니다.
.appendChild()
선택한 요소 안에 자식 요소를 추가합니다.

6. 최종 게임 화면

참고 강의
인프런 자바스크립트 게임 만들기