온라인 코인 토스 사이트 구현

코인 토스

온라인 코인 토스 기능을 제공합니다.

https://erulabo.com/coin-toss

const newDeg = (() => {
    const rand = Math.random() >= 0.5;
    return currentDeg + 180 * flipCount + (rand ? 0 : 180);
})();Copy

<script>
    let totalCount = 0;
    let headsCount = 0;
    let isAnimating = false;

    function tossCoin() {
        if (isAnimating) return;
        const sound = new Audio('/coin.mp3');
        sound.play().catch(e => {
            console.warn("Coin sound failed to play", e);
        });
        isAnimating = true;

        const coin = document.getElementById("coin");
        const move = document.getElementById("coin-move");
        const result = document.getElementById("result");
        const resultBody = document.getElementById("resultBody");
        const shadow = document.getElementById("coin-shadow");

        const currentRotation = coin.style.transform || "rotateX(0deg)";
        const currentDegMatch = currentRotation.match(/rotateX\((\d+)deg\)/);
        const currentDeg = currentDegMatch ? parseInt(currentDegMatch[1], 10) : 0;

        const flipCount = 5;
        const newDeg = (() => {
            const rand = Math.random() >= 0.5;
            return currentDeg + 180 * flipCount + (rand ? 0 : 180);
        })();

        coin.style.transition = "transform 1.0s cubic-bezier(0.33, 0, 0.2, 1)";
        move.style.transition = "transform 0.6s ease-in-out";
        move.style.transform = "translateY(-100px)";
        shadow.style.transform = "scale(0.5)";
        shadow.style.opacity = "0.3";
        const shine = document.querySelector('.coin .shine');
        shine.style.opacity = '1';
        setTimeout(() => {
            shine.style.opacity = '0';
        }, 400);

        const tossMessages = [
            "운명의 코인토스!",
            "자, 결과는 무엇일까?",
            "긴장되는 순간!",
            "앞일까? 뒷일까?",
            "결정의 시간이야!",
            "운에 맡겨보자!",
            "돌려돌려 동전판~",
            "한 번 던져보자!",
            "흥미진진한 토스!"
        ];
        result.textContent = tossMessages[Math.floor(Math.random() * tossMessages.length)];

        setTimeout(() => {
            // 기존보다 리얼한 느낌을 위해 rotateZ 추가
            const zWobble = (Math.random() - 0.5) * 40; // -20도~20도 정도의 비틀림
            coin.style.transform = `rotateX(${newDeg}deg) rotateZ(${zWobble}deg)`;
        }, 30);

        setTimeout(() => {
            move.style.transform = "translateY(0px)";
            shadow.style.transform = "scale(1)";
            shadow.style.opacity = "1";
        }, 600);

        setTimeout(() => {
            const finalDeg = newDeg % 360;
            const isFront = finalDeg % 360 === 0;

            totalCount++;
            if (isFront) headsCount++;

            const resultProbability = isFront
                ? ((headsCount / totalCount) * 100).toFixed(1)
                : (((totalCount - headsCount) / totalCount) * 100).toFixed(1);

            result.textContent = isFront ? "앞면!" : "뒷면!";

            const row = document.createElement("tr");
            row.innerHTML = `
                <td>${totalCount}</td>
                <td>${isFront ? "앞면" : "뒷면"}</td>
                <td>${resultProbability}%</td>
            `;
            resultBody.insertBefore(row, resultBody.firstChild);
            isAnimating = false;
        }, 1000);
    }
</script>Copy