tigerdraw

tigerdraw

游戏

安装

npm install tigerdraw

使用

必须开启 "enableSkia": "true"

• json

{
    "usingComponents": {
        "game": "tigerdraw/index"
    }
}

• mini.project.json

{
  "node_modules_es6_whitelist": [
    "common-game"
  ]
}

• js

Page({
  data: {
    gameSource: JSON.stringify({
      // totalCols: 3,//一共有多少列
      // aniCircles: 3,//滚动圈数
      aniTime: 3,//第一列滚动时间 单位秒
      aniDelayTime: 1,//后面一列相对前一列延迟指定时间停止 单位秒
      prizes: [
        { src: "https://img.alicdn.com/imgextra/i2/555657275/O1CN01NWEDtM23c07Ad6g46_!!555657275.png", val: 1, col0default: true, type: "type", id: "id", name: "name" },
        // { src: "https://img.alicdn.com/imgextra/i3/555657275/O1CN012bSw9v23c06sh1wGx_!!555657275.png", type: "type", id: "id", name: "name" },
        { src: "https://img.alicdn.com/imgextra/i4/555657275/O1CN01lCGwwv23c07846aTc_!!555657275.png", val: 2, col1default: true, type: "type", id: "id", name: "name" },
        { src: "https://img.alicdn.com/imgextra/i1/555657275/O1CN015dG2Ov23c07845JUN_!!555657275.png", val: 3, col2default: true, type: "type", id: "id", name: "name" },
        { src: "https://img.alicdn.com/imgextra/i1/555657275/O1CN017PjvXP23c076DxH9I_!!555657275.png", val: 4, type: "type", id: "id", name: "name" },
        { src: "https://img.alicdn.com/imgextra/i3/555657275/O1CN01huJvb123c073c8ZJr_!!555657275.png", val: 5, type: "type", id: "id", name: "name" },
      ]
    }),
  },
  onLoad(query) {
  },
  onDrawFun() {
    // 抽奖 传值对应prizes数据中的val值， 传-1或匹配不到val则为不中奖
    this.gameComponent.onEvent("draw", -1);
  },

  onRef(game) {
    this.gameComponent = game;
    console.log("进入游戏")
  },
  onInitDone() {
    /* my.alert({
      content: "游戏初始化完成"
    }) */
  },
  onDrawDone() {
    // 转动结束
    console.log("转动结束")
  },
})

• xaml

  <view class="pageBox">
    <game gameSource="{{gameSource}}" onRef="onRef" onInitDone="onInitDone" onDrawDone="onDrawDone" />
    <view onTap="onDrawFun" style="position:absolute;left:0;bottom:100rpx;">抽奖</view>
  </view>

-acss

.pageBox{
  position: absolute;
  width: 480rpx;
  height: 390rpx;
  left: 0;
  top: 200rpx;
  background-color: #ccc;
}