[JavaScript] 랜덤주사위

 

아래와 같은 이미지 파일이 있다고 가정할 때 랜덤주사위를 만들어 보기로 했다. 

 

 //javascript
 
 const diceEl = document.querySelector('.dice');
 const btnRoll = document.querySelector('.btn--roll')
 
 ...
 
 btnRoll.addEventListener('click', function () {
// 1. Generating a random dice roll
  const dice = Math.trunc(Math.random() * 6) + 1;
  console.log(dice);

  diceEl.classList.remove('hidden');
  diceEl.src = `dice-${dice}.png`;

})


//HTML
...
 <button class="btn btn--roll">🎲 Roll dice</button>
 ...

 

아래 코드처럼 주사위를 돌리면 Math.trunc(Math.random() * 6)은 5가 나오기 때문에 +1을 해주어 6을 만들어주고 

diceEl.src에 랜덤을 돌린 숫자를 넣어 파일에 있는 주사위 모양을 불러오기 하였다.