JS实现简单随机3D骰子

日期：2020-08-17 栏目：前端经验浏览：次
代码：
<!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>
<style type="text/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;
	}
</style>
<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>
 <script type="text/javascript">
 	(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   
 	 }
 	 
 	})();
 </script>
</body>
</html>
效果：
转载注明出处：http://www.duanlonglong.com/qdjy/1098.html
JS实现简单随机3D骰子

相关推荐
