gm-game-llk

连连看

安装

npm install gm-game-llk

使用

• json

{
    "usingComponents": {
        "game-llk": "gm-game-llk/llk"
    }
}

• js

Page({
  data: {
    imgSource: [
      { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01gLtvI81FJvZqlbM9C_!!1080040467.png", width: 90, height: 90, active: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01W7iq6G1FJvZwx5XjW_!!1080040467.png", probability: 1 },
      { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01aBUXig1FJva2PZidU_!!1080040467.png", width: 90, height: 90, active: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01EOYkXt1FJva2PZeU5_!!1080040467.png", probability: 1 },
      { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01WD1uDo1FJvZzboW3h_!!1080040467.png", width: 90, height: 90, active: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01VG9qv91FJvZvSKfmE_!!1080040467.png", probability: 1 },
      { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01yYhvDM1FJva4Bav4I_!!1080040467.png", width: 90, height: 90, active: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN017S1l371FJvZzbpvLl_!!1080040467.png", probability: 1 },
      { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01XiEVy51FJvZyaNVFY_!!1080040467.png", width: 90, height: 90, active: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01hXpWnt1FJva33MJ5U_!!1080040467.png", probability: 1 },
    ],
    timeObj: {
      /* 容器位置 */
      left: 0,
      top: -54,
      width: 74,//总宽度
      height: 27,
      totalTime: 30,//倒计时时间
      img: {
        arr: [
          "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01GiVJFq1FJva0ojk0l_!!1080040467.png",
          "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01fgY9Hl1FJva5WWo6v_!!1080040467.png",
          "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01Uj8gqT1FJvZzukPht_!!1080040467.png",
          "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01jAZw2G1FJvZxmwXTL_!!1080040467.png",
          "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01EyITGj1FJva3knfJe_!!1080040467.png",
          "https://img.alicdn.com/imgextra/i2/1080040467/O1CN012gc5k21FJva20z9Xo_!!1080040467.png",
          "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01PMVAV61FJvZyHaz2t_!!1080040467.png",
          "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01hf3iKp1FJva0FrSpE_!!1080040467.png",
          "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01Ays2W61FJvZyHcj7b_!!1080040467.png",
          "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01v0v42s1FJva4ONIOd_!!1080040467.png",
        ],
        width: 16,//倒计时时间一个数字的 宽（显示按照此尺寸显示，01：23）坐标：0：(0,0) 1:(width,0) 2:(timeObj.width-width*2,0) 3:(timeObj.width-width,0)
        height: 27//倒计时时间一个数字的 高
      }
    },
    lines: [
      { name: "hengxian", detail: "横线", src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN010faKhl1FJva28RRfH_!!1080040467.png", width: 90, height: 90 },
      { name: "shuxian", detail: "竖线", src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01Ffpdrm1FJva1YKAfQ_!!1080040467.png", width: 90, height: 90 },
      { name: "to_up", detail: "向上出去", src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01VOTAa21FJvZznEhKO_!!1080040467.png", width: 90, height: 90 },
      { name: "to_down", detail: "向下出去", src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN012nFKag1FJva4k0FHu_!!1080040467.png", width: 90, height: 90 },
      { name: "to_left", detail: "向左出去", src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01cDHQVb1FJvZrdmQPz_!!1080040467.png", width: 90, height: 90 },
      { name: "to_right", detail: "向右出去", src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN018TF5g21FJvZwKNDEj_!!1080040467.png", width: 90, height: 90 },
      { name: "left_top", detail: "左上角", src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01E9xwku1FJva3vW28B_!!1080040467.png", width: 90, height: 90 },
      { name: "left_bottom", detail: "左下角", src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01H02IPh1FJva28Tag3_!!1080040467.png", width: 90, height: 90 },
      { name: "right_top", detail: "右上角", src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01JdopsU1FJva3HwfTr_!!1080040467.png", width: 90, height: 90 },
      { name: "right_bottom", detail: "右下角", src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01EqavCc1FJvZxpGXng_!!1080040467.png", width: 90, height: 90 },
    ],
  },
  onLoad() {
  },
  // 组件主动公开方法----------
  startFun() {
    // 开始游戏
    this.llkComponent.startGame();
  },
  overFun() {
    // 结束游戏
    this.llkComponent.stopGame();
    console.log("游戏结束")
  },
  resetProFun() {
    // 重新渲染游戏，不清空时间，并继续游戏
    this.llkComponent.reRenderGame(0, { saveTime: true });
  },
  beginFun() {
    // 重新渲染游戏
    this.llkComponent.reRenderGame();
  },
  reRenderStartFun(){
    // 重新渲染并开始游戏
    this.llkComponent.reRenderGame(1);
  },
  resetFun() {
    // 重置游戏
    this.llkComponent.resetGame();
    console.log("重置游戏")
  },
  pauseFun(){
    // 暂停游戏
    this.llkComponent.pauseGame();
    console.log("暂停游戏")
  },
  // 组件回调方法------------------
  onRender() {
    // 游戏渲染回调
    console.log("渲染成功")
  },
  onUpdate(obj) {
    // 游戏消除回调
    console.log(obj)
  },
  onOver() {
    console.log("游戏结束回调")
  },
});

• xaml

<!-- 
    imgSource:图片列表
    timeObj:倒计时对象
    row:行数
    col:列数
    paddingW:图片左右内边距（0：撑满）
    paddingH:图片上下内边距（0：撑满）
    fadeTime:消除时，线条停留时间
    lines: 连线数组 需提供 横线、竖线、左上角、右上角、左下角、右下角、上下左右端头 {src:"",name:"hengxian",width:90,height:90} 宽高和图片尺寸保持一致
  -->
<game-llk imgSource="{{imgSource}}" timeObj="{{timeObj}}" row="{{8}}" col="{{6}}" paddingW="{{3}}" paddingH="{{3}}" fadeTime="{{500}}" lines="{{lines}}" onRender="onRender" onUpdate="onUpdate" onOver="onOver"></game-llk>