game-babimap

游戏

安装

npm install game-babimap

使用

必须开启 "enableSkia": "true"

• json

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

• mini.project.json

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

• js

Page({
  data: {
    gameSource: {
      renderType: "webgl",
      centerSpeed: "1000",//移动到中心的的速度
      clickRang: 10,
      padding: { top: 320, bottom: 220 },
      maps: [
        // isColor: true已解锁 false：未解锁 , isHecheng: 是否合成 true：已合成，隐藏activeBtn按钮 false:未合成，显示activeBtn按钮
        { "src": "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01orgtge1EUdNlpLG9l_!!2185320355.png", "mask": { "src": "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01XQvdHW1EUdNtQ7D8Y_!!2185320355.png", "offset": { x: 0, y: 0 } }, "name": "map1.png", "width": "3083", "height": "938", x: 0, y: 1491, center: { x: -1714, y: -1795 }, isColor: true, isHecheng: false },
        { "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01Uq4lWS1EUdNhMLOsw_!!2185320355.png", "mask": { "src": "https://img.alicdn.com/imgextra/i2/2185320355/O1CN01EpvGDh1EUdNtQ6bjv_!!2185320355.png", "offset": { x: 0, y: 0 } }, "name": "map2.png", "width": "1300", "height": "1286", x: 1783, y: 958, center: { x: -2642, y: -1477 }, isColor: !true, isHecheng: false },
        { "src": "https://img.alicdn.com/imgextra/i2/2185320355/O1CN01sQ3Seu1EUdNpM07xy_!!2185320355.png", "mask": { "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01q9oLOT1EUdNuPJVw6_!!2185320355.png", "offset": { x: 0, y: 0 } }, "name": "map3.png", "width": "2247", "height": "1238", x: 836, y: 0, center: { x: -2514, y: -538 }, isColor: !true, isHecheng: false },
        { "src": "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01VarGC21EUdNnZdZyw_!!2185320355.png", "mask": { "src": "https://img.alicdn.com/imgextra/i2/2185320355/O1CN01TuMlc11EUdNwAwfzh_!!2185320355.png", "offset": { x: 0, y: 0 } }, "name": "map4.png", "width": "1196", "height": "2197", x: 0, y: 0, center: { x: -460, y: -1330 }, isColor: !true, isHecheng: false },
        { "src": "https://img.alicdn.com/imgextra/i1/2185320355/O1CN01IPQ2021EUdNqHeQuI_!!2185320355.png", "mask": { "src": "https://img.alicdn.com/imgextra/i2/2185320355/O1CN01vYqQ6I1EUdO0zwRYc_!!2185320355.png", "offset": { x: 0, y: 0 } }, "name": "map5.png", "width": "1651", "height": "1574", x: 751, y: 140, center: { x: -1435, y: -982 }, isColor: !true, isHecheng: false },
      ],
      // 未解锁按钮 地图未解锁时，会自动添加到clickArr数组里面 `disableBtn-${mapIdx}`
      disableBtn: { src: "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01lj6at21EUdNrcuvs9_!!2185320355.png", offset: { x: 0, y: 0 } },
      activeBtn: { src: "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01VPZzJS1EUdNjfCyrs_!!2185320355.png", offset: { x: 0, y: 0 } },
      clickArr: [
        { x: 1350, y: 2016, width: 100, height: 100, name: "map1-1", mapIdx: 0 },
        { x: 1874, y: 1880, width: 130, height: 140, name: "map1-2", mapIdx: 0 },
        { x: 2484, y: 1248, width: 70, height: 148, name: "map2-1", mapIdx: 1 },
        { x: 2548, y: 1506, width: 95, height: 108, name: "map2-2", mapIdx: 1 },
        { x: 2830, y: 1396, width: 50, height: 148, name: "map2-3", mapIdx: 1 },
        { x: 2420, y: 890, width: 83, height: 180, name: "map3-1", mapIdx: 2 },
        { x: 2456, y: 586, width: 85, height: 120, name: "map3-2", mapIdx: 2 },
        { x: 366, y: 1274, width: 120, height: 120, name: "map4-1", mapIdx: 3 },
        { x: 1484, y: 1380, width: 70, height: 122, name: "map5-1", mapIdx: 4 },
        { x: 1648, y: 1182, width: 60, height: 122, name: "map5-2", mapIdx: 4 },
      ]
    },
  },

  /**游戏初始化完成*/
  onInitDone(e) {
    this.gameComponent = e.ref;
    console.log("initDone...", e)
  },
  onClick(obj) {
    // 点击回调 返回clickArr对应点击对象
    console.log("click:", obj)
    this.setData({
      mapIdx: obj.mapIdx
    })

    // 激活对应地图
    this.gameComponent.onEvent("activeMap", {
      idx: obj.mapIdx,//地图maps下标
    });
    // 移动到maps下标对应地图的中心点
    this.gameComponent.onEvent("toCenter", {
      idx: obj.mapIdx,
      callback: () => {
        console.log("center end...")
      }
    });
  }
});

• xaml

  <view class="game-box">
    <game gameSource="{{gameSource}}" onInitDone="onInitDone" onClick="onClick" />
  </view>

• xass

.game-box {
  width: 750rpx;
  height: 1700rpx;
  position: absolute;
  left: 0;
  top: 0vh;
}