vue扭蛋机抽奖游戏

简易扭蛋机demo

这是一个使用CSS3和JavaScript实现的扭蛋机抽奖游戏。该游戏的主要功能是通过点击按钮进行抽奖，抽奖过程中会显示滚动的小球，最终随机停止并显示一个中奖小球。

该游戏的抽奖过程如下：

1. 当用户点击抽奖按钮时，首先检查当前是否正在进行抽奖任务或者当前有小球正在滚动。如果有，则不执行抽奖操作。
2. 如果满足抽奖条件，则设置抽奖状态为开始，并等待4秒钟。
3. 4秒钟后，停止抽奖，并随机选择一个小球作为中奖结果。
4. 开始滚动中奖小球，直到小球到达最终位置。
5. 小球到达最终位置后，停止滚动并隐藏小球。

这个游戏的实现方式是通过CSS3的动画效果和JavaScript的定时器来控制小球的滚动和抽奖的过程。使用CSS3可以轻松地实现小球的滚动效果，而JavaScript则可以控制抽奖的流程和时间。

整体代码

HTML部分

html结构可根据自己需求重新开发，一下代码只是演示，抽奖思路,ball-box下面每个图片是根据index动态添加类名，在css中方便单独设置每个小球位置

<template><div><div class="raffle"><div class="collectors"><div class="top">Top 3 Xmas Balls Collectors</div><div class="awards-list"><div class="item" v-for="(item, index) in emailList" :key="index">[e-mail]</div></div></div><div class="lottery"><!-- 抽奖  --><div class="ball-box" :class="{ 'active': !opportunityStatus }"><img v-for="(item, index) in ballList" :key="index" :src="item" alt="" :class="`ball${index}`"></div><!-- 抽奖次数 --><div class="glass"><div class="glass-list"><div class="item">1 MORE CHANCE</div></div><img src="./img/glass.png" alt=""></div><!-- 滚动小球  --><img :src="lotteryBall" alt="" class="roll-ball" :class="{ 'active': rollBall }"><img src="./img/ball-base.png" alt="" class="ball-base"><img src="./img/games.png" alt="" class="games-img"></div><!-- 抽奖按钮 --><div class="play" @click="rafflePlay"><img src="./img/play-go.png" alt=""></div></div></div>
</template>

js部分

flexible文件因为布局使用rem，来计算自适应，ballList数组中的图片可自行修改

<script>
export default {data() {return {//抽奖小球ballList:[require('./img/ball-1.png'),require('./img/ball-2.png'),require('./img/ball-3.png'),require('./img/ball-4.png'),require('./img/ball-5.png'),require('./img/ball-6.png'),require('./img/bal