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

<template>
    <div class="home" v-cloak>
        <!-- 头部logo -->
        <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>
        <!-- 规则、奖品、排行 -->
        <div class="dice-prize">
            <div class="prize">
                <img class="guize" src="../assets/guize.png" alt="">
                <span>规则</span>
            </div>
            <div class="prize">
                <img class="liwu" src="../assets/liwu.png" alt="">
                <span>奖品</span>
            </div>
            <div class="prize">
                <img class="paihang" src="../assets/paihang.png" alt="">
                <span>排行</span>
            </div>
        </div>
        <!-- 遮罩层 -->
        <div v-if="mask==true" class="mask-layer">
            <!-- 弹出层内容块 -->
            <div class="mask-prize">
                <p>恭喜您！</p>
                <p>摇中了“状元”！</p>
                <p>获得100元饭票券一份</p>
                <div @click="maskClose">
                    关闭
                </div>
                <span>当前剩余2次</span>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Home',
        components: {},
        data() {
            return {
                imgUrl: [{
                        id: 1,
                        img: require('@/assets/ioc1.png')
                    },
                    {
                        id: 2,
                        img: require('@/assets/ioc2.png')
                    },
                    {
                        id: 3,
                        img: require('@/assets/ioc3.png')
                    },
                    {
                        id: 4,
                        img: require('@/assets/ioc4.png')
                    },
                    {
                        id: 5,
                        img: require('@/assets/ioc5.png')
                    },
                    {
                        id: 6,
                        img: require('@/assets/ioc6.png')
                    }
                ],
                imgUrl2: [{
                        id: 1,
                        img: require('@/assets/ioc1.png')
                    },
                    {
                        id: 2,
                        img: require('@/assets/ioc2.png')
                    },
                    {
                        id: 3,
                        img: require('@/assets/ioc3.png')
                    },
                    {
                        id: 4,
                        img: require('@/assets/ioc4.png')
                    },
                    {
                        id: 5,
                        img: require('@/assets/ioc5.png')
                    },
                    {
                        id: 6,
                        img: require('@/assets/ioc6.png')
                    }
                ],
                imgUrl3: [{
                        id: 1,
                        img: require('@/assets/ioc1.png')
                    },
                    {
                        id: 2,
                        img: require('@/assets/ioc2.png')
                    },
                    {
                        id: 3,
                        img: require('@/assets/ioc3.png')
                    },
                    {
                        id: 4,
                        img: require('@/assets/ioc4.png')
                    },
                    {
                        id: 5,
                        img: require('@/assets/ioc5.png')
                    },
                    {
                        id: 6,
                        img: require('@/assets/ioc6.png')
                    }
                ],
                imgUrl4: [{
                        id: 1,
                        img: require('@/assets/ioc1.png')
                    },
                    {
                        id: 2,
                        img: require('@/assets/ioc2.png')
                    },
                    {
                        id: 3,
                        img: require('@/assets/ioc3.png')
                    },
                    {
                        id: 4,
                        img: require('@/assets/ioc4.png')
                    },
                    {
                        id: 5,
                        img: require('@/assets/ioc5.png')
                    },
                    {
                        id: 6,
                        img: require('@/assets/ioc6.png')
                    }
                ],
                imgUrl5: [{
                        id: 1,
                        img: require('@/assets/ioc1.png')
                    },
                    {
                        id: 2,
                        img: require('@/assets/ioc2.png')
                    },
                    {
                        id: 3,
                        img: require('@/assets/ioc3.png')
                    },
                    {
                        id: 4,
                        img: require('@/assets/ioc4.png')
                    },
                    {
                        id: 5,
                        img: require('@/assets/ioc5.png')
                    },
                    {
                        id: 6,
                        img: require('@/assets/ioc6.png')
                    }
                ],
                imgUrl6: [{
                        id: 1,
                        img: require('@/assets/ioc1.png')
                    },
                    {
                        id: 2,
                        img: require('@/assets/ioc2.png')
                    },
                    {
                        id: 3,
                        img: require('@/assets/ioc3.png')
                    },
                    {
                        id: 4,
                        img: require('@/assets/ioc4.png')
                    },
                    {
                        id: 5,
                        img: require('@/assets/ioc5.png')
                    },
                    {
                        id: 6,
                        img: require('@/assets/ioc6.png')
                    }
                ],
                bannerIndex: 1,
                bannerIndex2: 3,
                bannerIndex3: 5,
                bannerIndex4: 4,
                bannerIndex5: 2,
                bannerIndex6: 0,
                setInter1: null, // 定时器
                mask: false,
                showNa: true, //防抖
            }
        },
        methods: {
            handlestart() { //开始
                this.showNa = false //防抖
                this.setInter1 = setInterval(() => {
                    this.bannerIndex++
                    this.bannerIndex2++
                    this.bannerIndex3++
                    this.bannerIndex4++
                    this.bannerIndex5++
                    this.bannerIndex6++
                    if (this.bannerIndex == this.imgUrl.length) {
                        this.bannerIndex = 0
                        this.bannerIndex2 = 0
                        this.bannerIndex3 = 0
                        this.bannerIndex4 = 0
                        this.bannerIndex5 = 0
                        this.bannerIndex6 = 0
                    }
                })
                setTimeout(() => {
                    clearInterval(this.setInter1) // 先将已有的计时器清除
                    //随机1-6点数
                    this.bannerIndex = Math.round(Math.random() * 5);
                    this.bannerIndex2 = Math.round(Math.random() * 5);
                    this.bannerIndex3 = Math.round(Math.random() * 5);
                    this.bannerIndex4 = Math.round(Math.random() * 5);
                    this.bannerIndex5 = Math.round(Math.random() * 5);
                    this.bannerIndex6 = Math.round(Math.random() * 5);
                    setTimeout(() => {
                        this.showNa = true
                        this.mask = true

}, 300)
                }, 1000)
            },
            maskClose() { //关闭中奖信息
                this.mask = false
            }
        }
    }
