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
 }

})();

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

(0)

相关推荐

  • js实现简单掷骰子效果

    本案例要实现的掷骰子效果: 点击按钮,使骰子转动起来,转动随机时间之后,自动停止在某一个点数上. 思路: 点击按钮之后,将原本静态的骰子图片替换为一个动态转动的gif图片: 创建定时器,实现随机时间之后,动态的图片随机替换为1~6点图片的任意一张图片. 注意: 1.要考虑用户点击一次按钮后再连续多次点击按钮的情况. 2.为了防止不必要的问题,需要设置使定时器执行完毕一次之后,再点击按钮才有效. 3.这里设置了一个开关: 用户点击按钮时,先判断开关是否关闭,如未关闭,可执行函数内容: 若开关已关闭

  • js实现简单掷骰子小游戏

    本文实例为大家分享了js掷骰子小游戏的具体代码,供大家参考,具体内容如下 实现方法: 方法一:通过background-position.background-image.backg-repeat三个属性以及jquery animate()方法改变背景骰子图来实现图片切换. PS:调整background-position比较麻烦,由于背景是一张包含各个点数以及旋转时骰子的整图 方法二:设置定时调整css样式background-image. PS:实现简单,但是视觉效果不佳 <!DOCTYPE

  • js实现转动骰子模型

    本文创建了一个自动随机生成骰子数的模型,因为需要引入图片这里将图片省去了,自己导入图片即可验证代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--创建对象--> <div id="c1"> <img src=&qu

  • js实现掷骰子小游戏

    本文实例为大家分享了js掷骰子小游戏的具体代码,供大家参考,具体内容如下 因为这次作业是第一个实验,比较简单,但是要求面向对象来做,而我这个时候又刚好在学JS,JS来做骰子游戏即有前端了,又省了后台处理,代码量会比用JAVA来做少了非常非常多.考虑到这种实验实在不想浪费时间去用JAVA写,于是有了一下JS实现的版本.但是大家都知道JS的面向对象其实是伪面向对象.我感觉并不好用,因为用句柄的方式无法传值,你封装成对象了还得拆出来成为过程(单一方法)来用. 版本1: (没有用面向对象) <!DOCT

  • JS实现简单随机3D骰子

    本文实例为大家分享了JS实现简单随机3D骰子的具体代码,供大家参考,具体内容如下 描述: JS--实现简单的随机3D骰子. 效果: 实现: html文件: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i

  • 基于JS实现简单的3D立方体自动旋转

    目录 演示 技术栈 源码 css js 雪花部分 演示 技术栈 display:inline-block,block,inline元素的区别: display:block将元素显示为块级元素,从而可以更好地操控元素的宽高,以及内外边距,每一个块级元素都是从新的一行开始. display : inline将元素显示为行内元素,高度,行高以及底边距不可改变,高度就是内容文字或者图片的宽度,不可以改变.多个相邻的行内元素排在同一行里,知道页面一行排列不下,才会换新的一行. display:inline

  • js实现简单的随机点名器

    本文实例为大家分享了js实现简单随机点名器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht

  • Three.js实现简单3D房间布局

    本文实例为大家分享了Three.js实现简单3D房间布局的具体代码,供大家参考,具体内容如下 废话不说了,直接上成果图. 代码如下 <!doctype html> <html lang="en"> <head> <title>房间布局</title> <meta charset="utf-8"> <meta name="viewport" content="w

  • js实现简单的点名器随机色实例代码

    js简单实现点名器随机色 布局(排版) <body> <button onclick="star()">开始</button> <button onclick="stop()">结束</button> <div id="box"> </div> </body> css样式 <style> #box{ width: 240px; height

  • 基于Three.js实现冬奥主题3D趣味页面

    目录 背景 效果 实现 引入资源 页面DOM结构 场景初始化 添加光源 加载进度管理 创建地面 创建冬奥吉祥物冰墩墩 创建奥运五环 创建旗帜 创建树木 创建雪花 镜头控制.缩放适配.动画 总结 背景 迎冬奥,一起向未来!2022冬奥会马上就要开始了,本文使用 Three.js + React 技术栈,实现冬日和奥运元素,制作了一个充满趣味和纪念意义的冬奥主题 3D 页面.本文涉及到的知识点主要包括:TorusGeometry 圆环面.MeshLambertMaterial 非光泽表面材质.Mes

  • 利用css+原生js制作简单的钟表

    利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分 html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期以及时间,至于钟表上的刻度.数字等元素,因为量比较多,采用jvascript生成 <!doctype html> <html> <head> <meta charset="UTF-8"> <link rel='stylesheet'

  • js代码实现随机颜色的小方块

    下面一段代码就是用js实现的随机颜色的小方块,不多说了代码很简单,直接上代码了. /**/js注释已删 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF- "> <meta charset="utf- "> <title>koringz&l

  • js实现网页随机切换背景图片的方法

    本文实例讲述了js实现网页随机切换背景图片的方法.分享给大家供大家参考.具体实现方法如下: 首先要准备一些图像,图像的大小(无论是尺寸大小还是数据大小)要控制好,如果太大,会使用户等不及查看全图就跳出了,如果太小,又会影响页面质量 在script中将这些图像编为一个数组,便于调用.数组的长度当然就是图像的数量. 复制代码 代码如下: var bodyBgs = [];    //创建一个数组变量来存储背景图片的路径 bodyBgs[0] = "images/01.jpg"; bodyB

  • js定时器+简单的动画效果实例

    1.向下滑动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>向下滑动</title> <style> body { margin: 0px; } #show { width: 200px; /* 高度为 0 */ height: 100px; background-color: lightc

随机推荐