2. 程式人生 > 實用技巧 >利用canvas實現轉盤抽獎

利用canvas實現轉盤抽獎

阿新 • • 發佈：2020-11-20

最近工作中重構了抽獎轉盤，給大家提供一個開發轉盤抽獎的思路

需求

1、轉盤根據獎品數量不同而有變化

2、canvas

目錄結構

由於業務需要所以開發了兩個版本抽獎，dom和canvas，不過editor.js部分只能替換圖片，沒有功能邏輯。

需要注意的是此目錄隱藏了一個動態資料類(dataStore),因為整合在專案裡了，所以沒有體現。

Spirts

精靈類生成例項，會包括基礎屬性:width、height、x、y和方法:setOpacity、drawCircular、setRotate、draw

下面是幾個重要的精靈構造器：背景、轉盤背景和每一個獎品

/*
 * 精靈核心 基類
 * */
class Spirt {
    const
 
ructor({}) {}
    // 精靈透明度調節
    setOpacity(opy, callback) {}
    // 畫圓形圖片
    drawCircular(fn) {}
    // 精靈旋轉調節
    setRotate() {}
    // 畫精靈
    draw() {}
}
// 背景
class Bg extends Spirt {
    constructor({ ...args }) {
        super({ ...args });
        if (args.height == '100%') {
            this.height = this.canvas.height;
        }
    }
}
// 轉盤背景
class Turn extends Spirt {
    constructor({ ...args }) {
        super({ ...args });
    }
    draw() {
        this.drawCircular(() => {
            super.draw();
        });
    }
}
// 每一個獎品
class Item extends Spirt {
    constructor({ ...args }, rid) {
        super({ ...args });
        this.rid = rid;
    }
    draw(angle, x, y) {
        this.setRotate(angle, () => super.draw(), x, y);
    }
}

Config

基礎資料類，包括基礎資料：轉盤分塊、角度、半徑、每一塊對應獎品、旋轉總時長、旋轉速度等

主要說一下轉盤分塊：如果符合規律，就用函式代替，如果不符合規律就用對映

let layout = {
    1: [1, 10, 1, 10, 1, 10],
    2: [1, 2, 10, 1, 2, 10],
    3: [1, 10, 2, 10, 3, 10],
    4: [2, 10, 3, 10, 4, 10, 1, 10],
    5: [2, 3, 4, 10, 5, 10, 1, 10],
    6: [2, 3, 4, 10, 5, 6, 1, 10],
    7: [3, 4, 10, 5, 6, 7, 10, 1, 2, 10],
    8: [3, 4, 10, 5, 6, 7, 8, 10, 1, 2]
};

下面為部分程式碼

class Config {
    constructor(prize = new Array(3), resImg) {
        this.awards_len = prize.length >= 7 ? 10 : prize.length >= 4 ? 8 : 6;
        this.awards_angle = 360 / this.awards_len;

        this.awards_r = 320;
        this.awards_cir = 2 * Math.PI * this.awards_r;

        let nums = {
            6: 2.5,
            8: 2,
            10: 2
        };

        this.awards_item_margin = 40;
        this.award_item_size =
            this.awards_cir / this.awards_len / nums[this.awards_len];

        this.duration = 2000;

        // 獎品詳情
        this.awards = getAwards(resImg, prize.length);
    }
}
/**
 * 獲取獎品列表
 * @param {*} num
 */
function getAwards(resImg, num) {
    let arr = layout[num];
    return arr.map(rid => {
        let res = resImg[mapAwards[rid]];
        return { rid, res, className: mapAwards[rid] };
    });
}

Res

資源類主要做一些圖片初始化的操作

// 獲取遊戲資源
class Res extends Resource {
    constructor(dataStore) {
        super({ dataStore });
        let { gamejson } = dataStore;

        this.res = {
            ...gameJson.staticSpirts.BG
        };

        this.dataStore = dataStore;
    }
    // 編輯頁面改變頁面圖片能力。
    setImg(data) {
        this.res[data.num].imgUrl = data.imgUrl;
        if (['BG', 'TITLE', 'TURNTABLE_BG', 'PLAYBTN'].includes(data.num)) {
            $(`.turnTableNew_${data.num}`).css(
                'background-image',
                `url('${HOST.FILE + data.imgUrl}')`
            );
        } else {
            $(`.turnTableNew_${data.num}`).attr(
                'src',
                `${HOST.FILE + data.imgUrl}`
            );
        }
        return {
            staticSpirts: this.res
        };
    }
}

