当前位置：首页 > VUE

vue实现骰子

2026-03-07 04:18:46VUE

Vue 实现骰子效果

在 Vue 中实现骰子效果可以通过动态绑定样式和随机数生成来完成。以下是一个完整的实现方法：

创建骰子组件

<template>
  <div class="dice-container">
    <div class="dice" :class="'dice-' + currentValue" @click="rollDice">
      <div class="dot" v-for="n in currentValue" :key="n"></div>
    </div>
  </div>
</template>

添加组件逻辑

<script>
export default {
  data() {
    return {
      currentValue: 1,
      rolling: false
    }
  },
  methods: {
    rollDice() {
      if (this.rolling) return;

      this.rolling = true;
      const rolls = 10 + Math.floor(Math.random() * 10);
      let rollCount = 0;

      const rollInterval = setInterval(() => {
        this.currentValue = Math.floor(Math.random() * 6) + 1;
        rollCount++;

        if (rollCount >= rolls) {
          clearInterval(rollInterval);
          this.rolling = false;
        }
      }, 100);
    }
  }
}
</script>

添加骰子样式

<style scoped>
.dice-container {
  perspective: 1000px;
  margin: 20px;
}

.dice {
  width: 100px;
  height: 100px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
  cursor: pointer;
  background: white;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.dot {
  position: absolute;
  width: 20px;
  height: 20px;
  background: black;
  border-radius: 50%;
}

/* 骰子各面样式 */
.dice-1 .dot {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dice-2 .dot:nth-child(1) {
  top: 25%;
  left: 25%;
}
.dice-2 .dot:nth-child(2) {
  bottom: 25%;
  right: 25%;
}

.dice-3 .dot:nth-child(1) {
  top: 25%;
  left: 25%;
}
.dice-3 .dot:nth-child(2) {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.dice-3 .dot:nth-child(3) {
  bottom: 25%;
  right: 25%;
}

/* 其他点数样式类似，根据需要补充完整 */
</style>

添加3D旋转效果

要增强视觉效果，可以添加3D旋转动画：

// 在rollDice方法中添加旋转效果
rollDice() {
  // ...原有代码
  this.$el.querySelector('.dice').style.transform = 
    `rotateX(${Math.random() * 360}deg) rotateY(${Math.random() * 360}deg)`;
  // ...原有代码
}

使用组件

在父组件中引入并使用：

vue实现骰子

<template>
  <div>
    <DiceComponent />
  </div>
</template>

<script>
import DiceComponent from './DiceComponent.vue';

export default {
  components: {
    DiceComponent
  }
}
</script>