JS实现简单随机3D骰子

2024-09-28 08:18:47

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

})();

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

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

JS实现简单随机3D骰子

相关推荐

随机推荐