demand

Recently I have been working on some gadgets and need to make a lottery function. The details are as follows:

  1. Provide a list of raffle times, a list of the raffle times of all people who have been raffled;
  2. The list of winning amount, sorting all the winning amount of all people, sorting the results;
  3. Users can log in every day to get a lucky draw opportunity, every time invite friends can also get a lucky draw opportunity;
  4. Awards are divided into eight categories, respectively, first prize, second prize, third prize, fourth prize, fifth prize, sixth prize, seventh prize and thank you for participating, each different award has a different probability of winning.

Technical solution

LuckDraw/ Lucky-Canvas is used as the solution for the lucky draw since the original project uses the VUE framework. The link is as follows: LuckDraw/ Lucky-Canvas: LuckDraw/ Lucky-Canvas 🎖🎖🎖 based on TS + Canvas package [big rotary table/nine grid] lottery plug-in, 🌈 a set of source adapter multi-terminal framework JS/JQ/Vue/React/Taro/UniApp/wechat small programs, etc., 🎨 prize/text/picture/color/button can be configured, support synchronous/asynchronous lottery, 🎯 probability front/back end controllable, 🚀 automatically adjust the definition of mobile terminal according to DPR (github.com)

configuration

Here, take the first prize as an example, where X and Y are nine grids representing a lottery. The coordinates of the upper left are X =0,y=0, and the coordinate values are expanded to the right and down.

prizes = [{
    "name": "First Prize"."index": 0."x": 0."y": 0."fonts": [{"text": "First Prize"."top": "70%"}]."imgs": [{"src": "./img/0.png"."width": "53%"."top": "8%"}}]]Copy the code

In the code

The main thing in HTML is to provide a div as a canvas

<div id="my-lucky"></div>
Copy the code

Js needs to initialize the canvas for the lottery

init() {
            let _this = this
            this.luckyGrid = new LuckyCanvas.LuckyGrid({
                el: '#my-lucky'.width: '580px'.height: '580px'}, {blocks: [{
                    padding: '15px'.background: '#ffc27a'.borderRadius: 28
                },
                    {
                        padding: '4px'.background: '#ff4a4c'.borderRadius: 23
                    },
                    {
                        padding: '4px'.background: '#ff625b'.borderRadius: 20},].buttons: [{
                    x: 1.y: 1.background: 'linear-gradient(270deg, #FFDCB8, #FDC689)'.shadow: '0 5 1 #e89b4f'.fonts: [{
                        text: `${_this.info.currentLotteryCount}Time `.fontColor: '#f44e4e'.top: '73%'.fontSize: '14px'.fontWeight: '800'},].imgs: [{
                        src: './img/button.png'.width: '65%'.top: '12%'}},]].activeStyle: {
                    background: 'linear-gradient(270deg, #FFDCB8, #FDC689)'.shadow: ' '
                },
                defaultConfig: {
                    gutter: 5,},defaultStyle: {
                    borderRadius: 15.fontColor: '#DF424B'.fontSize: '14px'.textAlign: 'center'.background: '#fff'.shadow: '0 5 1 #ebf1f4'
                },
                start() {
                    if(! _this.info.currentLotteryCount) {this.$alert('You're out of the lottery.'.'Title name', {
                            confirmButtonText: 'sure'.callback: action= > {
                                this.$message({
                                    type: 'info'.message: `action: ${action}`}); }});return
                    }
                    _this.luckyGrid.play()
                    axios.post("/lottery").then(function (result) {
                        if (result.data.code === 200) {
                            _this.lotteryRes = result.data.result
                            setTimeout(() = > {
                                _this.luckyGrid.stop(_this.lotteryRes.prize.id)
                            }, 500)}else{ _this.$message.error(result.data.message); }})},end(prize) {
                    _this.$alert('Congratulations on getting:${prize.name}`.'Title name', {
                        confirmButtonText: 'sure'.callback: action= > {
                            this.$message({
                                type: 'info'.message: `action: ${action}`}); }}); _this.info = _this.lotteryRes.account _this.luckyGrid.buttons[0].fonts[0].text = `${_this.info.currentLotteryCount}Time `
                }
            })


            _this.luckyGrid.prizes = prizes
        },
Copy the code

instructions

In the above code, div is the canvas canvas in HTML, and the start method in JS is triggered when the lottery button is clicked. Here, the post request is used to ask the backend lottery result, and then the lottery result obtained is displayed in the canvas. The end method is used to prompt the lottery information when the lottery is over.

rendering

Here’s the official Github tupan