資源搜尋網站大全 http://www.szhdn.com 廣州VI設計公司https://www.houdianzi.com

Director

導演類，主要操作的是轉盤動畫的邏輯
主要邏輯是：
1、addCLick： canvas新增點選事件
2、drawStatic：畫靜態元素
3、drawZhuanPan：這個為單獨canvas，group內部包括畫轉盤，獎品
4、drawPlayBtn: 畫按鈕
5、當點選抽獎按鈕執行updatedRotate函式讓單獨轉盤canvas旋轉即可
6、當旋轉角度和獲取獎品角度一致時停止

class turnTable extends Director {
    constructor(dataStore) {
        let { gameManager } = dataStore;
        super(gameManager);

        // 從倉庫中獲取基礎資料，canvas和config總配置
        this.dataStore = dataStore;
        this.canvas = dataStore.canvas;
        this.config = dataStore.$gameConfig;
        
        // 當前抽獎的一些基礎資料
        this.angle = 0;
        this.isAnimate = true;
        this.lastTime = 0;
        this.num = 0;

        this.addCLick();
    }

    // 抽獎結束，需要初始化抽獎
    initGame() {
        this.state = this.START;
        this.angle = 0;
        this.num = 0;
        this.prizeId = null;
        this.isAnimate = true;
        this.turnAudio.pause();
        this.drawAllElements(this.res, this.set);
    }
    /**
     * 畫所有元素
     * @param {*} store
     * @param {*} res
     */
    drawAllElements(res, set) {
        this.res = res;
        this.set = set;
        this.drawStatic(res);
        this.drawZhuanPan(this.angle);
        this.drawPlayBtn(this.canvas, res);
    }
    /**
     * 畫靜態元素
     */
    drawStatic(res) {
        ['BG', 'TITLE'].forEach(item => {
            let str = item.toLowerCase();
            str = str.replace(str[0], str[0].toUpperCase());
            let ele = new Spirts[str]({
                canvas: this.canvas,
                ...res[item]
            });
            ele.draw();
        });
    }
    // 畫轉盤
    drawZhuanPan(angle) {
        this.group = new Spirts['Group']({
            canvas: this.canvas,
            ...this.res['TURNTABLE_BG']
        });
        this.items = this.drawDynamic(this.group.group_canvas, this.res);
        this.group.draw(
            angle,
            +this.res['TURNTABLE_BG'].x + +this.res['TURNTABLE_BG'].width / 2,
            +this.res['TURNTABLE_BG'].y + +this.res['TURNTABLE_BG'].height / 2
        );
    }
    // 畫動態元素
    drawDynamic(canvas, res) {
        let set = this.set;
        let items = [];
        // 轉盤背景1，裝飾物
        let turnBg = new Spirts['Turn']({
            canvas,
            img: res['TURNTABLE_BG'].img,
            width: res['TURNTABLE_BG'].width,
            height: res['TURNTABLE_BG'].height,
            x: 0,
            y: 0
        });
        turnBg.draw();
        // 轉盤背景2，盤面
        let turnPan = new Spirts['Turn']({
            canvas,
            img: res['TURNTABLE_PAN'].img,
            width: res['TURNTABLE_PAN'].width,
            height: res['TURNTABLE_PAN'].height,
            x: (res['TURNTABLE_BG'].width - res['TURNTABLE_PAN'].width) / 2,
            y: (res['TURNTABLE_BG'].height - res['TURNTABLE_PAN'].height) / 2
        });
        turnPan.draw();

        for (let i = 0; i < set.awards_len; i++) {
            // 每一個獎品
            let item = new Spirts['Item'](
                {
                    canvas,
                    img: set.awards[i].res.img,
                    width: set.award_item_size,
                    height: set.award_item_size,
                    x: turnBg.width / 2 - set.award_item_size / 2,
                    y:
                        (turnBg.height - turnPan.height) / 2 +
                        set.awards_item_margin
                },
                set.awards[i].rid
            );
            item.draw(
                set.awards_angle / 2 + set.awards_angle * i,
                turnBg.width / 2,
                turnBg.height / 2
            );
            // 畫線
            let line = new Spirts['Item']({
                canvas,
                img: res['LINE'].img,
                width: res['LINE'].width,
                height: res['LINE'].height,
                x: turnBg.width / 2 - res['LINE'].width / 2,
                y: (turnBg.height - turnPan.height) / 2
            });
            line.draw(
                set.awards_angle * i,
                turnBg.width / 2,
                turnBg.height / 2
            );
            // 放到items陣列內，後期轉盤停止校驗用
            items.push(item);
        }
        return items;
    }
    // 畫按鈕
    drawPlayBtn(canvas, res) {
        let playBtn = new Spirts['PlayBtn']({
            canvas,
            ...res['PLAYBTN']
        });
        playBtn.draw();
        this.playBtn = playBtn;
    }
    // 點選事件
    addCLick() {
        let initX,
            isClickState,
            cScale = this.config['cScale'] || 1;
        this.canvas.addEventListener(tapstart, event => {
            initX = event.targetTouches
                ? event.targetTouches[0].clientX
                : event.offsetX / cScale;
            let y = event.targetTouches
                ? event.targetTouches[0].clientY
                : event.offsetY / cScale;
            isClickState = isCheck.call(this.playBtn, initX, y);
            // 點選回撥
            if (isClickState && this.isAnimate) {
                 /**
                 * 按鈕不可點選
                 * 初始化總時長
                 * 初始化速度
                 * 初始化當前時間
                 */
                this.isAnimate = false;
                this.set.is_animate = true;
                this.set.jumping_total_time =
                    Math.random() * 1000 + this.set.duration;
                this.set.speed = (this.set.jumping_total_time / 2000) * 10;
                this.lastTime = new Date().getTime();
                this.run();
                this.getPrize()
                    .then(res => {
                        if (!res) {
                            this.prizeId = 10;
                            return;
                        }
                        this.prizeId = +res.prizeLevel + 1;
                    })
                    .catch(_ => {
                        this.prizeId = 10;
                        this.initGame();
                        this.state = this.END;
                    });
            }
        });
    }
    updatedRotate() {
        let curTime = new Date().getTime(),
            set = this.set,
            speed = 1;
        /**
         * 轉盤停止，需要滿足一下條件
         * 1.大於總時間
         * 2.有獎品id
         * 3.速度降為1
         * 4.轉盤角度對應獎品id位置
         * 角度做了容錯處理，當前角度範圍中心位置，偏移量為5
         * 公式：通過旋轉角度計算當前獎品index
         * 通過items獎品列表計算當前獎品rid
         * rid和prizeId對比，如果結束抽獎
         */
        if (
            curTime - this.lastTime >= set.jumping_total_time &&
            this.prizeId &&
            speed == 1
        ) {
            let resultAngle = 360 - (this.angle % 360);
            let index = (resultAngle / set.awards_angle) >> 0;
            let centerAngle = set.awards_angle * (index + 0.5);
            if (
                this.items[index].rid == this.prizeId &&
                (resultAngle > centerAngle - 5) &
                    (resultAngle < centerAngle + 5)
            ) {
                this.comAudio.play();
                this.state = this.PAUSE;
            }
        }
        this.num++;
        speed = Math.max(
            set.speed -
                (18 * this.num * (set.speed - 1)) / set.jumping_total_time,
            1
        );
        this.angle += speed;
        this.drawAllElements(this.res, this.set);
    }

