网页实现掷骰子小游戏

最新推荐文章于 2024-03-06 18:53:16 发布
最新推荐文章于 2024-03-06 18:53:16 发布
阅读量6.5k 收藏 10
点赞数 1
分类专栏： css js基础 自定义效果插件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39207066/article/details/97007050
版权

首先明确需求：

       在网页正中间展示骰子，点数为一点，点击骰子，骰子旋转然后停留在随机点位上。再次点击骰子，骰子可以继续旋转并停留在随机点位上。

       这里我们使用css3动画、3d旋转配合js实现效果

一，HTML结构

 <body>
        <!-- span是点数 -->
        <div id="wrapper">
                <div id="group">
                    <div class="page" id="page1"><span></span></div>
                    <div class="page" id="page2"><span></span><span></span></div>
                    <div class="page" id="page3"><span></span><span></span><span></span>
</div>
                    <div class="page" id="page4"><span></span><span></span><span></span><span></span></div>
                    <div class="page" id="page5"><span></span><span></span><span></span><span></span><span></span></div>
                    <div class="page" id="page6"><span></span><span></span><span></span><span></span><span></span><span></span></div>
                </div>
        </div>
</body>

二，css样式

 这里暂时先注释掉动画，不注释掉打开页面动画会直接运行，后边我们会点击骰子时以js的方式加入动画

 #wrapper{
            perspective: 500px;/*设置骰子被查看位置的视图（观察者与z=0平面的距离）：*/
            -webkit-perspective:500px;
            -moz-perspective:500px;
            overflow: hidden;
        }
        #group{
            width: 200px;
            height: 200px;
            position: relative;
            transform-style:preserve-3d;/*使其子元素保持3D转换*/
            -webkit-transform-style:preserve-3d;
            -moz-transform-style:preserve-3d;
            transform-origin:50% 50% -100px;/*设置骰子旋转的基点位置（骰子中心点）*/
            -webkit-transform-origin:50% 50% -100px;
            -moz-transform-origin:50% 50% -100px;
            margin: 200px auto;
  
            /* 
            animation:scroll 2s linear 0s 2 alternate;
            -webkit-animation:scroll 2s linear 0s 2 alternate;/*设置骰子动画效果*/
            -moz-animation:scroll 2s linear 0s 2 alternate; 
            */

            background-color:#E8E8E9;
            border-radius:20px;
        }
        .page{
            width: 200px;
            height: 200px;
            position: absolute;
            border-radius: 20px;
            text-align: center;
            overflow: hidden;
            text-align: center;
            background-color:#E8E8E9;
            border:1px solid #E0E0E0; 
        }
        /*开始设置每个面的角度，将6个面拼成一个正方体*/
        #page2{
            transform-origin:right;/*点数为2的面以右边为转轴转动*/
            transform:rotateY(-90deg);/*绕Y轴逆时针转动90度*/
            -webkit-transform-origin:right;
            -webkit-transform:rotateY(-90deg);
            -moz-transform-origin:right;
            -moz-transform:rotateY(-90deg);
        }
        #page3{
            transform-origin:left;/*点数为3的面以左边为转轴转动*/
            transform:rotateY(90deg);/*绕Y轴顺时针转动90度*/
            -webkit-transform-origin:left;
            -webkit-transform:rotateY(90deg);
            -moz-transform-origin:left;
            -moz-transform:rotateY(90deg);
        }
        #page4{
            transform-origin:top;/*点数为4的面以上边为转轴转动*/
            transform:rotateX(-90deg);/*绕X轴逆时针转动90度*/
            -webkit-transform-origin:top;
            -webkit-transform:rotateX(-90deg);
            -moz-transform-origin:top;
            -moz-transform:rotateX(-90deg);
        }
        #page5{
            transform-origin:bottom;/*点数为5的面以下边为转轴转动*/
            transform:rotateX(90deg);/*绕X轴顺时针转动90度*/
            -webkit-transform-origin:bottom;
            -webkit-transform:rotateX(90deg);
            -moz-transform-origin:bottom;
            -moz-transform:rotateX(90deg);
        }
        #page6{
            transform:translateZ(-200px);/*点数为6的面沿Z轴向后平移200px*/
            -webkit-transform:translateZ(-200px);
            -moz-transform:translateZ(-200px);
        }
        .page span {
            display:inline-block;
            width:50px;
            height:50px;
            border-radius:25px;
            background-color:#050505;
            box-shadow:inset 3px 3px 5px #000;/*骰子点数的阴影效果*/
        }
        /*下面是对点数样式的控制*/
        #page1 span{
            position:absolute;
            left:50%;
            top:50%;
            margin-top:-25px;
            margin-left: -25px;
            background-color:#f00;
        }
        #page2 span {
            margin:75px 25px;
        }
        #page3 span {
            position:absolute;
        }
        #page3 span:first-child {
            top:20px;
            left:20px;
        }
        #page3 span:nth-child(2) {
            top:75px;
            left:75px;
        }
        #page3 span:last-child {
            bottom:20px;
            right:20px;
        }
        #page4 span {
            margin:25px 25px;
        }
        #page5 span {
            margin:25px 25px;
        }
        #page5 span:last-child {
            position:absolute;
            top:50%;
            left:50%;
            margin-left:-25px;
            margin-top:-25px;
        }
        #page6 span {
            margin:7px 25px;
        }

