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 二维数组的实现与应用
Mar 16 Javascript
关于全局变量和局部变量的那些事
Jan 11 Javascript
angularJS 中$scope方法使用指南
Feb 09 Javascript
JS显示下拉列表框内全部元素的方法
Mar 31 Javascript
js采用concat和sort将N个数组拼接起来的方法
Jan 21 Javascript
AngularJS递归指令实现Tree View效果示例
Nov 07 Javascript
浅谈Node.js:Buffer模块
Dec 05 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
Feb 27 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
Apr 12 Javascript
vue使用stompjs实现mqtt消息推送通知
Jun 22 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
Jan 18 Javascript
React Navigation 使用中遇到的问题小结
May 08 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中的str_repeat函数在JavaScript中的实现
2013/09/16 PHP
php+jQuery.uploadify实现文件上传教程
2014/12/26 PHP
浅谈php的优缺点
2015/07/14 PHP
PHP如何通过AJAX方式实现登录功能
2015/11/23 PHP
yii用户注册表单验证实例
2015/12/26 PHP
php写app接口并返回json数据的实例(分享)
2017/05/20 PHP
PHP调用微博接口实现微博登录的方法示例
2018/09/22 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
JQuery调用绑定click事件的3种写法
2015/03/28 Javascript
浅谈js基本数据类型和typeof
2016/08/09 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
nodejs 实现钉钉ISV接入的加密解密方法
2017/01/16 NodeJs
js实现简易聊天对话框
2017/08/17 Javascript
jQuery获取复选框选中的当前行的某个字段的值
2017/09/15 jQuery
JS+html5实现异步上传图片显示上传文件进度条功能示例
2019/11/09 Javascript
[31:01]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS Orenda
2014/05/23 DOTA
详解设计模式中的工厂方法模式在Python程序中的运用
2016/03/02 Python
Python批量修改文本文件内容的方法
2016/04/29 Python
windows10下python3.5 pip3安装图文教程
2018/04/02 Python
python3 遍历删除特定后缀名文件的方法
2018/04/23 Python
用python写扫雷游戏实例代码分享
2018/05/27 Python
python获取指定日期范围内的每一天,每个月,每季度的方法
2019/08/08 Python
python自动循环定时开关机(非重启)测试
2019/08/26 Python
Python用户自定义异常的实现
2020/12/25 Python
详解HTML5中rel属性的prefetch预加载功能使用
2016/05/06 HTML / CSS
洛杉矶健身中心女性专用运动服饰品牌:Marika
2018/05/09 全球购物
《姥姥的剪纸》教学反思
2014/02/25 职场文书
高中生家长寄语大全
2014/04/03 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
2014年客服工作总结与计划
2014/12/09 职场文书
小班下学期幼儿评语
2014/12/30 职场文书
JS实现扫雷项目总结
2021/05/19 Javascript
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL