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   
 }
 
})();

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

Javascript 相关文章推荐
javascript 函数使用说明
Apr 07 Javascript
JavaScript判断密码强度(自写代码)
Sep 06 Javascript
js交换排序 冒泡排序算法(Javascript版)
Oct 04 Javascript
node.js中的fs.ftruncate方法使用说明
Dec 15 Javascript
JavaScript实现打字效果的方法
Jul 10 Javascript
对于jQuery性能的一些优化建议
Aug 13 Javascript
js removeChild 方法深入理解
Aug 16 Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 Javascript
vue中组件的过渡动画及实现代码
Nov 21 Javascript
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
javascript实现计算器功能详解流程
Nov 01 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
You might like
PHP在特殊字符前加斜杠的实现代码
2011/07/17 PHP
PHP echo,print,printf,sprintf函数之间的区别与用法详解
2013/11/27 PHP
PHP常用数组函数介绍
2014/07/28 PHP
php实现字符串反转输出的方法
2015/03/14 PHP
PHP MVC框架路由学习笔记
2016/03/02 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
2010/05/17 Javascript
JQuery小知识
2010/10/15 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
2015/05/14 Javascript
AngularJS在IE8的不支持的解决方法
2016/05/13 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
JavaScript箭头(arrow)函数详解
2017/06/04 Javascript
理解nodejs的stream和pipe机制的原理和实现
2017/08/12 NodeJs
javaScript实现滚动条事件详解
2020/03/24 Javascript
vue 引入公共css文件的简单方法(推荐)
2018/01/20 Javascript
webpack+react+antd脚手架优化的方法
2018/04/02 Javascript
详解js 创建对象的几种方法
2019/03/08 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
python使用PyCharm进行远程开发和调试
2017/11/02 Python
用Django实现一个可运行的区块链应用
2018/03/08 Python
Pandas实现数据类型转换的一些小技巧汇总
2018/05/07 Python
Django 忘记管理员或忘记管理员密码 重设登录密码的方法
2018/05/30 Python
python3实现指定目录下文件sha256及文件大小统计
2019/02/25 Python
python适合人工智能的理由和优势
2019/06/28 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
意大利团购网站:Groupon意大利
2016/10/11 全球购物
船餐厅和泰晤士河餐饮游轮:Bateaux London
2018/03/19 全球购物
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
为什么说Ruby是一种真正的面向对象程序设计语言
2012/10/30 面试题
土木工程专业自荐信
2013/10/04 职场文书
播音主持女孩的自我评价分享
2013/11/20 职场文书
校园网站的创业计划书范文
2013/12/30 职场文书
个人委托书范本汇总
2014/10/01 职场文书
小学2016年“我们的节日·重阳节”活动总结
2016/04/01 职场文书
TV动画《神废柴☆偶像》公布先导PV
2022/03/20 日漫