三，css3动画

 /*设置骰子具体动画效果 确保骰子的每个面都可以看到，后面会运动快一些 1*/
        @keyframes scroll {
            0% {
                transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg);
            }
            25% {
                transform:rotateY(0deg) rotateX(90deg) rotateZ(90deg);
            }
            50% {
                transform:rotateY(0deg) rotateX(180deg) rotateZ(180deg);
            } 
            75% {
                transform:rotateY(180deg) rotateX(270deg) rotateZ(270deg);
            }
            100% {
                transform:rotateY(360deg) rotateX(360deg) rotateZ(360deg);
            }
        }
        @-moz-keyframes scroll {
            0% {
                -moz-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg);
            }
            25% {
                -moz-transform:rotateY(0deg) rotateX(90deg) rotateZ(90deg);
            }
            50% {
                -moz-transform:rotateY(0deg) rotateX(180deg) rotateZ(180deg);
            } 
            75% {
                -moz-transform:rotateY(180deg) rotateX(270deg) rotateZ(270deg);
            }
            100% {
                -moz-transform:rotateY(360deg) rotateX(360deg) rotateZ(360deg);
            }
       }
        @-webkit-keyframes scroll {
            0% {
                -webkit-transform:rotateY(0deg) rotateX(0deg) rotateZ(0deg);
            }
            25% {
                -webkit-transform:rotateY(0deg) rotateX(90deg) rotateZ(90deg);
            }
            50% {
                -webkit-transform:rotateY(0deg) rotateX(180deg) rotateZ(180deg);
            } 
            75% {
                -webkit-transform:rotateY(180deg) rotateX(270deg) rotateZ(270deg);
            }
            100% {
                -webkit-transform:rotateY(360deg) rotateX(360deg) rotateZ(360deg);
            }
        }

四，js部分

首先引入jQuery  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

