Vue2实现掷色子（多个色子）

效果图：

代码实现：

就是将每个色子独立起来，然后同时产生5个随机数，然后每个筛子取随机数对应的色子点数图片

图片文件

<template>
    <div class="home" v-cloak>
        <!-- 骰子区域 -->
        <div class="dice">
            <div class="dice-box1">
                <div class="wraps">
                    <div v-for="(ite,idx) in imgUrl" :key="idx" class="box" v-show="bannerIndex==idx">
                        <img :src="ite.img">
                    </div>
                    <div v-for="(ite,idx) in imgUrl" :key="idx" class="box" v-show="bannerIndex2==idx">
                        <img  :src="ite.img">
                    </div>
                    <!-- <div v-for="(ite,idx) in imgUrl" :key="idx" class="box" v-show="bannerIndex3==idx">
                        <img  :src="ite.img">
                    </div> -->
                </div>
                <div class="wraps">
                    <div v-for="(ite,idx) in imgUrl" :key="idx" class="box" v-show="bannerIndex4==idx">
                        <img  :src="ite.img">
                    </div>
                    <div v-for="(ite,idx) in imgUrl" :key="idx" class="box" v-show="bannerIndex5==idx">
                        <img  :src="ite.img">
                    </div>
                    <div v-for="(ite,idx) in imgUrl" :key="idx" class="box" v-show="bannerIndex6==idx">
                        <img  :src="ite.img">
                    </div>
                </div>
                
            </div>
        </div>
        <!-- 摇骰子按钮 -->
        <div class="dice-start" @click="handlestart">
            <span>摇骰子</span>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Home',
        components: {},
        data() {
            return {
                imgUrl: [ ],
                bannerIndex: 1,
                bannerIndex2: 3,
                bannerIndex3: 5,
                bannerIndex4: 4,
                bannerIndex5: 2,
                bannerIndex6: 0,
                setInter1: null, // 定时器
                mask: false,
                showNa: true, //防抖
            }
        },
        created(){
            this.imgUrl = []

            let arr = ['one','two','three','four','five','six']
            arr.forEach((item,index)=>{
                this.imgUrl.push({
                    id:index+1,
                    img: require(`./img/${item}.jpg`)
                })
            })

            console.log('夫斯基大街',this.imgUrl)
        },
        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
                    }
                },100)
                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: #e5e5e5;
        background-size: cover;
    }

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

    .dice {
        width: 100%;
        margin: 142px auto 0;
        .dice-box1 {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .box {
                width: 5rem;
                height: 5rem;
                position: relative;
                &:nth-child(n+1){
                    margin-right: 30px;
                }
                &:nth-child(n){
                    transform: rotate(60deg);
                }
                &:nth-child(2n){
                    transform: rotate(30deg);
                }
                &:nth-child(3n){
                    transform: rotate(90deg);
                }
                &:nth-child(4n){
                    transform: rotate(120deg);
                }
                &:nth-child(5n){
                    transform: rotate(240deg);
                }
                &:nth-child(6n){
                    transform: rotate(300deg);
                }

                img {
                    width: 5rem;
                    height: 5rem;
                    border-radius: 15px;
                    position: absolute;
                    
                }
            }

            .wraps{
                width: 100%;
                display: flex;
                justify-content: center;
                &:first-child{
                    margin-bottom: 20px;
                }
            }
        }
    }

    .dice-start {
        background: red;
        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;
        }
    }

</style>