vue寫轉盤抽獎功能及可根據機率去計算

最近在作一個大轉盤抽獎獲取金幣及激勵視頻，剛開始要求前端本身根據後臺返的每塊機率去寫邏輯，後來被駁回了，不過本次記錄一下寫的。

1. html部分

`<div class="lucky-bg relative">

<img src="../assets/images/point.png" class="abs point-img" />
        <div class="lucky-wheel auto">
            <img src="../assets/images/p2.png" class="abs point-bg" />
            <img src="../assets/images/p1.png" class="abs point-bg1" />
            <div class="wheel-main com-bg relative">
                <img
                    src="../assets/images/p3.png"
                    class="abs com-img point-bg2"
                    style="top: 0.35rem;width: 15rem;left: 0.5rem;"
                />
                <div class="wheel-pointer-box" @click="hasTimes ? rotateFun():''">
                    <div class="wheel-pointer"></div>
                    <img src="../assets/images/word.png" class="word abs" />
                </div>
                <div
                    class="wheel-bg"
                    :style="{transform:rotateAngle,transition:rotateTransition == ''?'transform 4s ease-in-out':rotateTransition }"
                >
                    <img src="../assets/images/wheel.png" class="com-img" />
                    <!-- <div class="prize-list">
                    <div class="prize-item" v-for="(item,index) in prize_list" :key="index">
                        <div class="prize-type">{{item.name}}</div>
                    </div>
                    </div>--> //這裏寫是本身手寫獎品，現作成了一個圖片
                </div>
            </div>
        </div>
    </div>
    <div class="wheel-line">
        <img src="../assets/images/line1.png" class="line" />
        <div class="power">
            今日剩餘次數
            <span>{{100-detail.turntable_number}}次</span>
        </div>
    </div>`

1. js部分、

` data () {

return {
  detail:{
    "turntable_number": 10, //己玩轉盤次數,
    probability:['10%','20%','30%','5%','5%','10%','5%','15%'],//扇區指標
    "treasure_chest1": "0", //第一個寶箱 0無權開啓 1有權開啓 3己開啓
    "treasure_chest2": "1",
    "treasure_chest3": "0",
    "treasure_chest4": "1",
    "treasure_chest5": "1",
  },
      hasTimes: true,
        rotateAngle: 0, //將要旋轉的角度
        startRotatingDegree: 0, //初始旋轉角度
        rotateTransition: '',//控制過渡效果
        totalNum: 100,
        nowTimes: 0,
        restaraunts: ['神祕寶箱', '50', '神祕寶箱', '60', '神祕寶箱', '70', '神祕寶箱', '90'],
        prize: '',
        nowIndex: 0
 }`

1. 方法部分

`random (rate) {

let random = Math.floor(Math.random() * 100); //隨機數
        console.log(random, '隨機數')
        let myRandom = [];
        let randomList = [];
        let randomParent = [];
        for (let i = 0; i < 100; i++) {
            myRandom.push(parseInt([i]) + 1);
        }
        for (let i = 0; i < rate.length; i++) {
            let temp = [];
            let start = 0;
            let end = 0;
            randomList.push(parseInt(rate[i].split('%')[0]));
            for (let j = 0; j < randomList.length; j++) {
                start += randomList[j - 1] || 0
                end += randomList[j]
            }
            temp = myRandom.slice(start, end);
            randomParent.push(temp)
        }
        console.log(randomParent)
        for (let i = 0; i < randomParent.length; i++) {
            if (randomParent[i].includes(random)) {
                this.nowIndex = i + 1;
                return (i + 1)
            }
        }
    },
    // 轉動
    rotateFun () {
        if (!this.hasTimes) return;
        let during_time = 5; // 默認爲1s
        let resultNum = this.random(this.detail.probability) //當前值
        console.log(resultNum, 'resultNum')
        // let random = Math.floor(Math.random() * 8);
        let result_angle = 45; //最終會旋轉到下標的位置所須要的度數
        let rand_circle = 6; // 附加多轉幾圈，2-3
        this.hasTimes = false; // 旋轉結束前，不容許再次觸發
        // 轉動盤子
        this.prize = this.restaraunts[this.nowIndex];
        console.log(this.prize, 'this.prize')
        let rotate_angle = this.startRotatingDegree + rand_circle * 360 +
            result_angle * resultNum -
            this.startRotatingDegree % 360;
        this.startRotatingDegree = rotate_angle;
        this.rotateAngle = "rotate(" + rotate_angle + "deg)";
        console.log(rotate_angle, 'this.rotateAngle')
        var that = this;
        // 旋轉結束後，容許再次觸發
        setTimeout(function () {
            that.gameOver();
        }, during_time * 1000); // 延時，保證轉盤轉完
    },
    gameOver () {
        // if (this.nowTimes < 5) {
        this.hasTimes = true;
        this.detail.turntable_number = this.detail.turntable_number + 1;
        this.totalNum = 100 - this.detail.turntable_number;
        times.$emit("clickTime", this.detail.turntable_number)
        if (this.detail.turntable_number == 100) {
            this.hasTimes = false;
        }
        console.log(this.nowTimes, this.totalNum)
        
    }`