九宫格抽奖 js jquery 小程序 vue 插件(原创)

所属分类:其他-游戏

 2086  26  查看评论 (0)
分享到微信朋友圈
X
九宫格抽奖 js  jquery  小程序  vue 插件(原创) ie兼容12

更新时间:2020-12-24 09:23:29

在 Js / JQuery 中使用

方式 1:通过 script 标签引入

为了避免 CDN 链接出现异常或波动,我非常建议你缓存到本地或服务器

最新版本:

 https://cdn.jsdelivr.net/npm/lucky-canvas/dist/lucky-canvas.umd.min.js

指定版本:

https://cdn.jsdelivr.net/npm/lucky-canvas@1.1.2/dist/lucky-canvas.umd.min.js
<div id="my-lucky"></div>
<script src="https://cdn.jsdelivr.net/npm/lucky-canvas/dist/lucky-canvas.umd.min.js"></script>
<script>
  // 大转盘抽奖
  let luckyWheel = new LuckyCanvas.LuckyWheel({
    el: '#my-lucky',
    width: '300px',
    height: '300px',
  }, {
    // ...你的配置
  })
  
  // 九宫格抽奖
  let luckyGrid = new LuckyCanvas.LuckyGrid({
    el: '#my-lucky',
    width: '300px',
    height: '300px',
  }, {
    // ...你的配置
  })
</script>

在 vue2.x / vue3.x 中使用

方式 1:通过 import 引入

首先安装插件

# npm 安装:
npm install vue-luck-draw
# yarn 安装:
yarn add vue-luck-draw

然后找到 main.js 引入插件并 use

// vue2.x
import LuckDraw from 'vue-luck-draw'
Vue.use(LuckDraw)
// vue3.x
import LuckDraw from 'vue-luck-draw/vue3'
createApp(App).use(LuckDraw).mount('#app')

最后在组件内使用 <LuckyWheel />大转盘组件 或 <LuckyGrid />九宫格组件

<template>
  <div>
    <!-- 大转盘抽奖 -->
    <LuckyWheel
      width="300px"
      height="300px"
      ...你的配置
    />
    <!-- 九宫格抽奖 -->
    <LuckyGrid
      width="300px"
      height="300px"
      ...你的配置
    />
  </div>
</template>

#方式 2:通过 script 标签引入

为了避免 CDN 链接出现异常或波动,我非常建议你缓存到本地或服务器

vue2.x:

最新版本: https://cdn.jsdelivr.net/npm/vue-luck-draw/dist/vue-luck-draw.umd.min.js
指定版本: https://cdn.jsdelivr.net/npm/vue-luck-draw@3.3.1/dist/vue-luck-draw.umd.min.js

vue3.x:

最新版本: https://cdn.jsdelivr.net/npm/vue-luck-draw/vue3/vue-luck-draw.umd.min.js
指定版本: https://cdn.jsdelivr.net/npm/vue-luck-draw@3.3.1/vue3/vue-luck-draw.umd.min.js
<div id="app">
  <!-- 大转盘抽奖 -->
  <lucky-wheel
    width="300px"
    height="300px"
    ...你的配置
  />
  <!-- 九宫格抽奖 -->
  <lucky-grid
    width="300px"
    height="300px"
    ...你的配置
  />
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-luck-draw/dist/vue-luck-draw.umd.min.js"></script>
<script>
  new Vue({
    el: '#app'
    data () {
      return {}
    }
  })
</script>

在 uni-app 中使用

当前 uni-app 中各端适配情况

  • H5端 编译正常

  • app端 待测试

  • 微信小程序 编译正常

  • 其他小程序 待测试

#方式 1:通过 import 引入

#1. 安装插件

你可以选择通过 HBuilderX 导入插件:

 https://ext.dcloud.net.cn/plugin?id=3499

也可以选择通过 npm / yarn 安装

# npm 安装:
npm install uni-luck-draw
# yarn 安装:
yarn add uni-luck-draw

