当前位置：首页 > VUE

vue实现掷骰子

2026-02-20 06:26:38VUE

实现掷骰子的基本思路

在Vue中实现掷骰子功能，可以通过结合动画效果和随机数生成来模拟真实的骰子滚动。需要定义骰子的状态（当前点数）、动画效果以及触发滚动的逻辑。

创建Vue组件

创建一个名为Dice的组件，包含骰子的点数显示和滚动动画：

<template>
  <div class="dice-container">
    <div 
      class="dice" 
      :class="{ 'rolling': isRolling }" 
      @click="rollDice"
    >
      {{ currentFace }}
    </div>
  </div>
</template>

定义组件逻辑

在<script>部分定义骰子的数据和方法：

vue实现掷骰子

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

      this.isRolling = true;
      const rolls = 10; // 模拟滚动次数
      let rollCount = 0;

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

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

添加CSS样式

为骰子添加基础样式和动画效果：

<style scoped>
.dice-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.dice {
  width: 100px;
  height: 100px;
  border: 2px solid #333;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  cursor: pointer;
  user-select: none;
  transition: transform 0.1s;
}

.dice.rolling {
  animation: shake 0.5s;
}

@keyframes shake {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}
</style>

使用组件

在父组件中引入并使用Dice组件：

vue实现掷骰子

<template>
  <div>
    <h3>点击骰子开始滚动</h3>
    <Dice />
  </div>
</template>

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

export default {
  components: {
    Dice
  }
};
</script>

扩展功能

如果需要显示骰子的图形而非数字，可以通过CSS绘制骰子面：

.dice {
  /* 其他样式保持不变 */
  background-color: white;
  position: relative;
}

/* 骰子点数样式 */
.dice::before {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  background-color: black;
  border-radius: 50%;
}

根据currentFace的值动态调整点数位置：

computed: {
  diceStyle() {
    const positions = {
      1: [{ top: '50%', left: '50%' }],
      2: [{ top: '25%', left: '25%' }, { top: '75%', left: '75%' }],
      // 其他点数的位置定义
    };
    return positions[this.currentFace];
  }
}