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 相关文章推荐
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
Sep 22 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
Sep 19 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
Jan 19 Javascript
DeviceOne 让你一见钟情的App快速开发平台
Feb 17 Javascript
图解prototype、proto和constructor的三角关系
Jul 31 Javascript
Vue2组件tree实现无限级树形菜单
Mar 29 Javascript
vue使用drag与drop实现拖拽的示例代码
Sep 07 Javascript
用Webpack构建Vue项目的实践
Nov 07 Javascript
微信小程序 弹窗输入组件的实现解析
Aug 12 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
Feb 24 Javascript
vue props default Array或是Object的正确写法说明
Jul 30 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
单点登录 Ucenter示例分析
2013/10/29 PHP
PHPer 需要了解的 5 个 Composer 小技巧
2014/08/18 PHP
php构造函数的继承方法
2015/02/09 PHP
php通过前序遍历树实现无需递归的无限极分类
2015/07/10 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
Laravel timestamps 设置为unix时间戳的方法
2019/10/11 PHP
PHP7 新增功能
2021/03/09 PHP
参考:关于Javascript中实现暂停的几篇文章
2007/03/04 Javascript
用JS实现一个页面多个css样式实现
2008/05/29 Javascript
JS 操作符整理[推荐收藏]
2011/11/15 Javascript
JS实现的省份级联实例代码
2013/06/24 Javascript
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
详解JavaScript的回调函数
2015/11/20 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
2017/08/31 Javascript
全站最详细的Vuex教程
2018/04/13 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
vue中使用v-for时为什么不能用index作为key
2020/04/04 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
Openlayers学习之地图比例尺控件
2020/09/28 Javascript
Python基于回溯法子集树模板解决0-1背包问题实例
2017/09/02 Python
使用python Telnet远程登录执行程序的方法
2019/01/26 Python
python的sorted用法详解
2019/06/25 Python
python 高阶函数简单介绍
2021/02/19 Python
使用css3做0.5px的细线的示例代码
2018/01/18 HTML / CSS
德国古洛迷亚百货官网:GALERIA Kaufhof
2017/06/20 全球购物
运动会跳远广播稿5篇
2014/09/17 职场文书
教师先进事迹材料
2014/12/16 职场文书
长城导游词
2015/01/30 职场文书
滴水洞导游词
2015/02/10 职场文书
教师思想工作总结2015
2015/05/13 职场文书
教师年度考核自我评鉴
2015/08/11 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
2019年共青团工作条例最新版
2019/11/12 职场文书