当前位置：首页 > VUE

vue实现掷骰子

2026-01-19 14:08:03VUE

Vue 实现掷骰子功能

在 Vue 中实现掷骰子功能可以通过简单的动画和随机数生成来实现。以下是一个完整的实现方法：

1. 创建 Vue 组件 在 Vue 单文件组件中，定义骰子的面和动画效果。

<template>
  <div class="dice-container">
    <div class="dice" :class="'show-' + currentFace" @click="rollDice">
      <div class="face face-1">1</div>
      <div class="face face-2">2</div>
      <div class="face face-3">3</div>
      <div class="face face-4">4</div>
      <div class="face face-5">5</div>
      <div class="face face-6">6</div>
    </div>
  </div>
</template>

2. 添加组件逻辑 在 script 部分添加骰子逻辑和动画效果。

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

      this.isRolling = true
      const rolls = 10 + Math.floor(Math.random() * 10)

      let rollCount = 0
      const rollInterval = setInterval(() => {
        this.currentFace = Math.floor(Math.random() * 6) + 1
        rollCount++

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

3. 添加 CSS 样式 为骰子添加 3D 效果和动画样式。

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

.dice {
  width: 100px;
  height: 100px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s;
  cursor: pointer;
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid #000;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  background: white;
}

/* 定义各面位置 */
.face-1 { transform: rotateY(0deg) translateZ(50px); }
.face-2 { transform: rotateY(90deg) translateZ(50px); }
.face-3 { transform: rotateY(180deg) translateZ(50px); }
.face-4 { transform: rotateY(-90deg) translateZ(50px); }
.face-5 { transform: rotateX(90deg) translateZ(50px); }
.face-6 { transform: rotateX(-90deg) translateZ(50px); }

/* 定义显示的面 */
.show-1 { transform: rotateY(0deg); }
.show-2 { transform: rotateY(-90deg); }
.show-3 { transform: rotateY(-180deg); }
.show-4 { transform: rotateY(90deg); }
.show-5 { transform: rotateX(-90deg); }
.show-6 { transform: rotateX(90deg); }
</style>

4. 使用组件 在父组件中引入并使用这个骰子组件。

<template>
  <div id="app">
    <h1>Vue 骰子示例</h1>
    <DiceComponent />
  </div>
</template>

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

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

5. 进阶功能 可以添加更多功能如：