game-map3
v0.0.3
Published
``` npm install game-map3 ```
Downloads
2
Readme
game-map3
游戏
安装
npm install game-map3使用
必须开启 "enableSkia": "true"- json
{
"usingComponents": {
"game": "game-map3/index"
}
}- mini.project.json
{
"node_modules_es6_whitelist": [
"common-game"
]
}- js
Page({
data: {
gameSource: {
/* dom: {
width: 726,
height: 968,
}, */
startPos: {//容器初始设置
scale: 0.3,
x: 0,
y: 0,
},
scaleOps: {
imgShowType: "none",//none：自由缩放，single：保持长边最小缩放为撑满容器 double：保持最短边缩放为撑满容器
openScale: !false, //是否开启缩放,默认false关闭
scaleLmd: 100, //值越小越灵敏
scaleRange: { min: 0.01, max: 10 } //缩放范围
},
ops: {
row: 6,//行
col: 10,//列
width: 1080,//单张图宽
height: 1050,//单张图高
},
imgs: [
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01NstbNZ1FJvoz99gyv_!!1080040467.jpg", "name": "0626修改step2全景图_01.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01Fl3D0F1FJvosjM26a_!!1080040467.jpg", "name": "0626修改step2全景图_02.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01nEwBCo1FJvp2Tcp08_!!1080040467.jpg", "name": "0626修改step2全景图_03.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01B8tMhk1FJvp0Bjj3W_!!1080040467.jpg", "name": "0626修改step2全景图_04.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01nblPvI1FJvoyerP8o_!!1080040467.jpg", "name": "0626修改step2全景图_05.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01KczGN71FJvoy0UQca_!!1080040467.jpg", "name": "0626修改step2全景图_06.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01qgaWE31FJvp2TcLuQ_!!1080040467.jpg", "name": "0626修改step2全景图_07.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01IeUSxC1FJvoy0UlR9_!!1080040467.jpg", "name": "0626修改step2全景图_08.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01DHxx2q1FJvovQ1Qia_!!1080040467.jpg", "name": "0626修改step2全景图_09.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01uksjEs1FJvowt0D3S_!!1080040467.jpg", "name": "0626修改step2全景图_10.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN017oios01FJvp1fzJQm_!!1080040467.jpg", "name": "0626修改step2全景图_11.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN014Bzguq1FJvorUuLGg_!!1080040467.jpg", "name": "0626修改step2全景图_12.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01AfL7O71FJvoyesXrJ_!!1080040467.jpg", "name": "0626修改step2全景图_13.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01MW68FG1FJvoy0TpDp_!!1080040467.jpg", "name": "0626修改step2全景图_14.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01y66IBE1FJvp2TaoKC_!!1080040467.jpg", "name": "0626修改step2全景图_15.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01lInNA01FJvoy0UUna_!!1080040467.jpg", "name": "0626修改step2全景图_16.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01OIdbct1FJvoyeskMJ_!!1080040467.jpg", "name": "0626修改step2全景图_17.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN016evOmO1FJvorUvDMZ_!!1080040467.jpg", "name": "0626修改step2全景图_18.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01Ws0uzK1FJvowgdfH2_!!1080040467.jpg", "name": "0626修改step2全景图_19.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01kIgp6g1FJvoyett1R_!!1080040467.jpg", "name": "0626修改step2全景图_20.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01Yl7cnF1FJvovRRqdR_!!1080040467.jpg", "name": "0626修改step2全景图_21.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01kjPHnv1FJvoyev1iq_!!1080040467.jpg", "name": "0626修改step2全景图_22.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN017PmaYZ1FJvoyet5Bm_!!1080040467.jpg", "name": "0626修改step2全景图_23.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01eMlHGr1FJvovQ4zA4_!!1080040467.jpg", "name": "0626修改step2全景图_24.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01vt9x0z1FJvovczq7Q_!!1080040467.jpg", "name": "0626修改step2全景图_25.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01V0szso1FJvp2Tawge_!!1080040467.jpg", "name": "0626修改step2全景图_26.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01KpJoh81FJvovQ3e0Q_!!1080040467.jpg", "name": "0626修改step2全景图_27.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01oFf6GQ1FJvotO7F6b_!!1080040467.jpg", "name": "0626修改step2全景图_28.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01WQb3tB1FJvovQ4Ja0_!!1080040467.jpg", "name": "0626修改step2全景图_29.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01xoRott1FJvovQ3Vgb_!!1080040467.jpg", "name": "0626修改step2全景图_30.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN017aNyq41FJvorUwxX5_!!1080040467.jpg", "name": "0626修改step2全景图_31.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01zOckN21FJvosjO74u_!!1080040467.jpg", "name": "0626修改step2全景图_32.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01frmMFA1FJvosjNJBg_!!1080040467.jpg", "name": "0626修改step2全景图_33.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01u5e6wd1FJvorUzJ3y_!!1080040467.jpg", "name": "0626修改step2全景图_34.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN010gjF8B1FJvp0BlXNf_!!1080040467.jpg", "name": "0626修改step2全景图_35.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN013F8gcn1FJvowt0sj5_!!1080040467.jpg", "name": "0626修改step2全景图_36.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01yZ9DgA1FJvomperfL_!!1080040467.jpg", "name": "0626修改step2全景图_37.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01ShachK1FJvowt0c72_!!1080040467.jpg", "name": "0626修改step2全景图_38.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01A6A8DP1FJvoyetcUA_!!1080040467.jpg", "name": "0626修改step2全景图_39.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN010QgeYF1FJvp2TctGl_!!1080040467.jpg", "name": "0626修改step2全景图_40.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01oE1AIk1FJvowt0D8v_!!1080040467.jpg", "name": "0626修改step2全景图_41.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01KXYFiW1FJvorUwQHP_!!1080040467.jpg", "name": "0626修改step2全景图_42.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01DS6PcY1FJvorUz2S7_!!1080040467.jpg", "name": "0626修改step2全景图_43.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN010oLArF1FJvp1fyqOO_!!1080040467.jpg", "name": "0626修改step2全景图_44.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01Sbddrm1FJvp0BoM2n_!!1080040467.jpg", "name": "0626修改step2全景图_45.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01FJVPPw1FJvorUwYcn_!!1080040467.jpg", "name": "0626修改step2全景图_46.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01qyuIKP1FJvompcBOe_!!1080040467.jpg", "name": "0626修改step2全景图_47.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01HXXDvA1FJvovd1FUs_!!1080040467.jpg", "name": "0626修改step2全景图_48.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN011jU3Es1FJvp0ebrfe_!!1080040467.jpg", "name": "0626修改step2全景图_49.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01vuZVlF1FJvosjPO7t_!!1080040467.jpg", "name": "0626修改step2全景图_50.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01WLDauP1FJvoyeuxf5_!!1080040467.jpg", "name": "0626修改step2全景图_51.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01QwF3d41FJvowgeXRr_!!1080040467.jpg", "name": "0626修改step2全景图_52.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01BUEFHx1FJvp1g1f4F_!!1080040467.jpg", "name": "0626修改step2全景图_53.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01zTka241FJvp0eYqbO_!!1080040467.jpg", "name": "0626修改step2全景图_54.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01gerjdI1FJvp2Tcgph_!!1080040467.jpg", "name": "0626修改step2全景图_55.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01Rqwifz1FJvovRTzmO_!!1080040467.jpg", "name": "0626修改step2全景图_56.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01rpRpzc1FJvosjPac8_!!1080040467.jpg", "name": "0626修改step2全景图_57.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01uFtVFF1FJvovd02fZ_!!1080040467.jpg", "name": "0626修改step2全景图_58.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01LOmu0Y1FJvp0ec4B0_!!1080040467.jpg", "name": "0626修改step2全景图_59.jpg" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01x0YfDN1FJvoy0Wi8E_!!1080040467.jpg", "name": "0626修改step2全景图_60.jpg" },
],
hots: [
{
// 动画为序列帧方式
srcArr: [
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01viNQvZ1FJvnvpn6pz_!!1080040467.png", "name": "粒子消失4_00000.png", "width": "518", "height": "469" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01gsUDGq1FJvntXvt4o_!!1080040467.png", "name": "粒子消失4_00001.png", "width": "518", "height": "469" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01Zs5gy01FJvnuD8pCN_!!1080040467.png", "name": "粒子消失4_00002.png", "width": "518", "height": "469" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01Lu1tXR1FJvnsPapsn_!!1080040467.png", "name": "粒子消失4_00003.png", "width": "518", "height": "469" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01hSIi3l1FJvnobelsX_!!1080040467.png", "name": "粒子消失4_00004.png", "width": "518", "height": "469" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01SmSM5E1FJvnunCbdo_!!1080040467.png", "name": "粒子消失4_00005.png", "width": "518", "height": "469" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01lQXMfr1FJvnqh2Sh8_!!1080040467.png", "name": "粒子消失4_00006.png", "width": "518", "height": "469" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01ftW45d1FJvnvppvWh_!!1080040467.png", "name": "粒子消失4_00007.png", "width": "518", "height": "469" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN017awAa21FJvnxQ2U64_!!1080040467.png", "name": "粒子消失4_00008.png", "width": "518", "height": "469" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01ofRE6K1FJvnvppK5r_!!1080040467.png", "name": "粒子消失4_00009.png", "width": "518", "height": "469" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01bMEMeA1FJvntXxA6N_!!1080040467.png", "name": "粒子消失4_00010.png", "width": "518", "height": "469" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN016gzjMV1FJvnxQ3DqH_!!1080040467.png", "name": "粒子消失4_00011.png", "width": "518", "height": "469" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01AZSc3f1FJvnobccnp_!!1080040467.png", "name": "粒子消失4_00012.png", "width": "518", "height": "469" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN017QBcBp1FJvnr0vnFL_!!1080040467.png", "name": "粒子消失4_00013.png", "width": "518", "height": "469" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN016YZCIT1FJvnwMEadR_!!1080040467.png", "name": "粒子消失4_00014.png", "width": "518", "height": "469" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01MEa8nK1FJvnuD9E9a_!!1080040467.png", "name": "粒子消失4_00015.png", "width": "518", "height": "469" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01ELj7QZ1FJvnsPaALH_!!1080040467.png", "name": "粒子消失4_00016.png", "width": "518", "height": "469" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01FtOhvR1FJvnmgmcM9_!!1080040467.png", "name": "粒子消失4_00017.png", "width": "518", "height": "469" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01gdXGbQ1FJvnqiUDwD_!!1080040467.png", "name": "粒子消失4_00018.png", "width": "518", "height": "469" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01j5OAm01FJvntXvLph_!!1080040467.png", "name": "粒子消失4_00019.png", "width": "518", "height": "469" },
],
type: "animate",//标识为动画
imgType: "max",//标识为大图
width: "10360",//大图宽度
height: "469",//大图高度
fWidth: 518,//一帧宽度
fHeight: 469,//一帧高度
count: 20,//总共帧数
boomSpeed: 0.4,//播放速度
loop: true,//是否循环
offset: { x: 13, y: -80 },
x: 0,
y: 1000
},
{
// 动画为雪碧图方式
src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01MtDRK01FJvny73GkA_!!1080040467.png",
type: "animate",//标识为动画
imgType: "max",//标识为大图
width: "900",//大图宽度
height: "1200",//大图高度
fWidth: 300,//一帧宽度
fHeight: 300,//一帧高度
count: 11,//总共帧数
boomSpeed: 0.5,//播放速度
loop: true,//是否循环
x: 0,
y: 1500
}
],
},
},
onLoad() { },
onInitDone(e) {
this.gameComponent = e.ref;
},
onClickFun(hotArr) {
// 没有点击中元素，则不触发此回掉
// hotArr：返回点击中的对象，对应gameSource->hots元素，可能存在重叠热区，所以返回的是数组
console.error("click:", hotArr);
my.alert({
content: hotArr.length
});
}
});- xaml
<view class="pageBox">
<game gameSource="{{gameSource}}" onClickCallback="onClickFun" onInitDone="onInitDone" />
</view>- acss
.pageBox{
position: absolute;
width: 750rpx;
height: 500rpx;
left: 0;
top: 0;
/* transform: translateX(-50%) translateY(-50%); */
background-color: #ccc;
}