이번 포스트에서는 주사위에서 1이 나올 때 다른 플레이어로 스위치해주는 기능을 코드로 작성해 보겠다.
// Selecting elements
const player0El = document.querySelector('.player--0');
const player1El = document.querySelector('.player--1');먼저 맨 위에 이렇게 플레이어들을 각각 지정해 주었다. 현재 점수를 0으로 초기화해 준 부분에 덧붙여 이렇게 작성해 주었다.
const scores = [0, 0];
let currentScore = 0;
let activePlayer = 0;플레이어를 0과 1로 구분하므로 처음 게임을 시작하는 플레이어는 0이다. 그렇기 때문에 let activePlayer = 0이라고 해 준 것이다. 그리고 scores라는 변수에 배열을 저장해 주었는데, 이 배열은 아래 사진에서 빨간색으로 표시된 부분의 점수를 각각 저장해 주는 것이다. 게임 시작할 때는 둘 다 0이니 0으로 설정해 주었다.
//3.Check for rolled 1: if true
if (dice !== 1) {
//Add dice to current score
// currentScore = currentScore + dice;
currentScore += dice;
document.getElementById(`current--${activePlayer}`).textContent =
currentScore;
} else {
// switch to next player
document.getElementById(`current--${activePlayer}`).textContent = 0;
currentScore = 0;
activePlayer = activePlayer === 0 ? 1 : 0;
player0El.classList.toggle('player--active');
player1El.classList.toggle('player--active');
}저번 포스트에 주사위 숫자가 1이 아닐 때의 코드는 작성했으니, 이제 else문을 작성해 보자. 주사위 숫자가 1이 나오면 플레이어를 스위치해 줄 뿐만 아니라 그 플레이어는 모든 점수를 잃는다. 현재 플레이어가 0인지 1인지 알 수 없으므로 백틱을 사용해 현재 플레이어를 적어주었다. 예를 들어 현재 플레이어가 0이면 current--0이 되는 것이다. 그런데 HTML에 이런 코드가 있으므로:
한마디로, 플레이어 0의 현재 스코어를 0으로 만들어 주는 것이다. 그리고 또 currentScore = 0;로 currentScore도 0으로 만들어준다.
여기서 왜 현재스코어를 두 번이나 0으로 만들어 주는지 헷갈렸는데, textContent를 이용해 0으로 만들어준 것은 화면에 보이는 스코어를 0으로 해준 것이고, currentScore = 0은 로직에서의 currentScore를 0으로 해준 것이다.
다음으로 activePlayer가 0이면 1로 설정해주고, 그렇지 않으면 0으로 설정해 준다. 마지막으로 player0El과 player1El에 각각 토글로 player--active 클래스를 설정해 준다.
토글(toggle)은 클래스가 있으면 없애주고, 클래스가 없으면 추가해주는 기능을 한다.
