首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JS实现简单随机3D骰子

Posted in Javascript onOctober 24, 2019

本文实例为大家分享了JS实现简单随机3D骰子的具体代码，供大家参考，具体内容如下

描述：

JS——实现简单的随机3D骰子。

效果：

JS实现简单随机3D骰子

JS实现简单随机3D骰子

实现：

html文件：

<!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>
</head>
<link rel="stylesheet" href="css/T1.css" >
 
<body>
 <div class="dice">
  <div class="face">
   <div class="item1"></div>
  </div>
  <div class="face">
   <div class="item2"></div>
   <div class="item2"></div>
  </div>
  <div class="face">
   <div class="item3"></div>
   <div class="item3"></div>
   <div class="item3"></div>
  </div>
  <div class="face">
   <div class="face_0">
    <div class="item4"></div>
    <div class="item4"></div>
   </div>
   <div class="face_0">
    <div class="item4"></div>
    <div class="item4"></div>
   </div>
  </div>
  <div class="face">
   <div class="face_0">
    <div class="item5"></div>
    <div class="item5"></div>
   </div>
   <div class="face_0">
    <div class="item5"></div>
   </div>
   <div class="face_0">
    <div class="item5"></div>
    <div class="item5"></div>
   </div>
  </div>
  <div class="face">
   <div class="face_0">
    <div class="item6"></div>
    <div class="item6"></div>
   </div>
   <div class="face_0">
    <div class="item6"></div>
    <div class="item6"></div>
   </div>
   <div class="face_0">
    <div class="item6"></div>
    <div class="item6"></div>
   </div>
  </div>
 </div>
 
 <p class="view"></p>
 
 <p>
  <button id="play">PLAY</button>
 </p>
</body>
<script src="js/T1.js"></script>
 
</html>

css文件：

@keyframes rotate {
 to {
  transform: rotateX(360deg) rotateY(360deg);
 }
}
 
@keyframes domo{
 20%{
  transform: rotateX(20deg);
 }
 60%{
  transform: rotateX(20deg) rotateY(200deg);
 }
 100%{
  transform: rotateX(100deg) rotateY(1000deg) rotateZ(-100deg);
 }
}
 
 
.dice {
 width: 300px;
 height: 300px;
 margin: 100px auto 200px;
 position: relative;
 transform-style: preserve-3d;
 /* animation: rotate 2s; */
 animation-duration: 3s;
 animation-timing-function: linear;
 transition: all 1s;
}
 
.dice:hover{
 animation: domo 5s linear 0s infinite alternate;
}
 
.dice .face {
 width: 100%;
 height: 100%;
 display: flex;
 position: absolute;
 left: 0;
 top: 0;
 border: 1px solid #000;
 background: rgb(253, 250, 250);
 border-radius: 20px;
 font-size: 100px;
 color: #fff;
 line-height: 300px;
 text-align: center;
}
 
.item1{
 width: 100px;
 height: 100px;
 background: red;
 border-radius: 50%;
}
 
.item2{
 width: 75px;
 height: 75px;
 background: blue;
 border-radius: 50%;
}
 
.item3{
 width: 75px;
 height: 75px;
 background: blue;
 border-radius: 50%;
}
 
.item4{
 width: 75px;
 height: 75px;
 background: rgb(240, 54, 54);
 border-radius: 50%;
}
 
.item5{
 width: 75px;
 height: 75px;
 background: blue;
 border-radius: 50%;
}
 
.item6{
 width: 75px;
 height: 75px;
 background: blue;
 border-radius: 50%;
}
 
.face:nth-child(1) {
 justify-content: center;
 align-items: center;
 transform: translateZ(150px);
}
 
.face:nth-child(2) {
 justify-content: space-around;
 align-items: center;
 transform: rotateX(-90deg) translateZ(150px);
}
 
.face:nth-child(3) {
 justify-content: space-around;
 align-items: center;
 flex-wrap: wrap;
 transform: rotateY(90deg) translateZ(150px);
}
 
.face:nth-child(4) {
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
 transform: rotateY(-90deg) translateZ(150px);
}
 
.face:nth-child(4) .face_0{
 width: 300px;
 height: 75px;
 display: flex;
 justify-content: space-around;
}
 
.face:nth-child(5) {
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
 transform: rotateX(90deg) translateZ(150px);
}
 
.face:nth-child(5) .face_0{
 width: 300px;
 height: 75px;
 display: flex;
 justify-content: space-around;
}
 
.face:nth-child(6) {
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
 transform: translateZ(-150px);
}
 
.face:nth-child(6) .face_0{
 width: 300px;
 height: 75px;
 display: flex;
 justify-content: space-around;
}
 
p {
 text-align: center;
}

js文件：