#2. 引入并使用

<template>
  <view>
    <!-- 大转盘抽奖 -->
    <LuckyWheel
      width="600rpx"
      height="600rpx"
      ...你的配置
    />
    <!-- 九宫格抽奖 -->
    <LuckyGrid
      width="600rpx"
      height="600rpx"
      ...你的配置
    />
  </view>
</template>
<script>
  // npm 下载会默认到 node_modules 里面,直接引入包名即可
  import LuckyWheel from 'uni-luck-draw/lucky-wheel' // 大转盘
  import LuckyGrid from 'uni-luck-draw/lucky-grid' // 九宫格
  // 如果你是通过 HBuilderX 导入插件,那你需要指定一下路径
  // import LuckyWheel from '@/components/uni-luck-draw/lucky-wheel' // 大转盘
  // import LuckyGrid from '@/components/uni-luck-draw/lucky-grid' // 九宫格
  export default {
    // 注册组件
    components: { LuckyWheel, LuckyGrid },
  }
</script>

#3. 我这里提供了一个最基本的 demo 供你用于尝试

<template>
  <view>
    <LuckyWheel
      ref="luckyWheel"
      width="600rpx"
      height="600rpx"
      :blocks="blocks"
      :prizes="prizes"
      :buttons="buttons"
      :defaultStyle="defaultStyle"
      @start="startCallBack"
      @end="endCallBack"
    />
  </view>
</template>
<script>
  import LuckyWheel from 'uni-luck-draw/lucky-wheel'
  export default {
    components: { LuckyWheel },
    data () {
      return {
        blocks: [
          { padding: '13px', background: '#d64737' }
        ],
        prizes: [
          { title: '1元红包', background: '#f9e3bb', fonts: [{ text: '1元红包', top: '18%' }] },
          { title: '100元红包', background: '#f8d384', fonts: [{ text: '100元红包', top: '18%' }] },
          { title: '0.5元红包', background: '#f9e3bb', fonts: [{ text: '0.5元红包', top: '18%' }] },
          { title: '2元红包', background: '#f8d384', fonts: [{ text: '2元红包', top: '18%' }] },
          { title: '10元红包', background: '#f9e3bb', fonts: [{ text: '10元红包', top: '18%' }] },
          { title: '50元红包', background: '#f8d384', fonts: [{ text: '50元红包', top: '18%' }] },
        ],
        buttons: [
          { radius: '50px', background: '#d64737' },
          { radius: '45px', background: '#fff' },
          { radius: '41px', background: '#f6c66f', pointer: true },
          {
            radius: '35px', background: '#ffdea0',
            fonts: [{ text: '开始\n抽奖', fontSize: '18px', top: -18 }]
          }
        ],
        defaultStyle: {
          fontColor: '#d64737',
          fontSize: '14px'
        },
      }
    },
    methods: {
      // 点击抽奖按钮触发回调
      startCallBack () {
        // 先开始旋转
        this.$refs.luckyWheel.play()
        // 使用定时器来模拟请求接口
        setTimeout(() => {
          // 3s后得到中奖索引
          let index = Math.random() * 6 >> 0
          // 缓慢停止游戏
          this.$refs.luckyWheel.stop(index)
        }, 3000)
      },
      // 抽奖结束触发回调
      endCallBack (prize) {
        // 奖品详情
        console.log(prize)
      }
    }
  }
</script>
相关插件-游戏

H5小游戏疯狂猜图

直接下载后代开代码内部有详细说明
  游戏
 22542  274

jquery h5 超级玛丽

一款用jquery和html5写的街机版超级玛丽,很好玩哟
  游戏
 36343  412

Never Give Up永不放弃小游戏

html5 Never Give Up永不放弃小游戏,代码有注释可玩性非常高。
  游戏
 29275  316

好玩的JS原生打砖块游戏。

好玩的JS原生打砖块游戏,有待拓展。
  游戏
 26533  269

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复