XM的小窝


 

【JavaScript】3D随机骰子

闲着没事做了个随机骰子 :鹿乃_吃瓜:

效果

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            perspective: 3200px;
            background-color: #f5f5f5;
        }

        .box {
            transform-style: preserve-3d;
            position: relative;
            margin: 100px auto;
            width: 400px;
            height: 400px;
            transition: all .3s;
        }

        .face {
            position: absolute;
            z-index: 1;
            width: 100%;
            height: 100%;
            box-shadow: 0 0 6px #ccc;
            font-size: 100px;
            color: #66ccffcc;
            line-height: 400px;
            text-align: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        /* 为了让旋转中心始终在方块中心,必须先旋转,后调角度!!!! */
        /* 为了让旋转中心始终在方块中心,必须先旋转,后调角度!!!! */
        /* 为了让旋转中心始终在方块中心,必须先旋转,后调角度!!!! */

        .face:nth-child(1) {
            background-image: url("https://kanokano.cn/wp-content/themes/kratos-pjax/static/images/smilies/kano-ahh.png");
            z-index: 2;
            transform: translateZ(200px);
        }

        .face:nth-child(2) {
            background-image: url("https://kanokano.cn/wp-content/themes/kratos-pjax/static/images/smilies/kano-heng.png");
            transform: translateX(-50%) rotateY(-90deg);
        }

        .face:nth-child(3) {
            background-image: url("https://kanokano.cn/wp-content/themes/kratos-pjax/static/images/smilies/kano-help.png");
            transform: translateX(50%) rotateY(90deg);
        }

        .face:nth-child(4) {
            background-image: url("https://kanokano.cn/wp-content/themes/kratos-pjax/static/images/smilies/kano-mang.png");
            transform: translateY(-50%) rotateX(90deg);
        }

        .face:nth-child(5) {
            background-image: url("https://kanokano.cn/wp-content/themes/kratos-pjax/static/images/smilies/kano-sq.png");
            transform: translateY(50%) rotateX(-90deg);
        }

        .face:nth-child(6) {
            background-image: url("https://kanokano.cn/wp-content/themes/kratos-pjax/static/images/smilies/kano-ding.png");
            transform: translateZ(-200px) rotateY(180deg);
        }
    </style>
</head>

<body>
    <button class="n1">1</button>
    <button class="n2">2</button>
    <button class="n3">3</button>
    <button class="n4">4</button>
    <button class="n5">5</button>
    <button class="n6">6</button>
    <input type="button" value="随机">
    <div class="box">
        <div class="face">1</div>
        <div class="face">2</div>
        <div class="face">3</div>
        <div class="face">4</div>
        <div class="face">5</div>
        <div class="face">6</div>
    </div>
    <script>
        var btn = document.querySelectorAll("button");
        var cube = document.querySelector(".box");
        var randbtn = document.querySelector("input");
        //绑定旋转事件
        for (var i = 0; i < btn.length; i++) {
            btn[i].addEventListener("click", function() {
                Move(this.innerHTML);
            });
        }
        //随机数事件
        randbtn.addEventListener("click", function() {
            //随机晃一下

            for (var i = 1; i <= 10; i++) {
                setTimeout((out) => {
                    randbtn.disabled = true;
                    Move(Math.round(Math.random(3213) * 5 + 1));
                }, i * 500);
            }
            //解除随机数
            setTimeout(() => {
                randbtn.disabled = false;
            }, 5000);
        });

        function Move(t) {
            switch (parseInt(t)) {
                case 1:
                    cube.style.transform = "";
                    break;
                case 2:
                    cube.style.transform = "rotateY(90deg)";
                    break;
                case 3:
                    cube.style.transform = "rotateY(-90deg)";
                    break;
                case 4:
                    cube.style.transform = "rotateX(-90deg)";
                    break;
                case 5:
                    cube.style.transform = "rotateX(90deg)";
                    break;
                case 6:
                    cube.style.transform = "rotateY(180deg)";
                    break;
            }
        }
    </script>
</body>

</html>
点赞

发表评论

电子邮件地址不会被公开。必填项已用 * 标注