JS实现简单随机三维(三维的缩写)骰子

本文实例为大家分享了射流研究…实现简单随机三维(三维的缩写)骰子的具体代码，供大家参考，具体内容如下

描述：

JS——实现简单的随机三维(三维的缩写)骰子。

效果：

实现：

超文本标记语言文件：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title document/title/headlink rel='样式表href=' CSS/t1。CSS ' body div class=' dice ' div class=' face ' div class=' item 1 '/div/div class=' face ' div class=' item 2 '/div/div class=' face ' div class=' item 3 '/div class=' item 3 '/div class='项目6 '/div class='项目6 '/div/div class=' face _ 0 ' div class='项目6 '/div class='项目6 '/div/div/div/div p class='视图'/p p p p按钮id=' play ' play/button/p/body script src=' http 3360 js/t1。 js '/脚本/html CSS文件：

@关键帧旋转{ to { transform : rotateX(360)rotateY(360)；} } @关键帧domo { 20% { transform : rotateX(20deg)；} 60% { transform : rotateX(20度)rotateY(200度);} 100% { transform : rotateX(100度)rotateY(1000度)rotateZ(-100度)；}} .骰子{ width : 300 px h8 : 300 pxmargin 3360 100 px汽车200像素相对位置：变换样式： preserve-3d；/* animation:旋转2s；*/动画-时长： 3s动画-定时-功能：线性；过渡：全1;} .骰子：悬停{动画： domo 5s线性0s无限交替；} .骰子。面{宽度： 100%;高度： 100%;显示： flex绝对位置：左： 0；top : 0；border: 1px固体# 000;背景： rgb(253，250，250)；边界半径： 20pxfont-size : 100 pxcolor: # fff线高： 300像素；文本对齐：中心；} .项目1 {宽度： 100 px高度： 100像素；背景：红色；边界半径： 50%;} .item2 { width: 75px高度： 75px背景：蓝色；边界半径： 50%;} .item3 { width: 75px高度： 75px背景：蓝色；边界半径： 50%;} .item4 { width: 75px高度： 75px背景： rgb(240，54，54)；边界半径： 50%;} .item5 { width: 75px高度： 75px背景：蓝色；边界半径： 50%;} .item6 { width: 75px高度： 75px背景：蓝色；边界半径： 50%;} .face : th-child(1){ 0狡辩-内容中心：align-items:居中；transform : translateZ(150 px)；} .face : th-child(2){狡辩-内容：太空轮；align-items:居中；transform : rotateX(-90)translateZ(150 px)；} .face : th-child(3){ 0狡辩-内容：太空轮；align-items:居中；柔性包装：包装；变换：旋转(90度)翻译ez(150像素);} .face : th-child(4){ flex-wrap 3360 wrap；正义-内容：中心；align-items:居中；变换：旋转(-90)平移(150像素)；} .第：张脸-孩子(4).face _ 0 { width: 300px高度： 75px显示： flex证明内容：空间环绕；} .face : th-child(5){ flex-wrap 3360 wrap；正义-内容：中心；align-items:居中；变换：旋转(90度)平移(150像素)；} .第：张脸——孩子(5岁).face _ 0 { width: 300px高度： 75px显示： flex证明内容：空间环绕；} .face : th-child(6){ flex-wrap 3360 wrap；正义-内容：中心；align-items:居中；transform : translateZ(-150 px)；} .第：张脸-孩子(6).face _ 0 { width: 300px高度： 75px显示： flex证明内容：空间环绕；} p { text-align :居中；}js文件：

(function(){ let odice=document . queryselector(')。dice ')让oview=document.querySelector('。视图)让op lay=document . queryselector(' # play ')//单击按钮oplay.onclick=playTheGame //执行骰子动画后，odice . addeventlistener(' webkitanimation end '，()={ odice . style . animation name=' none '//更改动画属性。要等待下一个动画的正常执行//可能情况的集合let _ maybe=[{value: 1，x: 0，y: 0}，{value: 6，x: 0 0，y: 180}，{value: 3，x : 0 0 0 0，y: -90 }，{ value: 4，x 3:y: 90 }，{ value :地板(数学。random()* 6)//要提取的随机结果Let _ result=_ probability[_ random]settimeout(()={//浏览器反应不够，无法添加过渡//让骰子旋转到正确的角度骰子. style . transform=` rotatex($ { _ result . x } deg)rotatey($ { _ result . y } deg)` render view(_ result . value)//render view }，0)；})函数playTheGame() {//游戏方法//骰子翻起来//有时候浏览器在连续使用js操作css时会出现问题(无法反应)，比如效果无法正常显示。此时，可以尝试使用setTimeout-0将目标代码放入异步队列中执行//setTimeout(()={ odice . style . animation name=' rotate '//}，0)；}函数renderView(result) {//将结果呈现到页面视图oview.innerHTML='您的抛出结果是：' result } })()；以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。