    // 渲染畫布
    render() {
        switch (this.state) {
            case this.START:
                this.updatedRotate();
                break;
            case this.ERROR:
                break;
            case this.PAUSE:
                this.state = this.END;
                setTimeout(() => {
                    this.showResult();
                    this.initGame();
                }, 1000);
                break;
            case this.END:
                // 開啟指定頁面
                break;
        }
    }
}

相關推薦

利用canvas實現轉盤抽獎

最近工作中重構了抽獎轉盤，給大家提供一個開發轉盤抽獎的思路 需求 1、轉盤根據獎品數量不同而有變化

Python使用Tkinter實現轉盤抽獎器的步驟詳解

我使用 Python 中的 Tkinter 模組實現了一個簡單的滾動抽獎器，接下來繼續寫一個簡單的轉盤抽獎器。

javascript利用canvas實現滑鼠拖拽功能

利用canvas實現滑鼠拖拽功能，當在元素上按下滑鼠並移動時，元素跟著滑鼠移動。

js+canvas實現轉盤效果（兩個版本）

本文例項為大家分享了js+canvas實現轉盤效果的具體程式碼，供大家參考，具體內容如下

微信小程式實現轉盤抽獎

本文例項為大家分享了微信小程式實現轉盤抽獎的具體程式碼，供大家參考，具體內容如下