</script>

<style lang="scss" scoped>
    * {
        margin: 0;
        padding: 0;
    }

.home {
        position: relative;
        height: 100vh;
        overflow: hidden;
        background: url("../assets/bg.png") no-repeat;
        background-size: cover;
    }

[v-cloak] {
        display: none !important;
    }

.BoCake-top {
        width: 690px;
        margin-top: 20px;
        margin-left: 30px;
        margin-bottom: 55px;
        display: flex;

align-items: center;

img {
            width: 66px;
            height: 66px;
        }

span {
            font-size: 34px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: bold;
            color: #ffffff;
            letter-spacing: 0.6px;
            margin-left: 13px;
        }
    }

.BoCake-userinfo {
        width: 630px;
        height: 126px;
        background-color: rgb(250 250 214 / 0.3);
        border-radius: 60px;
        margin: auto;
        display: flex;
        align-items: center;

.userinfo-logo {
            width: 126px;
            height: 126px;
            background-color: #fffad6;
            border-radius: 50%;
            margin-left: -2px;

img {
                width: 126px;
                height: 126px;
                border-radius: 50%;
            }
        }

.userinfo-name {
            display: flex;
            flex-flow: column;
            margin-left: 25px;

>span {
                font-size: 30px;
                font-family: PingFang SC, PingFang SC-Regular;
                text-align: left;
                color: #f9fabe;
                letter-spacing: 0.6px;
            }
        }

.ranking {
            display: flex;
            flex-flow: column;
            margin-left: 60px;

>span {
                font-size: 30px;
                font-family: PingFang SC, PingFang SC-Regular;
                text-align: left;
                color: #f9fabe;
                letter-spacing: 0.6px;
            }
        }
    }

