Pig game project

자바스크립트로 Pig Game 프로젝트를 만들어 보자. 먼저 각 요소들을 다음과 같이 선택한다.

const score0El = document.querySelector('#score--0');
const score1El = document.getElementById('score--1');
const current0El = document.getElementById('current--0');
const current1El = document.getElementById('current--1');

const diceEl = document.querySelector('.dice');
const btnNew = document.querySelector('.btn--new');
const btnRoll = document.querySelector('.btn--roll');
const btnHold = document.querySelector('.btn--hold');

score0El.textContent = 0;
score1El.textContent = 0;
diceEl.classList.add('hidden');

게임을 아직 시작하지 않았을 때는 두 플레이어의 점수가 0이므로 스코어를 0으로 설정해 주고, 주사위 이미지가 보이지 않도록 hidden 클래스를 추가해 준다. CSS에 다음과 같이 .hidden 클래스가 정의되어 있어서 가능하다.

.hidden {
  display: none;
}

다음은 전체적인 코드를 보고 각 부분을 이해해 보자.

let currentScore = 0;

btnRoll.addEventListener('click', function () {
  //1.Generate a random dice roll
  const dice = Math.trunc(Math.random() * 6) + 1;

  //2.Display dice
  diceEl.classList.remove('hidden');
  diceEl.src = `dice-${dice}.png`;
  console.log(dice);

  //3.Check for rolled 1: if true
  if (dice !== 1) {
    //Add dice to current score
    //   currentScore = currentScore + dice;
    currentScore += dice;
    current0El.textContent = currentScore; //CHANGE LATER
  } else {
    // switch to next player
  }
});

Roll Dice 버튼을 누르면 1에서 6까지의 숫자가 나와야 하므로 Math.random을 이용해 dice 변수에 넣어 준다. 그리고 게임이 시작되면 주사위가 보여야 하므로 hidden 클래스를 제거하고, 백틱을 이용해 각 숫자에 맞는 주사위 이미지를 설정해 준다.

주사위 숫자가 1이 나오면 현재 점수를 잃고 다른 플레이어의 순서가 되는 것이 게임의 룰이다. 주사위 숫자가 1이 아닐 때에는 currentScore에 주사위 숫자만큼 더해 주고 (currentScore += dice;), currentScore를 화면에 보여준다.(current0El.textContent = currentScore;)

currentScore는 함수 밖에서 초기화해 주었다. 함수 밖에 써줘야 하는 이유는 그렇지 않으면 함수가 실행될 때마다 스코어가 0으로 초기화되기 때문이다.

이렇게 주사위가 1이 아닐 때의 로직을 작성해 보았다. 다음 포스트에서는 주사위가 1일 때 점수 다 잃고 플레이어 순서를 바꾸는 로직을 작성하는 방법을 알아보겠다.