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

`



`

- xass

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