html+css+js实现骰子

最新推荐文章于 2022-07-15 20:49:00 发布

liyfn

最新推荐文章于 2022-07-15 20:49:00 发布

阅读量1.1k

点赞数 1

分类专栏：做点小玩具文章标签： css javascript 前端

本文链接：https://blog.csdn.net/qq_42825643/article/details/124180131

版权

做点小玩具专栏收录该内容

5 篇文章 2 订阅

订阅专栏

做个骰子玩玩
在这里插入图片描述
图片自行导入，或者移步我的资源下载：
https://download.csdn.net/download/qq_42825643/85136030

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>掷骰子</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .button{
            margin: 10px auto;
            width: 500px;
            height: 30px;
        }
        button {
            margin-left: 50px;
            width: 100px;
            height: 30px;
        }
        div ul {
            position: relative;
            margin: 200px 650px;
            width: 100px;
            height: 100px;
            /* 定义3d模式 */
            transform-style: preserve-3d;
            /* 初始角度 */
            transform: rotateX(60deg) rotateY(30deg) rotateZ(30deg);
            /* 过渡时间 */
            transition: all 0.2s;
        }

        li {
            list-style: none;
            position: absolute;
            width: 100px;
            height: 100px;
            border: 1px solid black;
            background-color: aqua;
            background-size: 100% 100%;
            border-radius: 30px;
        }
        /* 每一面旋转不同角度后偏移 */
        li:first-child {
            background-image: url(one.jpg);
        }

        li:nth-child(2) {
            background-image: url(two.jpg);
            transform: rotateX(90deg) translateY(-50px) translateZ(50px);
        }

        li:nth-child(4) {
            background-image: url(four.jpg);
            background-color: aquamarine;
            transform: rotateX(90deg) translateY(-50px) translateZ(-50px);
        }

        li:nth-child(3) {
            background-image: url(three.jpg);
            background-color: bisque;
            transform: rotateY(90deg) translateZ(-50px) translateX(50px);
        }

        li:nth-child(5) {
            background-image: url(five.jpg);
            background-color: pink;
            transform: rotateY(90deg) translateZ(50px) translateX(50px);
        }

        li:nth-child(6) {
            background-image: url(six.jpg);
            background-color: green;
            transform: translateZ(-100px) rotateX(180deg);
        }
        /* 骰蛊 */
        .tougu {
            float: left;
            position: absolute;
            z-index: 9;
            width: 300px;
            height: 450px;
            background-image: url(tougu.jpg);
            background-size: 100% 100%;
            /* opacity: 0.5; */
            transition: 1s;
            /* transform: translate(550px); */
        }

    
    </style>
</head>

<body>
    
    <div>
        <div class="button">
            <button onclick="f1()">开始</button>
            <button onclick="f2()">停止</button>

        </div>
        <!-- 骰蛊 -->
        <div class="tougu" id="tougu">

        </div>
        <!-- 绘制骰子 -->
        <ul id="scroll">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

        <!-- js代码 -->
        <script>
            var flag = true;
            function f1() {
                if(flag) {
                    document.getElementById('tougu').style.transform = 'translate(550px)';
                    // 周期调用
                    n = setInterval(() => {
                        var i = Math.floor(Math.random() * 1000);   //生成随机数定义转换角度
                        var j = Math.floor(Math.random() * 1000);
                        var k = Math.floor(Math.random() * 1000);
                        document.getElementById('scroll').style.transform = 'rotateX(60deg) rotateY(' + j + 'deg) rotateZ(' + k + 'deg)';
                    }, 100);
                    // 清除标志位，避免重复触发onclick
                    flag = false;
                } 
            }
            function f2() {
                // 随机数定义结果
                var m = Math.floor(Math.random() * 6) + 1;
                // 清除周期函数
                clearInterval(n);
                // 打开标志位
                flag = true;
                document.getElementById('tougu').style.transform = 'translate(0)';
                // 根据随机数，计算角度后，让骰子旋转角度
                switch (m) {
                    case 1:
                        document.getElementById('scroll').style.transform = 'rotateX(360deg) ';
                        break;
                    case 2:
                        document.getElementById('scroll').style.transform = 'rotateX(270deg) ';
                        break;
                    case 3:
                        document.getElementById('scroll').style.transform = 'rotateY(90deg) ';
                        break;
                    case 4:
                        document.getElementById('scroll').style.transform = 'rotateX(90deg) ';
                        break;
                    case 5:
                        document.getElementById('scroll').style.transform = 'rotateY(270deg) ';
                        break;
                    case 6:
                        document.getElementById('scroll').style.transform = 'rotateX(180deg) ';
                        break;
                }
            }
        </script>
    </div>
</body>

</html>

liyfn

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
html+css+js实现骰子

做个骰子玩玩图片自行导入，或者移步我的资源下载：https://download.csdn.net/download/qq_42825643/85136030<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name
复制链接

扫一扫