초간단 주사위 굴리기 기능 구현 - 자바스크립트(Java Script)

---

구현

See the Pen Untitled by Wi daehyeon (@widaehyeon) on CodePen.

---

HTML 코드

<div class="container">
    <div id="dice" class="dice">
        <div class="dot one"></div>
        <div class="dot two"></div>
        <div class="dot three"></div>
        <div class="dot four"></div>
        <div class="dot five"></div>
        <div class="dot six"></div>
        <div class="dot seven"></div>
        <div class="dot eight"></div>
        <div class="dot nine"></div>
    </div>
    <button id="rollButton">주사위 굴리기</button>
</div>

`container` div안에 주사위와 주사위 굴리기 버튼을 구현했다.
점 9개를 그려놓고 주사위 숫자에 맞게 점들을 보였다 숨겼다 만들 것이다.

---

CSS 코드

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.container {
    text-align: center;
}

.dice {
    width: 100px;
    height: 100px;
    margin: 20px auto;
    position: relative;
    background-color: white;
    border: 2px solid #333;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dot {
    width: 20px;
    height: 20px;
    background-color: black;
    border-radius: 50%;
    position: absolute;
    display: none;
}

.dot.one { top: 40px; left: 40px; }
.dot.two { top: 20px; left: 20px; }
.dot.three { top: 20px; left: 60px; }
.dot.four { top: 60px; left: 20px; }
.dot.five { top: 60px; left: 60px; }
.dot.six { top: 20px; left: 40px; }
.dot.seven { top: 60px; left: 40px; }
.dot.eight { top: 40px; left: 20px; }
.dot.nine { top: 40px; left: 60px; }

.rolling {
    animation: roll 0.5s linear;
}

@keyframes roll {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

`@keyframes` `transfrom : rotate`를 활용해 주사위가 돌아가는 듯한 효과를 만들었다.

---

Java Script 코드

document.getElementById('rollButton').addEventListener('click', rollDice);

function rollDice() {
    const dice = document.getElementById('dice');
    const dots = dice.querySelectorAll('.dot');
    dots.forEach(dot => dot.style.display = 'none');

    const number = Math.floor(Math.random() * 6) + 1;
    dice.classList.add('rolling');
    setTimeout(() => {
        dice.classList.remove('rolling');
        showDots(number);
    }, 500);
}

function showDots(number) {
    const dice = document.getElementById('dice');
    switch (number) {
        case 1:
            dice.querySelector('.one').style.display = 'block';
            break;
        case 2:
            dice.querySelector('.two').style.display = 'block';
            dice.querySelector('.five').style.display = 'block';
            break;
        case 3:
            dice.querySelector('.one').style.display = 'block';
            dice.querySelector('.two').style.display = 'block';
            dice.querySelector('.five').style.display = 'block';
            break;
        case 4:
            dice.querySelector('.two').style.display = 'block';
            dice.querySelector('.three').style.display = 'block';
            dice.querySelector('.four').style.display = 'block';
            dice.querySelector('.five').style.display = 'block';
            break;
        case 5:
            dice.querySelector('.one').style.display = 'block';
            dice.querySelector('.two').style.display = 'block';
            dice.querySelector('.three').style.display = 'block';
            dice.querySelector('.four').style.display = 'block';
            dice.querySelector('.five').style.display = 'block';
            break;
        case 6:
            dice.querySelector('.two').style.display = 'block';
            dice.querySelector('.three').style.display = 'block';
            dice.querySelector('.four').style.display = 'block';
            dice.querySelector('.five').style.display = 'block';
            dice.querySelector('.six').style.display = 'block';
            dice.querySelector('.seven').style.display = 'block';
            break;
    }
}

---

document.getElementById('rollButton').addEventListener('click', rollDice);

`rollButton`버튼에 클릭이벤트를 걸어준 뒤 버튼을 클릭하면 `rollDice()` 함수를 호출한다.

function rollDice() {
    const dice = document.getElementById('dice');
    const dots = dice.querySelectorAll('.dot');
    dots.forEach(dot => dot.style.display = 'none');

    const number = Math.floor(Math.random() * 6) + 1;
    dice.classList.add('rolling');
    setTimeout(() => {
        dice.classList.remove('rolling');
        showDots(number);
    }, 500);
}

 
1) dice를 선택하고 그 안에 있는 dot들을 dots으로 선택한다.
2) `forEach`를 사용해 모든 점을 보이지 않게 한다.
3) `Math.random`을 사용해 1~6중 랜덤 한 숫자 하나를 뽑는다.
4) 주사위에 `@keyframe` 애니메이션 속성을 가진 `rolling` class를 `classList.add`를 사용해 추가한다.
5) `setTimeout`을 사용해 500ms 딜레이 후에 `rolling` class를 제거해 돌아가는 효과를 제거한 뒤 점을 보여주기 위해 `showDots(랜덤숫자)` 함수를 호출한다.

function showDots(number) {
    const dice = document.getElementById('dice');
    switch (number) {
        case 1:
            dice.querySelector('.one').style.display = 'block';
            break;
        case 2:
            dice.querySelector('.two').style.display = 'block';
            dice.querySelector('.five').style.display = 'block';
            break;
        case 3:
            dice.querySelector('.one').style.display = 'block';
            dice.querySelector('.two').style.display = 'block';
            dice.querySelector('.five').style.display = 'block';
            break;
        case 4:
            dice.querySelector('.two').style.display = 'block';
            dice.querySelector('.three').style.display = 'block';
            dice.querySelector('.four').style.display = 'block';
            dice.querySelector('.five').style.display = 'block';
            break;
        case 5:
            dice.querySelector('.one').style.display = 'block';
            dice.querySelector('.two').style.display = 'block';
            dice.querySelector('.three').style.display = 'block';
            dice.querySelector('.four').style.display = 'block';
            dice.querySelector('.five').style.display = 'block';
            break;
        case 6:
            dice.querySelector('.two').style.display = 'block';
            dice.querySelector('.three').style.display = 'block';
            dice.querySelector('.four').style.display = 'block';
            dice.querySelector('.five').style.display = 'block';
            dice.querySelector('.six').style.display = 'block';
            dice.querySelector('.seven').style.display = 'block';
            break;
    }
}

약간 노가다 코드인 `showDots()` 함수 코드이다.
넘겨받은 랜덤 숫자에 맞는 점의 개수만큼 점을 보이게 하고, 위치는 일일이 조절했다.
 
이제 버튼을 누를때마다 주사위가 돌아가며 랜덤한 숫자가 등장하는 코드가 완성되었다.
이제 이 코드만 있으면 주사위가 없어도 다양한 게임을 즐길 수가 있다.
 
끝!