《Cocos Creator遊戲實戰》抽獎轉盤功能實現

抽獎轉盤功能實現

爲什麼抽到的總是“謝謝參與”...（╯－＿－）╯╧╧

 

運行效果如下：

Cocos Creator版本：2.2.2

後臺回覆"抽獎轉盤"，獲取該項目完整文件：

 

創建節點

1. bg節點用作背景。

2. wheel節點用作轉盤背景，圖片如下：

3. wheelBtn是一個按鈕節點，背景圖片如下：

很明顯，wheelBtn不能作爲wheel的子節點，否則wheel節點旋轉的時候，wheelBtn也就會轉了，這不符合預期。

 

編寫代碼

新建一個Wheel.js腳本，並掛到wheel節點上。

首先我們來看下onLoad方法：

// Wheel.js
onLoad () {
    // 各個獎品的區域(角度值)
    this.prizeArea = {
        '特等獎': [0, 60],
        '一等獎': [60, 120],
        '三等獎': [120, 180],
        '鼓勵獎': [180, 240],
        '二等獎': [240, 300],
        '謝謝參與': [300, 360]
    }

    // 用於判斷是否正在抽獎
    this.isOn = false;
},

1. 因爲一共有6種抽獎結果，所以每個區域的角度值爲60。而爲了便於計算，筆者首先在屬性檢查器中將轉盤圖片旋轉了一定角度，讓指針的開始位置處在“特等獎”和“謝謝參與”之間，這樣可以讓角度範圍顯得更加清楚簡單。

注：this.prizeArea的各個值表示到達相應區域轉盤所需的旋轉角度範圍。比方說，要到達“特等獎”區域的話，旋轉度數需在0-60之間。

2. this.isOn用來判斷轉盤的旋轉動作是否結束，也就是說現在是不是正在抽獎。

 

在編寫旋轉動畫前，我們先來完成抽獎邏輯：

// Wheel.js
getResult() {
    // 先判斷應該抽中哪一個獎品，不同區域的概率不同
    let temp = Math.random()*100;
    let result = null;
    if (temp>=0 && temp<70) {
        result = '謝謝參與';
    }
    else if (temp>=70 && temp<90) {
        result = '鼓勵獎';
    }
    else if (temp>=90 && temp<96) {
        result = '三等獎';
    }
    else if (temp>=96 && temp<99) {
        result = '二等獎';
    }
    else if (temp>=99 && temp<99.999) {
        result = '一等獎';
    }
    else if (temp>=99.999 && temp<100) {
        result = '特等獎'
    }
    return result;
}

很簡單，就是獲取一個隨機數，然後根據隨機數的值來設置抽獎結果。每種抽獎結果的概率不同，“謝謝參與”最大，“特等獎”最小。

 

接下來編寫wheelBtn按鈕節點的事件函數，玩家點擊該按鈕後，獲取抽獎結果，並且轉盤開始執行旋轉動作：

// Wheel.js
wheelBtn () {
    // 如果正在抽獎，則跳過，否則之前的動作會被覆蓋掉
    if (!this.isOn) {
        this.isOn = true;
        this.node.angle = 28;

        // 先判斷應該抽中哪一個獎品，並獲取對應區域
        let result = this.getResult();
        console.log(result);
        let area = this.prizeArea[result];
        let addAngle = Math.round(Math.random()*60)+area[0];

        // 獲取隨機旋轉時間，旋轉圈數根據旋轉時間設定
        let rotateTime = Math.round(Math.random()*10)+3;
        let rotateRound = Math.round(Math.random()*rotateTime)+rotateTime;

        // 動作
        let rotate = cc.rotateBy(rotateTime, 360*rotateRound+addAngle).easing(cc.easeSineOut());
        let callback = cc.callFunc(()=>{
            this.isOn = false;
        });
        let sequence = cc.sequence(rotate, callback)
        this.node.runAction(sequence);
    }
},

1. 動作執行的話，需要將this.isOn設置爲True，否則如果玩家在動作沒結束之前再次按下按鈕的話，新動作會覆蓋未結束的舊動作(會亂套)。

2. this.node.angle=28表示每次執行旋轉動作前，都將轉盤圖片還原爲編輯器中設置的初始角度(照理來說應該設置爲30，但是由於圖片問題，設置後覺得指針指向不是很精準，所以爲了看上去精準點就設成了28)。

3. 調用getResult方法獲取抽獎結果，並獲取旋轉到相應區域所需的角度值。

4. 獲取隨機旋轉時間和旋轉圈數。

5. 實例化一個旋轉動作，旋轉的角度爲360*rotateRound+addAngle，即360*圈數+旋轉到指定區域所需角度值。360*圈數就是旋轉整數圈，這個相當於0圈，主要起作用的是addAngle。

6. 動作執行完畢後要記得將this.isOn設置爲false。

 

好，那本節教程就到這，希望大家以後都能抽中大獎~