game-ysld

游戏

安装

npm install game-ysld

使用

• json

{
    "usingComponents": {
        "game": "game-ysld/index"
    }
}

• mini.project.json

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

• js

Page({
  data: {
    gameSource: {
      leftOps: { width: 275, height: 247, left: 30, top: 384 },
      rightOps: { width: 275, height: 247, left: 440, top: 384 },
      moveTime: 1,//瓶子下落时间
      changeNum: 5,//切换次数
      aniTime: 0.3,
      box: { src: "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01OaWtP31EUdMD8nsWU_!!2185320355.png", width: 317, height: 301, left: 216, top: 406 },
      item: { src: "https://img.alicdn.com/imgextra/i1/2185320355/O1CN01cJLGsI1EUdMGBTJD5_!!2185320355.png", width: 99, height: 242, left: 325, top: 0 }
    }
  },
  onLoad(query) {
    console.log('page onLoad', query)
  },
  onShow() { },
  // 开始游戏
  startFun() {
    this.gameComponent.start();
  },
  resetFun() {
    this.gameComponent.reset();
  },
  // 结束游戏
  stopFun() {
    this.gameComponent.stop();
  },

  onInitDone(ref) {
    // 组件初始化完成
    this.gameComponent = ref;
  },
  onUpdate(obj) {
    /* obj: {
      index: 点击下标
    } */
    console.log(obj);
    this.stopFun();
  }
})

• xaml

  <view class="pageBox">
    <game gameSource="{{gameSource}}" onRef="onRef" onInitDone="onInitDone" onUpdate="onUpdate" />
  </view>
  <view style="margin-top: 150rpx;">
    <view onTap="startFun">开始游戏</view>
    <view onTap="stopFun">结束游戏</view>
    <view onTap="resetFun">重置游戏</view>
  </view>

• acss

.pageBox {
  position: absolute;
  left: 0rpx;
  top: 20vh;
  width: 750px;
  height: 708rpx;
  /* background-color: #ccc; */
}