$('#group').click(function(){
        $('#group').removeAttr('style');
        setTimeout(function(){
            var num =  Math.ceil(Math.random()*6);
            if(num==1){
                $('#group').css({
                    'animation':'scroll 2s linear 0s 2 alternate',
                    '-webkit-animation':'scroll 2s linear 0s 2 alternate',
                    '-moz-animation':'scroll 2s linear 0s 2 alternate',
                    'transform':'rotateY(360deg) rotateX(360deg) rotateZ(360deg)',
                    '-webkit-transform':'rotateY(360deg) rotateX(360deg) rotateZ(360deg)',
                    '-moz-transform':'rotateY(360deg) rotateX(360deg) rotateZ(360deg)'
                })
            }else if(num==2){
                $('#group').css({
                    'animation':'scroll 2s linear 0s 2 alternate',
                    '-webkit-animation':'scroll 2s linear 0s 2 alternate',
                    '-moz-animation':'scroll 2s linear 0s 2 alternate',
                    'transform':'rotateY(270deg) rotateX(360deg) rotateZ(360deg)',
                    '-webkit-transform':'rotateY(270deg) rotateX(360deg) rotateZ(360deg)',
                    '-moz-transform':'rotateY(270deg) rotateX(360deg) rotateZ(360deg)'
                })
            }else if(num==3){
                $('#group').css({
                    'animation':'scroll 2s linear 0s 2 alternate',
                    '-webkit-animation':'scroll 2s linear 0s 2 alternate',
                    '-moz-animation':'scroll 2s linear 0s 2 alternate',
                    'transform':'rotateY(180deg) rotateX(270deg) rotateZ(270deg)',
                    '-webkit-transform':'rotateY(180deg) rotateX(270deg) rotateZ(270deg)',
                    '-moz-transform':'rotateY(180deg) rotateX(270deg) rotateZ(270deg)'
                })
            }else if(num==4){
                $('#group').css({
                    'animation':'scroll 2s linear 0s 2 alternate',
                    '-webkit-animation':'scroll 2s linear 0s 2 alternate',
                    '-moz-animation':'scroll 2s linear 0s 2 alternate',
                    'transform':'rotateY(180deg) rotateX(90deg) rotateZ(360deg)',
                    '-webkit-transform':'rotateY(180deg) rotateX(90deg) rotateZ(360deg)',
                    '-moz-transform':'rotateY(180deg) rotateX(90deg) rotateZ(360deg)'
                })
            }else if(num==5){
                $('#group').css({
                    'animation':'scroll 2s linear 0s 2 alternate',
                    '-webkit-animation':'scroll 2s linear 0s 2 alternate',
                    '-moz-animation':'scroll 2s linear 0s 2 alternate',
                    'transform':'rotateY(180deg) rotateX(270deg) rotateZ(360deg)',
                    '-webkit-transform':'rotateY(180deg) rotateX(270deg) rotateZ(360deg)',
                    '-moz-transform':'rotateY(180deg) rotateX(270deg) rotateZ(360deg)'
                })
            }else if(num==6){
                $('#group').css({
                    'animation':'scroll 2s linear 0s 2 alternate',
                    '-webkit-animation':'scroll 2s linear 0s 2 alternate',
                    '-moz-animation':'scroll 2s linear 0s 2 alternate',
                    'transform':'rotateY(180deg) rotateX(360deg) rotateZ(360deg)',
                    '-webkit-transform':'rotateY(180deg) rotateX(360deg) rotateZ(360deg)',
                    '-moz-transform':'rotateY(180deg) rotateX(360deg) rotateZ(360deg)'
                })
            } 
        },1)
    })

 