(function () {
 
 let odice = document.querySelector('.dice')
 let oview = document.querySelector('.view')
 let oplay = document.querySelector('#play') // 按钮
 oplay.onclick = playTheGame
 
 // 当骰子动画执行后
 odice.addEventListener('webkitAnimationEnd', () => {
  odice.style.animationName = 'none' // 更改动画属性，以待下一次动画的正常执行
  // 可能出现的情况集合
  let _posible = [
   { value: 1, x: 0, y: 0 },
   { value: 6, x: 0, y: 180 },
   { value: 3, x: 0, y: -90 },
   { value: 4, x: 0, y: 90 },
   { value: 5, x: -90, y: 0 },
   { value: 2, x: 90, y: 0 },
  ]
  // 准备抽取的随机数
  let _random = Math.floor(Math.random() * 6)
  // 抽取的随机结果
  let _result = _posible[_random]
  setTimeout(() => { // 浏览器反应不过来加过渡
   // 让骰子旋转到正确的角度
   odice.style.transform = ` 
    rotateX(${ _result.x }deg) rotateY(${ _result.y }deg)
   ` 
   renderView(_result.value) // 渲染视图
  }, 0);
  
 })
 
 function playTheGame() { // 游戏方法
  // 骰子转起来 
  
  // 有的时候浏览器在连续使用js操作css的时候会出现问题（反应不过来），比如，效果不能正常显示，此时可以尝试利用setTimeout-0来将目标代码放入到异步队列中等待执行
  // setTimeout(() => {
   odice.style.animationName = 'rotate'
  // }, 0);     
 }
 
 
 function renderView(result) { // 渲染结果到页面视图
  oview.innerHTML = '您此次的投掷结果为：' + result   
 }
 
})();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

JS实现简单随机3D骰子

- Author -

SSSkyCong

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript中的对象化编程
Jan 16 Javascript
Javascript 日期处理之时区问题
Oct 08 Javascript
jquery 新建的元素事件绑定问题解决方案
Jun 12 Javascript
javascript面向对象快速入门实例
Jan 13 Javascript
JavaScript中setMonth()方法的使用详解
Jun 11 Javascript
微信小程序 动画的简单实例
Oct 12 Javascript
vuex state及mapState的基础用法详解
Apr 19 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
微信小程序 自定义弹窗实现过程(附代码)
Dec 05 Javascript
js实现图片粘贴到网页
Dec 06 Javascript
浅谈JavaScript节流和防抖函数
Aug 25 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
Dec 03 Javascript
JS合并两个数组的3种方法详解
Oct 24 #Javascript
js实现简单掷骰子小游戏
Oct 24 #Javascript
js实现GIF图片的分解和合成
Oct 24 #Javascript
js实现掷骰子小游戏
Oct 24 #Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
Oct 24 #Javascript
js实现GIF动图分解成多帧图片上传
Oct 24 #Javascript
js实现简单掷骰子效果
Oct 24 #Javascript
reduce()(1) 信号同步(1) Python(3) 鲲鹏(1) 生命周期(1) Flask(2) GCN(1) 进度条(1) 裁剪图片(1) PIL(1)
You might like
php Xdebug 调试扩展的安装与使用.
2010/03/13 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
用javascript实现无刷新更新数据的详细步骤 asp
2006/12/26 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
2011/04/27 Javascript
ajax处理php返回json数据的实例代码
2013/01/24 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
2013/08/05 Javascript
javascript屏蔽右键代码
2014/05/15 Javascript
JavaScript SHA512加密算法详细代码
2016/10/06 Javascript
基于Bootstrap的网页设计实例
2017/03/01 Javascript
详解Vue 实例中的生命周期钩子
2017/03/21 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
web前端vue之vuex单独一文件使用方式实例详解
2018/01/11 Javascript
JS实现求5的阶乘示例
2019/01/21 Javascript
vue中实现上传文件给后台实例详解
2019/08/22 Javascript
js验证账户名是否重复
2020/05/26 Javascript
Node在Controller层进行数据校验的过程详解
2020/08/28 Javascript
用pywin32实现windows模拟鼠标及键盘动作
2014/04/22 Python
让 python 命令行也可以自动补全
2014/11/30 Python
Python下线程之间的共享和释放示例
2015/05/04 Python
python 循环遍历字典元素的简单方法
2016/09/11 Python
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
html5读取本地文件示例代码
2014/04/22 HTML / CSS
使用html5实现表格实现标题合并的实例代码
2019/05/13 HTML / CSS
介绍一下Linux内核的排队自旋锁
2014/08/27 面试题
保安自我鉴定范文
2013/12/08 职场文书
运动会开幕式邀请函
2014/02/03 职场文书
师范大学生求职信
2014/06/13 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
行政执法作风整顿剖析材料
2014/10/11 职场文书
学生抄作业检讨书（2篇）
2014/10/17 职场文书
硕士学位论文评语
2014/12/31 职场文书
有关朝花夕拾的读书笔记
2015/06/29 职场文书
2015年秋季校长开学典礼致辞
2015/07/29 职场文书
网络安全倡议书（3篇）
2019/09/18 职场文书