pig game project -3

홀드 버튼을 누르면 점수가 저장되고 20점에 도달하면 게임이 끝나게 되는 걸 구현했다. 게임이 끝나면 배경화면이 검정색으로 변한 뒤 그 후에는 버튼을 눌러도 더 이상 점수가 올라가지 않게 했다.

게임이 진행 중일 때만 플레이할 수 있도록 playing 변수를 boolean 타입으로 true로 초기화했다.

const scores = [0, 0];
let currentScore = 0;
let activePlayer = 0;
let playing = true;

btnHold.addEventListener('click', function () {
  if (playing) {
    //1.Add current score to active player's score
    scores[activePlayer] += currentScore;
    // scores[1] = scores[1] + currentScore
    document.getElementById(`score--${activePlayer}`).textContent =
      scores[activePlayer];

    //2. Check if player's score is >=100
    if (scores[activePlayer] >= 20) {
      //Finish the game
      playing = false;
      diceEl.classList.add('hidden');
      document
        .querySelector(`.player--${activePlayer}`)
        .classList.add('player--winner');
      document
        .querySelector(`.player--${activePlayer}`)
        .classList.remove('player--active');
    } else {
      //3.Switch to the next player
      switchPlayer();
    }
  }
});

이렇게 홀드 버튼에 addEventListener를 추가한 뒤, if문을 통해서 스코어가 20 이상이면 더 이상 플레이할 수 없도록 playing = false로 설정했다. if (playing){}안에 코드를 작성한 이유는 playing이 true일 때만 작동하게 하기 위해서이다.

그리고 주사위도 없애주기 위해

diceEl.classList.add('hidden');

hidden 클래스를 추가해주었다.

그 후에

 document
        .querySelector(`.player--${activePlayer}`)
        .classList.add('player--winner');
      document
        .querySelector(`.player--${activePlayer}`)
        .classList.remove('player--active');

player--winner 클래스를 추가해주었고 (이기면 그 플레이어 섹션 화면이 검정색이 되는 효과), player--active 클래스를 제거해주었다 (게임이 끝나면 다른 플레이어로 전환할 필요가 없으므로).
그 후에 else문에는 switchPlayer() 함수를 호출했다. 이 함수는 다른 곳에서도 사용되므로 이미 아래와 같이 정의해두었다.

const switchPlayer = function () {
  document.getElementById(`current--${activePlayer}`).textContent = 0;
  currentScore = 0;
  activePlayer = activePlayer === 0 ? 1 : 0;
  player0El.classList.toggle('player--active');
  player1El.classList.toggle('player--active');
};

다음으로 New game 버튼을 누르면 모든 것이 초기화되는 코드를 보자.
간단하게 이렇게 할 수 있는데, init 함수에 초기 상태를 저장해두었다

let scores, currentScore, activePlayer, playing;

// Starting conditions

const init = function () {
  scores = [0, 0];
  currentScore = 0;
  activePlayer = 0;
  playing = true;

  score0El.textContent = 0;
  score1El.textContent = 0;
  current0El.textContent = 0;
  current1El.textContent = 0;

  diceEl.classList.add('hidden');
  player0El.classList.remove('player--winner');
  player1El.classList.remove('player--winner');
  player0El.classList.add('player--active');
  player1El.classList.remove('player--active');
};

init();

btnNew.addEventListener('click', init);

함수 밖에 let scores, currentScore, activePlayer, playing;을 선언한 이유는 이렇게 함수 밖에 선언하지 않으면 다른 함수들이 이 변수들을 사용할 수 없기 때문이다. 스코핑이라는 개념 때문에 함수 안에 선언한 변수들은 함수 밖에서 사용할 수 없다. 이 init 함수는 처음 화면이 로드될 때 실행되기 때문에 함수 밖에 선언한 변수들의 값이 바로 즉시 적용된다.