gm-game-hrd

华容道小游戏

安装

npm install gm-game-hrd

使用

• json

{
    "usingComponents": {
        "hrd-game": "/pages/components/hrdGame/hrdGame"
    }
}

• js

Page({
  data: {
    // 横向图片
    acrossFontImg: {
      // 横向占两格图片
      font2: ["https://img.alicdn.com/imgextra/i3/1080040467/O1CN01UJnBIo1FJvZX7y8TN_!!1080040467.png", "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01zUNtBd1FJvZXuZvrm_!!1080040467.png", "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01R17ir61FJvZRDwOLl_!!1080040467.png", "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01nQTtfe1FJvZZK4nnP_!!1080040467.png", "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01bZh45K1FJvZWogw8X_!!1080040467.png"],
      // 横向占三格
      font3: ["https://img.alicdn.com/imgextra/i4/1080040467/O1CN012xQdti1FJvZUCjxwG_!!1080040467.png"]
    },
    // 纵向图片
    verticalFontImg: {
      // 纵向占两格图片
      font2: ["https://img.alicdn.com/imgextra/i3/1080040467/O1CN01HKwHJ71FJvZWGT9SY_!!1080040467.png"],
      // 纵向占三格
      font3: ["https://img.alicdn.com/imgextra/i1/1080040467/O1CN01OFaKqX1FJvZXuXWCT_!!1080040467.png"]
    },
    //玩家滑块图片
    playerImg: {
      font2: ["https://img.alicdn.com/imgextra/i2/1080040467/O1CN01p4nlCQ1FJvZUcvjo0_!!1080040467.png"],
      font3: ["https://img.alicdn.com/imgextra/i2/1080040467/O1CN01Jp66mQ1FJvZLbxEdR_!!1080040467.png"],
    },
    // 等级
    grade: 1
  },
  onLoad() {
  },
  startGame() {
    this.hrdGameComponent.start();
  },
  stopGame() {
    // 手动停止游戏
    this.hrdGameComponent.stop();
  },
  updateGame(e) {
    let { currentTarget: { dataset: { grade } } } = e;
    console.log("=====grade:", grade)
    // 更新游戏
    this.setData({
      grade: grade || 1
    }, () => {
      this.hrdGameComponent.updateMap();
    })
  },
  // 下面为组件回调方法
  onChange(data) {
    // my.hideToast()
    // my.showToast({ content: data.num + "-" + data.bestNum })
  },
  onStop(data) {
    console.log("游戏结束")
    this.stopGame();
    my.showToast({ content: `使用步数：${data.num} 本关卡最佳步数：${data.bestNum}` })
  },
  onRender() {
    console.log("游戏渲染完成")
  },
  onStart() {
    console.log("游戏开始了")
  },
});

• xaml

<hrd-game onChange="onChange" onStop="onStop" onRender="onRender" onStart="onStart" 
              grade="{{grade}}"
              player-out="{{!true}}"//成功后玩家滑块是否消失，true：消失 false：不消失
              map-index="{{0}}"//华容道地图，-1：随机 传数字则为现有地图下标
              acrossFontImg="{{acrossFontImg}}"
              verticalFontImg="{{verticalFontImg}}"
              playerImg="{{playerImg}}"
    \></hrd-game>