vue 中秋节博饼游戏，摇骰子游戏，兼容移动端跟pc

本文链接：https://blog.youkuaiyun.com/m0_61233367/article/details/126627474

这是一个使用Vue.js创建的中秋节博饼游戏，包含摇骰子功能，支持移动端和PC。游戏界面包括头部logo、用户信息、骰子展示区和操作按钮，采用响应式设计，骰子图片会根据随机数滚动显示，模拟真实摇骰子效果。用户可以查看规则、奖品和排行榜，同时设有中奖提示弹窗。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

骰子视频

如果报错把图片骰子等换成自己的图片，我这里是本地图片

<template>
   <div class="home" v-cloak>
       
       <div class="BoCake-top">
           <img src="../assets/logo.png" />
           <span>微星</span>
       </div>
       
       <div class="BoCake-userinfo">
           <div class="userinfo-logo">
               <img src="../assets/logo.png" alt="">
           </div>
           <div class="userinfo-name">
               <span>liumour</span>
               <span style="margin-top: 2px;">剩余体力：999</span>
           </div>
           <div class="ranking">
               <span>等级：状元</span>
               <span style="margin-top: 2px;">排名：1</span>
           </div>
       </div>
       
       <div class="dice">
           <div class="dice-box1">
               <div class="box" style="margin-left: 30px;">
                   <div v-for="(item,index) in imgUrl" :key="index">
                       <img v-show="bannerIndex==index" :src="item.img">
                   </div>
               </div>
               <div class="box" style="margin-right: 30px;">
                   <div v-for="(item,index) in imgUrl2" :key="index">
                       <img v-show="bannerIndex2==index" :src="item.img">
                   </div>
               </div>
           </div>
           <div class="dice-box2">
               <div class="box">
                   <div v-for="(item,index) in imgUrl3" :key="index">
                       <img v-show="bannerIndex3==index" :src="item.img">
                   </div>
               </div>
               <div class="box">
                   <div v-for="(item,index) in imgUrl4" :key="index">
                       <img v-show="bannerIndex4==index" :src="item.img">
                   </div>
               </div>
           </div>
           <div class="dice-box3">
               <div class="box" style="margin-left: 30px;">
                   <div v-for="(item,index) in imgUrl5" :key="index">
                       <img v-show="bannerIndex5==index" :src="item.img">
                   </div>
               </div>
               <div class="box" style="margin-right: 30px;">
                   <div v-for="(item,index) in imgUrl6" :key="index">
                       <img v-show="bannerIndex6==index" :src="item.img">
                   </div>
               </div>
           </div>
       </div>
       
       <div v-if="showNa" class="dice-start" @click="handlestart">
           <img src="../assets/ioc6.png" alt="">
           <span>摇骰子</span>
       </div>
       <div v-if="!showNa" class="dice-start">
           <img src="../assets/ioc6.png" alt="">
           <span>摇骰子</span>
       </div>