利用canvas實現環形進度條

前提：有時候在專案中會有用到進度條的情況，使用css3也可以實現，但是對於效能不好的裝置，或者網路不好的情況下，卡頓現象非常明顯，避免出現不流暢的尷尬情況，所以記錄一下，使用canvas來實現的方法。

jq+css實現轉盤抽獎

轉盤抽獎是我們常見到的一些客戶端活動模版，其核心使用的方法是rotate進行元素旋轉，然後後臺控制當前抽中的獎項，再有前臺控制停留的位置；

vue簡單實現轉盤抽獎

本文例項為大家分享了vue簡單實現轉盤抽獎的具體程式碼，供大家參考，具體內容如下

利用binarySearch實現抽獎計算邏輯

前言 我們平時抽獎總感覺想抽到最高的獎那麼難，哈哈當然不會那麼容易啦，正巧寫了個抽獎的功能，趁著有時間把抽獎的功能實現整理一下，我們要抽獎首先要定義一個獎品的實體類，這個實體類中包含獎品的基本資訊，比如

利用js canvas實現五子棋遊戲

本文例項為大家分享了canvas實現五子棋遊戲的具體程式碼，供大家參考，具體內容如下

vue元件實現移動端九宮格轉盤抽獎

本文例項為大家分享了vue元件實現移動端九宮格轉盤抽獎的具體程式碼，供大家參考，具體內容如下

Java 利用binarySearch實現抽獎計算邏輯

前言 我們平時抽獎總感覺想抽到最高的獎那麼難，正巧寫了個抽獎的功能，趁著有時間把抽獎的功能實現整理一下，我們要抽獎首先要定義一個獎品的實體類，這個實體類中包含獎品的基本資訊，比如獎品名稱，獎品數量，抽

VUE實現大轉盤抽獎

UI 老規矩，先看下靜態UI，以便於有個影象概念 初始參考各值參考圖 方案分析-引數配置

用CSS實現一個抽獎轉盤

原文：https://www.cnblogs.com/wenruo/p/9732704.html 先上效果 基本是用CSS實現的，沒有用圖片，加一丟丟JS。不過沒有考慮太多相容性。

人臉識別技術概要 (利用 Dlib 實現人臉識別)

簡介 人臉識別技術是一種生物識別技術，可以用來確認使用者身份。人臉識別技術相比於傳統的身份識別技術有很大的優勢，主要體現在方便性上。傳統的身份認證方式諸如：密碼、PIN碼、射頻卡片、口令、指紋等，需要使用

利用Java實現複製Excel工作表功能

本文歸納了關於Java如何複製Excel工作表的方法，按不同複製需求，可分為： 1. 複製工作表

Spring Boot教程之利用ActiveMQ實現延遲訊息

一、安裝activeMQ Linux環境ActiveMQ部署方法：https://www.jb51.net/article/162320.htm 安裝步驟參照上面這篇文章，本文不做介紹

C#利用棧實現加減乘除運算

還是有一些小問題....懶得改了，但大體思路還是清晰的，首先定義一個運算子棧，一個數棧。

java利用oss實現下載功能

本文例項為大家分享瞭如何利用oss實現下載功能的具體程式碼，供大家參考，具體內容如下

Redis高階玩法之利用SortedSet實現多維度排序的方法

說明：本次實踐基於Redis版本3.2.11。 關於SortedSet 首先，我們都知道Redis的SortedSet是可以根據score進行排序的，以手機應用商店的熱門榜單排序為例，根據下載量倒序排列，其簡單用法如下：