JS实现简单随机3D骰子

时间：2021-05-26

本文实例为大家分享了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-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 } })();

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章