.dice {
        width: 510px;
        margin: 142px auto 0;
        display: flex;
        flex-flow: column;

.dice-box1 {
            display: flex;
            justify-content: space-evenly;

.box {
                width: 100px;
                height: 100px;
                position: relative;

img {
                    width: 100px;
                    height: 100px;
                    position: absolute;
                }

div:nth-child(2) {
                    margin-left: 8px;
                }

div:nth-child(4) {
                    margin-left: -2px;
                }

div:nth-child(5) {
                    margin-right: 5px;
                }
            }
        }

.dice-box2 {
            display: flex;
            justify-content: space-between;
            margin: 36px 0;

.box {
                width: 100px;
                height: 100px;

img {
                    width: 100px;
                    height: 100px;
                }

div:nth-child(2) {
                    margin-left: -5px;
                }

div:nth-child(3) {
                    margin-right: 5px;
                }

div:nth-child(4) {
                    margin-left: 5px;
                }
            }
        }

.dice-box3 {
            display: flex;
            justify-content: space-evenly;

.box {
                width: 100px;
                height: 100px;

img {
                    width: 100px;
                    height: 100px;
                }

div:nth-child(2) {
                    margin-left: 2px;
                }

div:nth-child(3) {
                    margin-right: 2px;
                }

div:nth-child(4) {
                    margin-left: -6px;
                }
            }
        }
    }

.dice-start {
        width: 280px;
        height: 72px;
        border: 2px solid #f9fabe;
        border-radius: 38px;
        margin: 180px auto 0;
        display: flex;
        justify-content: center;
        align-items: center;

img {
            width: 42px;
            height: 42px;
            margin-right: 15px;
        }

span {
            font-size: 36px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: bold;
            color: #f9fabe;
            letter-spacing: 0.6px;
        }
    }

.dice-prize {
        width: 680px;
        height: 70px;
        margin: 65px auto 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

.prize {
            width: 172px;
            height: 60px;
            border: 2px solid #f9fabe;
            border-radius: 30px;
            display: flex;
            justify-content: center;
            align-items: center;

img {
                margin-right: 10px;
            }

.guize {
                width: 24px;
                height: 28px;
            }

.liwu {
                width: 32px;
                height: 28px;
            }

.paihang {
                width: 28px;
                height: 26px;
            }

span {
                font-size: 24px;
                font-family: PingFang SC, PingFang SC-Regular;
                text-align: left;
                color: #f9fabe;
                letter-spacing: 0.5px;
            }
        }
    }

// 遮罩层
    .mask-layer {
        position: fixed;
        width: 100%;
        height: 100vh;
        background: rgb(000 000 000 /0.5);
        left: 0;
        top: 0;
        z-index: 999;

.mask-prize {
            width: 630px;
            height: 400px;
            background: #ffdf9b;
            border-radius: 40px;
            margin: 500px auto 0;
            display: flex;
            flex-flow: column;
            justify-content: center;
            align-items: center;

p {
                font-size: 44px;
                font-family: PingFang SC, PingFang SC-Regular;
                color: #624300;
                letter-spacing: 0.88px;
                margin-bottom: 10px;
            }

div {
                width: 320px;
                line-height: 84px;
                background: #1d171b;
                border-radius: 42px;
                text-align: center;
                font-size: 36px;
                font-family: PingFang SC, PingFang SC-Regular;
                color: #ffffff;
                letter-spacing: 0.75px;
            }

span {
                margin-top: 6px;
                font-size: 32px;
                font-family: PingFang SC, PingFang SC-Regular;
                text-align: center;
                color: #624300;
                letter-spacing: 0.64px;
            }
        }
    }
</style>

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

1. python可视化窗口制作一个摇骰子游戏_python摇骰子游戏小案例

   python摇骰子游戏小案例 小案例: import random #充值函数 def topup(): global money n = input('充值金额(100元等于30个金币充值金额不低于 ...

2. Java 简单的摇骰子游戏：案例

   package TestDemo;import java.util.Random; import java.util.Scanner;/*** 摇骰子游戏**/ public class TestDe ...

3. python摇骰子游戏小案例

   python摇骰子游戏小案例 小案例: import random#充值函数 def topup():global moneyn = input('充值金额(100元等于30个金币充值金额不低于100 ...

