game-diff

点击消除游戏

安装

npm install game-diff

使用

• json

{
    "usingComponents": {
        "game-diff": "game-diff/diff"
    }
}

• js

Page({
  data: {
    gameSource: {
      padding: {
        left: 1,
        right: 1,
        top: 1,
        bottom: 1
      },
      successIsHide: !false,//匹配成功后，是否隐藏 false:不隐藏 true:隐藏
      rotateTime: 0.5,
      items: [
        { "url": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01SwwoD91FJvh1KjA5P_!!1080040467.png", name: "pro1", "level": [1], "width": "150", "height": "260", "def": { "url": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN015sD3cP1FJvgzh25q3_!!1080040467.png" } },
        { "url": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01vpjzPS1FJvh1KkMvf_!!1080040467.png", name: "pro2", "level": [1], "width": "150", "height": "260", "def": { "url": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN015sD3cP1FJvgzh25q3_!!1080040467.png" } },
        { "url": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01uASIb91FJvh2HlT0p_!!1080040467.png", name: "pro3", "level": [1], "width": "150", "height": "260", "def": { "url": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN015sD3cP1FJvgzh25q3_!!1080040467.png" } },
        { "url": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01Ir6ZlK1FJvh5w2HhO_!!1080040467.png", name: "pro4", "level": [1], "width": "150", "height": "260", "def": { "url": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN015sD3cP1FJvgzh25q3_!!1080040467.png" } },
      ],
    }
  },
  onLoad(query) {
    console.log('page onLoad', query)
  },
  onShow() { },
  startFun() {
    this.gameComponent.start();
  },
  stopFun() {
    this.gameComponent.stop();
  },
  openAllFun() {
    this.gameComponent.openAll();
  },
  closeAllFun() {
    this.gameComponent.closeAll();
  },

  onRef(ref) {
    this.gameComponent = ref;
  },
  onInitDone() {
    // 组件初始化完成
    this.initGame();
  },
  initGame() {
    // 渲染游戏
    // row:行,col:列, level:有值则对应items中的level
    this.gameComponent.initGame(4, 4, 1, () => {
      // 游戏初始化完成 调用游戏开始在这个位置之后调用=================
    });
  },
  onUpdate(obj) {
    /* obj: {
      type: "success",//"error"
      hasNum: 0,//还剩多少个没消除，如果为0，则全部消除完毕
      items: [],//本次点击的两个元素 对应的是items数据
    } */
    if (obj.hasNum == 0) {
      // 消除完毕
      this.initGame();
    }
    console.log(obj);
  }
})

• xaml

  <view class="pageBox">
    <game-diff gameSource="{{gameSource}}" onRef="onRef" onInitDone="onInitDone" onUpdate="onUpdate" />
  </view>
  <view onTap="startFun">开始游戏</view>
  <view onTap="stopFun">结束游戏</view>

• acss

.pageBox {
  position: absolute;
  left: 75rpx;
  top: 20vh;
  width: 600rpx;
  height: 1040rpx;
  background-color: #ccc;
}
/* 选中之后样式 */
.doneItem .bgItem::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: url("https://img.alicdn.com/imgextra/i2/1080040467/O1CN01G1StlQ1FJvfBsvXU9_!!1080040467.png") no-repeat center;
  background-size: 56rpx auto;
  z-index: 10;
}