捕风的紫色鸢尾
关注
专栏目录
html掷骰子小游戏,网页实现掷骰子小游戏
weixin_42510026的博客
06-02 3424
首先明确需求：在网页正中间展示骰子，点数为一点，点击骰子，骰子旋转然后停留在随机点位上。再次点击骰子，骰子可以继续旋转并停留在随机点位上。这里我们使用css3动画、3d旋转配合js实现效果一，HTML结构二，css样式这里暂时先注释掉动画，不注释掉打开页面动画会直接运行，后边我们会点击骰子时以js的方式加入动画#wrapper{perspective: 500px;/*设置骰子被查看位置的视图(观...
H5小游戏掷骰子
05-07
关于HTML5掷骰子的小游戏，用于学习基础HTML5的游戏编写。
网页版 家庭骰子
05-27
NULL 博文链接：https://aiy.iteye.com/blog/572790
在线摇骰子/色子工具
热门推荐
Linux,Java,SpringBoot,Python,Lua略知一点
10-04 1万+
在线摇骰子/色子工具 在线摇骰子/色子工具 模拟随机摇色子/骰子，以配合玩游戏或者做某些决定。 https://tooltt.com/dice/
DiceRoller:这个在网页上掷骰子
06-25
掷骰子 这个在网页上掷骰子
HTML5生成骰子的页面
07-11
自己写的HTML5骰子的代码，希望大家喜欢
js实现掷骰子小游戏
10-16
通过上述知识点，可以了解到掷骰子小游戏的实现原理和技术细节。这个小游戏可以作为学习JavaScript和HTML5 canvas的有趣案例。对于有兴趣学习前端开发的开发者来说，深入理解这些知识点将有助于进一步开发更复杂和...
js实现简单掷骰子小游戏
10-16
本文将详细介绍如何使用JS实现一个简单的掷骰子游戏。这个游戏的核心在于利用HTML、CSS和JavaScript的组合来模拟真实的掷骰子过程。 首先，我们创建一个HTML结构，包含一个用于显示骰子的`<div>`元素，它具有一个名...
jQuery掷骰子小游戏
05-01
【jQuery掷骰子小游戏】是一种基于网页的娱乐应用，它利用了JavaScript库jQuery来实现动态效果和交互功能。在这个游戏中，通常会有两个角色，比如蝙蝠侠和超人，玩家可以选择一个角色进行投掷骰子比赛。游戏的核心是...
使用jQuery实现掷骰子游戏
10-16
下面将详细解释实现掷骰子游戏的步骤和相关的知识点。 首先，在HTML页面的部分需要引入jQuery库，这是使用jQuery语法的前提条件。在本文中，使用的是jQuery版本1.8.3，通过下面的代码进行引入： ```html ...
摇色子动画页面
09-29
抽奖类的h5活动页面开发
jQuery网页掷骰子游戏棋代码
06-10
以蝙蝠侠和超人的形象制作的jQuery网页掷骰子游戏棋代码，先走到终点为胜利者。
骰子样式html.html
05-21
骰子样式写法，类似骰子的样子，让自己更好 掌握编程的能力，我认为可以试着自己动手操作，也是对自己的一次测试哦！
模拟掷骰子
06-10
模拟掷骰子 两个骰子和为7或11为赢 发光管亮 掷7次为一轮 统计掷筛子次数和赢得次数并进行显示 有按键消抖电路
Diceshaker - 模拟摇骰子的Web应用程序
最新发布
gitblog_00002的博客
03-06 1701
Diceshaker - 模拟摇骰子的Web应用程序 Diceshaker 是一个简单的 Web 应用程序，可以帮助您在线模拟摇骰子的过程。它适用于各种场景，如桌游、角色扮演游戏（RPG）或其他需要随机数生成的情况。 应用场景 桌面游戏：在玩桌面游戏时，您可能需要通过掷骰子来决定玩家的行动或结果。Diceshaker 可以让您轻松地在线进行这些操作。 角色扮演游戏：在 RPG 游戏中，玩家通常...
html简单骰子展示
是建威啊的博客
06-23 2369
html绘制骰子
网页HTML5制作flex布局骰子,css3 flex布局结合transform生成一个3D骰子
weixin_39905500的博客
06-15 797
1 Flex 布局首先聊聊Flex 布局，Flex 布局又称“弹性布局”，任何容器都可以指定为Flex布局，设置Flex布局会使得子元素的float、clear、vertical-align失效1.1 Flex属性1.1.1 flex-direction：决定项目的排列方向，默认自左向右水平排列.box {flex-direction: row | row-reverse | column | c...
在线摇骰子色子工具
Linux,Java,SpringBoot,Python,Lua略知一点
07-17 8146
本工具可以在线模拟摇骰子。本工具可以在线模拟摇骰子。本工具可以在线模拟摇骰子。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值