4. android摇骰子源代码,Android实现微信摇骰子游戏

   过年怎么可以不玩红包娱乐一下呢,微信里的摇骰子大小和石头剪刀布就是不错的游戏方式. 使用Java的Random函数很容易实现,以骰子为例: 1.骰子摇动的动画,使用animation-list帧动画实 ...

5. python编写摇骰子游戏_Python实现的摇骰子猜大小功能小游戏示例

   本文实例讲述了Python实现的摇骰子猜大小功能小游戏.分享给大家供大家参考,具体如下: 最近学习Python的随机数,逻辑判断,循环的用法,就想找一些练习题,比如小游戏猜大小,程序思路如下: 开发环 ...

6. html5 筛子,html5摇骰子游戏

   骰子游戏body#can;can;ctx;[];;;]]];window.οnlοad= function(){ can); ctx);ctx.clearRect(0,0,can.width,can. ...

7. html5 摇骰子游戏,html5 canvas掷骰子（简单，学习基础canvas）

   下面是编程之家 jb51.cc 通过网络收集整理的代码片段. 编程之家小编现在分享给大家,也给大家做个参考. 置骰子游戏 var cwidth = 400; //保存画布宽度和高度,用于擦除用 var ...

8. html5 摇骰子游戏,html5摇骰子游戏

   骰子游戏body#can;can;ctx;[];;;]]];window.οnlοad= function(){ can); ctx);ctx.clearRect(0,0,can.width,can. ...

9. python可视化窗口制作一个摇骰子游戏_使用python制作一个抽奖小游戏——骰子游戏...

   1.模拟真实环境掷骰子 从Python标准库中调用模块:random--random中包含以各种方式生成随机数的函数 从random中引用randint这一函数--骰子都是有固定面数 from ran ...

10. python -小游戏-掷骰子游戏

    写的比较简单 # 掷骰子游戏 import randomprint('*' * 40) print(' 欢迎进入皇家游戏厂!') print('*' * 40) gameMoney = 0 name ...

最新文章

1. Mybatis 中$与#的区别
2. 如何将TXT,EXCEL或CSV数据导入ORACLE到对应表中
3. sublime c 语言 编译环境搭建,详解sublime搭建C/C++编译环境
4. 达摩院文档级关系抽取新SOTA和零样本关系抽取新任务
5. java面试题十 string字符串操作
6. 推荐文章：机器学习：“一文读懂机器学习，大数据/自然语言处理/算法全有了...
7. python使用redis有序集合_Redis 有序集合(sorted set)
8. 2016级算法期末模拟练习赛-E.AlvinZH的青春记忆III
9. 100篇文献-万字总结 || 强化学习求解车间调度
10. 通达信 移动平均算法_涨停板这样选！首次公开通达信超级选股法使用流程（建议收藏）...
11. win7驱动精灵_win7驱动打不上？黑科技H310/B360 USB核显驱动安装教程
12. 【见闻录系列】我所理解的搜索业务二三事
13. String fname=%e6%8e%88%e6%9d%832; url转码成中文
14. bellman_ford
15. Hadoop3.2.0 HDFS DataNode管理员指南
16. 2022年六西格玛培训机构排名
17. 用Sublime写LaTex
18. Java画图程序设计
19. 康耐视visionpro快速入门笔记1
20. 模拟电子技术实验作业（10）

热门文章

1. viewpage2简单实现tablayout
2. Oracle nlssort()中文排序
3. 直播小程序服务器配置,小程序直播obs推流设备直播设置教程
4. Kali系统学习：弱点扫描工具NMAP实战演示
5. 画出传输门、三态门、开路门_传输门和三态门什么区别
6. arcgis 经纬度转大地坐标_arcgis下平面坐标与大地坐标的转换
7. VS2010中文版MSDN下载地址
8. Windows XP SP3 VOL 简体中文正式版 V201106
9. 计网·网线制作（第二课）
10. STM32基础教程（CubeMX）—— LCD显示