网页实现掷骰子小游戏

首先明确需求：

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

这里我们使用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掷骰子小游戏,网页实现掷骰子小游戏
首先明确需求: 在网页正中间展示骰子,点数为一点,点击骰子,骰子旋转然后停留在随机点位上.再次点击骰子,骰子可以继续旋转并停留在随机点位上. 这里我们使用css3动画.3d旋转配合js实现效果一,H ...
php掷骰子游戏,js实现简单掷骰子小游戏
本文实例为大家分享了js掷骰子小游戏的具体代码,供大家参考,具体内容如下实现方法: 方法一:通过background-position.background-image.backg-repeat三个 ...
c语言扔骰子随机数的相加,C语言编程学习：制作掷骰子小游戏
C语言是面向过程的,而C++是面向对象的 C和C++的区别: C是一个结构化语言,它的重点在于算法和数据结构.C程序的设计首要考虑的是如何通过一个过程,对输入(或环境条件)进行运算处理得到输出(或实现 ...
php掷骰子小游戏代码,js实现掷骰子小游戏
本文实例为大家分享了js掷骰子小游戏的具体代码,供大家参考,具体内容如下因为这次作业是第一个实验,比较简单,但是要求面向对象来做,而我这个时候又刚好在学JS,JS来做骰子游戏即有前端了,又省了后台处 ...
C语言编程学习：制作掷骰子小游戏！超适合新手的练手项目！
C语言是面向过程的,而C++是面向对象的 C和C++的区别: C是一个结构化语言,它的重点在于算法和数据结构.C程序的设计首要考虑的是如何通过一个过程,对输入(或环境条件)进行运算处理得到输出(或实现 ...
python掷骰子小游戏
python掷骰子小游戏 ''' 掷骰子猜大小小游戏要求: 1.每次充值必须是100的整数倍,且冲100元等于50个游戏币 2.每玩一次游戏扣除两个游戏币,猜对的奖励四个游戏币 ''' import ...
c 语言掷骰子游戏,C 语言编程学习: 制作掷骰子小游戏
C 语言编程学习: 制作掷骰子小游戏问题描述骰子是一个有六个面的正方体, 每个面分别印有 16 之间的小圆点代表点数. 假设这个游戏的规则是: 两个人轮流掷骰子 6 次, 并将每次投掷的点数累加起 ...
Python基础案例练习：掷骰子小游戏
前言骰子是我们经常能看到的小玩意儿,今天我们来做一个模拟掷骰子过程的文字版小游戏,送给新接触Python的初学者们~ 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者 ...
JAVA 掷骰子小游戏
记事本编辑小游戏( 需要有环境变量 ),代码会在底部会发出来: ( 1 ) 创建一个txt文本,把后缀改成 .java ; ( 2 ) 先创建一个类一个 main 方法,切记类名要跟文件名一致: (3 ...