当前位置：首页 > VUE

vue实现砸金蛋

2026-01-17 03:24:07VUE

Vue 实现砸金蛋功能

砸金蛋是一种常见的互动游戏，可以通过 Vue 实现动画效果和交互逻辑。以下是实现步骤：

创建 Vue 项目

使用 Vue CLI 或 Vite 创建一个新项目，确保项目环境配置正确。

npm init vue@latest gold-egg
cd gold-egg
npm install

设计金蛋组件

创建一个金蛋组件，包含金蛋的图片和动画效果。

<template>
  <div class="egg" @click="hitEgg" :class="{ 'broken': isBroken }">
    <img v-if="!isBroken" src="@/assets/egg.png" alt="金蛋">
    <img v-else src="@/assets/broken-egg.png" alt="破碎的金蛋">
  </div>
</template>

<script>
export default {
  data() {
    return {
      isBroken: false
    }
  },
  methods: {
    hitEgg() {
      this.isBroken = true
      this.$emit('egg-hit')
    }
  }
}
</script>

<style scoped>
.egg {
  cursor: pointer;
  transition: transform 0.2s;
}
.egg:hover {
  transform: scale(1.1);
}
.broken {
  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>

实现砸金蛋逻辑

在主页面中引入金蛋组件，并实现砸金蛋后的奖励逻辑。

<template>
  <div class="game-container">
    <h1>砸金蛋游戏</h1>
    <div class="eggs">
      <Egg v-for="(egg, index) in eggs" :key="index" @egg-hit="handleEggHit(index)" />
    </div>
    <div v-if="reward" class="reward">
      恭喜获得: {{ reward }}
    </div>
  </div>
</template>

<script>
import Egg from '@/components/Egg.vue'

export default {
  components: { Egg },
  data() {
    return {
      eggs: Array(5).fill(null),
      rewards: ['一等奖', '二等奖', '三等奖', '谢谢参与', '再来一次'],
      reward: null
    }
  },
  methods: {
    handleEggHit(index) {
      this.reward = this.rewards[index]
    }
  }
}
</script>

<style scoped>
.game-container {
  text-align: center;
}
.eggs {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 20px 0;
}
.reward {
  font-size: 24px;
  color: gold;
  margin-top: 20px;
}
</style>

添加音效

为增强用户体验，可以添加砸金蛋的音效。

<script>
export default {
  methods: {
    hitEgg() {
      this.isBroken = true
      const audio = new Audio(require('@/assets/hit-sound.mp3'))
      audio.play()
      this.$emit('egg-hit')
    }
  }
}
</script>

优化动画效果

通过 CSS 或动画库（如 GSAP）优化金蛋破碎的动画效果。

vue实现砸金蛋

.broken {
  animation: break 0.5s forwards;
}
@keyframes break {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.8; }
  100% { transform: scale(0); opacity: 0; }
}

通过以上步骤，可以实现一个简单的砸金蛋游戏。根据需求可以进一步扩展功能，如多关卡、积分系统等。