当前位置：首页 > JavaScript

js实现骰子转动

2026-02-03 00:14:34JavaScript

实现骰子转动的基本思路

通过JavaScript和CSS结合实现骰子转动效果，核心包括DOM操作、CSS动画以及随机数生成。骰子通常用立方体模拟，六个面分别显示不同点数。

HTML结构搭建

创建一个div作为骰子容器，内部包含六个面（每个面对应骰子点数）：

<div class="dice">
  <div class="face front">1</div>
  <div class="face back">2</div>
  <div class="face right">3</div>
  <div class="face left">4</div>
  <div class="face top">5</div>
  <div class="face bottom">6</div>
</div>

CSS样式设计

使用CSS 3D变换实现立方体效果，并为转动添加过渡动画：

.dice {
  width: 100px;
  height: 100px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s ease-out;
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  background: rgba(255,255,255,0.9);
}
.front { transform: translateZ(50px); }
.back { transform: rotateY(180deg) translateZ(50px); }
.right { transform: rotateY(90deg) translateZ(50px); }
.left { transform: rotateY(-90deg) translateZ(50px); }
.top { transform: rotateX(90deg) translateZ(50px); }
.bottom { transform: rotateX(-90deg) translateZ(50px); }

JavaScript控制逻辑

通过随机生成旋转角度和方向实现骰子转动效果：

function rollDice() {
  const dice = document.querySelector('.dice');
  const randomX = Math.floor(Math.random() * 360);
  const randomY = Math.floor(Math.random() * 360);

  dice.style.transform = `rotateX(${randomX}deg) rotateY(${randomY}deg)`;

  // 获取最终朝上的面（简化版逻辑）
  setTimeout(() => {
    const result = 1 + Math.floor(Math.random() * 6);
    console.log(`骰子结果: ${result}`);
  }, 1000);
}

// 点击或自动触发
document.addEventListener('click', rollDice);

物理效果增强版

使用CSS动画关键帧实现更自然的减速效果：

@keyframes roll {
  0% { transform: rotateX(0) rotateY(0); }
  100% { transform: rotateX(720deg) rotateY(360deg); }
}
.dice.rolling {
  animation: roll 2s cubic-bezier(0.3, 0.7, 0.1, 1) forwards;
}

对应JavaScript修改：

function rollDice() {
  const dice = document.querySelector('.dice');
  dice.classList.add('rolling');

  setTimeout(() => {
    dice.classList.remove('rolling');
    const result = 1 + Math.floor(Math.random() * 6);
    // 根据结果调整最终角度（示例为显示数字3）
    dice.style.transform = 'rotateX(0deg) rotateY(90deg)';
    console.log(`骰子结果: ${result}`);
  }, 2000);
}