gm-game-popgame
v1.4.7
Published
``` npm install gm-game-popgame ```
Downloads
10
Readme
gm-game-popgame
消消乐小游戏
安装
npm install gm-game-popgame
使用
- app.json
必须开启 "enableSkia": "true"
如果项目需要使用插件,在window下加上 disablePluginSandBox:“true”
- json
{
"usingComponents": {
"gm-game-popgame": "gm-game-popgame/popGame"
}
}
- js
Page({
data: {
stepCount: 100,//步数
scorePos: {
src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01TlwpbW1FJvZ2Q5aGq_!!1080040467.png",
width: 136,
height: 43,
scoreTop: 108,//分数值顶部位置
scoreRight: 600,//分数值最右边位置
left: 500,
top: 100,
// 分数值图片 0 - 9
numArr: [
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01GiVJFq1FJva0ojk0l_!!1080040467.png", width: 16, height: 27, val: 0 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01fgY9Hl1FJva5WWo6v_!!1080040467.png", width: 16, height: 27, val: 1 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01Uj8gqT1FJvZzukPht_!!1080040467.png", width: 16, height: 27, val: 2 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01jAZw2G1FJvZxmwXTL_!!1080040467.png", width: 16, height: 27, val: 3 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01EyITGj1FJva3knfJe_!!1080040467.png", width: 16, height: 27, val: 4 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN012gc5k21FJva20z9Xo_!!1080040467.png", width: 16, height: 27, val: 5 },
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01PMVAV61FJvZyHaz2t_!!1080040467.png", width: 16, height: 27, val: 6 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01hf3iKp1FJva0FrSpE_!!1080040467.png", width: 16, height: 27, val: 7 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01Ays2W61FJvZyHcj7b_!!1080040467.png", width: 16, height: 27, val: 8 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01v0v42s1FJva4ONIOd_!!1080040467.png", width: 16, height: 27, val: 9 },
],
},
gameSteps: 30,
timePos: {
src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01TlwpbW1FJvZ2Q5aGq_!!1080040467.png",
width: 136,
height: 43,
time: 30,//倒计时时间
timeTop: 108,//倒计时数字顶部位置
timeleft: 120,//倒计时第一位数字左侧位置,第二位数紧跟其后
timeRight: 194,//倒计时最后一位数字右侧位置,第三位数字在其前面
left: 100,
top: 100,
// 时间数字图片 0 - 9
numArr: [
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01GiVJFq1FJva0ojk0l_!!1080040467.png", width: 16, height: 27, val: 0 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01fgY9Hl1FJva5WWo6v_!!1080040467.png", width: 16, height: 27, val: 1 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01Uj8gqT1FJvZzukPht_!!1080040467.png", width: 16, height: 27, val: 2 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01jAZw2G1FJvZxmwXTL_!!1080040467.png", width: 16, height: 27, val: 3 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01EyITGj1FJva3knfJe_!!1080040467.png", width: 16, height: 27, val: 4 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN012gc5k21FJva20z9Xo_!!1080040467.png", width: 16, height: 27, val: 5 },
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01PMVAV61FJvZyHaz2t_!!1080040467.png", width: 16, height: 27, val: 6 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01hf3iKp1FJva0FrSpE_!!1080040467.png", width: 16, height: 27, val: 7 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01Ays2W61FJvZyHcj7b_!!1080040467.png", width: 16, height: 27, val: 8 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01v0v42s1FJva4ONIOd_!!1080040467.png", width: 16, height: 27, val: 9 },
],
},
gameSource: {
// 游戏元素
items: [
{
src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01CNZUM31FJvaCYgu39_!!1080040467.png",
val: 10,
width: 110,
height: 110,
probability: 1,//出现概率
// 爆炸动画序列帧
boomArr: [
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01QSkpNr1FJvaFPKDXy_!!1080040467.png", width: 110, height: 110 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01vQWadX1FJvaCYjiwa_!!1080040467.png", width: 110, height: 110 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01u1NgZ11FJvaHCzKCC_!!1080040467.png", width: 110, height: 110 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01gLQBYt1FJvaFPJwuK_!!1080040467.png", width: 110, height: 110 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01vCR2K31FJvaBXo457_!!1080040467.png", width: 110, height: 110 },
],
boomSpeed: 0.1,// 爆炸动画速度 值越大,速度越快
audioName: "default"
},
{
src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01dl3mha1FJvaBrK9k0_!!1080040467.png",
val: 10,
width: 110,
height: 110,
probability: 1,//出现概率
// 爆炸动画序列帧
boomArr: [
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01QSkpNr1FJvaFPKDXy_!!1080040467.png", width: 110, height: 110 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01vQWadX1FJvaCYjiwa_!!1080040467.png", width: 110, height: 110 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01u1NgZ11FJvaHCzKCC_!!1080040467.png", width: 110, height: 110 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01gLQBYt1FJvaFPJwuK_!!1080040467.png", width: 110, height: 110 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01vCR2K31FJvaBXo457_!!1080040467.png", width: 110, height: 110 },
],
boomSpeed: 0.1,// 爆炸动画速度 值越大,速度越快
audioName: "default"
},
{
src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01JPFncl1FJvaCYh2MZ_!!1080040467.png",
val: 10,
width: 110,
height: 110,
probability: 1,//出现概率
// 爆炸动画序列帧
boomArr: [
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01QSkpNr1FJvaFPKDXy_!!1080040467.png", width: 110, height: 110 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01vQWadX1FJvaCYjiwa_!!1080040467.png", width: 110, height: 110 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01u1NgZ11FJvaHCzKCC_!!1080040467.png", width: 110, height: 110 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01gLQBYt1FJvaFPJwuK_!!1080040467.png", width: 110, height: 110 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01vCR2K31FJvaBXo457_!!1080040467.png", width: 110, height: 110 },
],
boomSpeed: 0.1,// 爆炸动画速度 值越大,速度越快
audioName: "default"
},
{
src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN0170OItT1FJva9ru6rG_!!1080040467.png",
val: 10,
width: 110,
height: 110,
probability: 1,//出现概率
// 爆炸动画序列帧
boomArr: [
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01QSkpNr1FJvaFPKDXy_!!1080040467.png", width: 110, height: 110 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01vQWadX1FJvaCYjiwa_!!1080040467.png", width: 110, height: 110 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01u1NgZ11FJvaHCzKCC_!!1080040467.png", width: 110, height: 110 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01gLQBYt1FJvaFPJwuK_!!1080040467.png", width: 110, height: 110 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01vCR2K31FJvaBXo457_!!1080040467.png", width: 110, height: 110 },
],
boomSpeed: 0.1,// 爆炸动画速度 值越大,速度越快
audioName: "default"
},
{
src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01aDjZeH1FJva8LzwUZ_!!1080040467.png",
val: 10,
width: 110,
height: 110,
probability: 1,//出现概率
// 爆炸动画序列帧
boomArr: [
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01QSkpNr1FJvaFPKDXy_!!1080040467.png", width: 110, height: 110 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01vQWadX1FJvaCYjiwa_!!1080040467.png", width: 110, height: 110 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01u1NgZ11FJvaHCzKCC_!!1080040467.png", width: 110, height: 110 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01gLQBYt1FJvaFPJwuK_!!1080040467.png", width: 110, height: 110 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01vCR2K31FJvaBXo457_!!1080040467.png", width: 110, height: 110 },
],
boomSpeed: 0.1,// 爆炸动画速度 值越大,速度越快
audioName: "default"
},
],
// 选中动画 序列帧
selectAnimateSpeed: 0.1,
selectAnimate: [
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01CK6Gzr1FJvaBcATG7_!!1080040467.png", "width": 110, "height": 110 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01HrKV2m1FJvaFPPdrE_!!1080040467.png", "width": 110, "height": 110 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01MGJ4UI1FJva5Q7e2o_!!1080040467.png", "width": 110, "height": 110 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01Jpme0X1FJvaFPQ6vS_!!1080040467.png", "width": 110, "height": 110 },
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01ywDOj31FJvaA6sR9d_!!1080040467.png", "width": 110, "height": 110 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01BU82Rb1FJvaHpPNV5_!!1080040467.png", "width": 110, "height": 110 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01etCn5O1FJvaEJRgHW_!!1080040467.png", "width": 110, "height": 110 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01l1woJd1FJvaEAuzXf_!!1080040467.png", "width": 110, "height": 110 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN019My1f21FJvaEJVMzw_!!1080040467.png", "width": 110, "height": 110 },
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01Iy9teo1FJvaDfEuGW_!!1080040467.png", "width": 110, "height": 110 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01NP1VaK1FJvaHAJh4I_!!1080040467.png", "width": 110, "height": 110 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN011M49dy1FJvaEJSozb_!!1080040467.png", "width": 110, "height": 110 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01xCF4Ab1FJvaDfFqT2_!!1080040467.png", "width": 110, "height": 110 },
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01uouz3B1FJvaGMSYH2_!!1080040467.png", "width": 110, "height": 110 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN017rg44P1FJvaDbP6Zv_!!1080040467.png", "width": 110, "height": 110 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01l6wetk1FJvaEJSDZJ_!!1080040467.png", "width": 110, "height": 110 },
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01KBqj751FJvaIy1cZi_!!1080040467.png", "width": 110, "height": 110 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01Hi4s5o1FJvaHAJ5gN_!!1080040467.png", "width": 110, "height": 110 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01jCLVpu1FJvaA6uJWc_!!1080040467.png", "width": 110, "height": 110 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01SF6PLE1FJvaIy0LaK_!!1080040467.png", "width": 110, "height": 110 }
],
// 九宫格技能 炸弹
sudoku: {
src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01iAV9fF1FJva8M0gDl_!!1080040467.png",
val: 10,
width: 110,
height: 110,
// 默认显示时的序列帧动画 如果有srcArr会忽略src
srcArr: [
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01QSkpNr1FJvaFPKDXy_!!1080040467.png", width: 110, height: 110 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01vQWadX1FJvaCYjiwa_!!1080040467.png", width: 110, height: 110 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01u1NgZ11FJvaHCzKCC_!!1080040467.png", width: 110, height: 110 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01gLQBYt1FJvaFPJwuK_!!1080040467.png", width: 110, height: 110 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01vCR2K31FJvaBXo457_!!1080040467.png", width: 110, height: 110 },
],
srcArrSpeed: 0.08,
// 爆炸动画序列帧
boomArr: [
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01QSkpNr1FJvaFPKDXy_!!1080040467.png", width: 110, height: 110 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01vQWadX1FJvaCYjiwa_!!1080040467.png", width: 110, height: 110 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01u1NgZ11FJvaHCzKCC_!!1080040467.png", width: 110, height: 110 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01gLQBYt1FJvaFPJwuK_!!1080040467.png", width: 110, height: 110 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01vCR2K31FJvaBXo457_!!1080040467.png", width: 110, height: 110 },
],
boomSpeed: 0.1,// 爆炸动画速度 值越大,速度越快
audioName: "bomb2"
},
// 十字消除技能
cross: {
src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN016sHbY51FJvaBrJHhh_!!1080040467.png",
val: 10,
probability: 1,//全消概率 此处概率相对于1000
width: 110,
height: 110,
// 爆炸动画序列帧
boomArr: [
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01QSkpNr1FJvaFPKDXy_!!1080040467.png", width: 110, height: 110 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01vQWadX1FJvaCYjiwa_!!1080040467.png", width: 110, height: 110 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01u1NgZ11FJvaHCzKCC_!!1080040467.png", width: 110, height: 110 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01gLQBYt1FJvaFPJwuK_!!1080040467.png", width: 110, height: 110 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01vCR2K31FJvaBXo457_!!1080040467.png", width: 110, height: 110 },
],
boomSpeed: 0.1,// 爆炸动画速度 值越大,速度越快
audioName: "bomb1"
}
},
audioObj: {
default: { src: "http://isv-vod.alibabausercontent.com/RGjZJMdpNgKGVQeEyw8/md0TVJ9FNFauX46iy5H?auth_key=1600418297-0-0-abfad5e2fa6d2a568be518189562d827" },//默认音效
bomb1: { src: "http://isv-vod.alibabausercontent.com/RGjZJMdpNgKGVQeEyw8/RNpLxsf1VfhnI3puBjI?auth_key=1600418314-0-0-5b59216722fd88b18586e7c605ad3b76" },//十字消除音效
bomb2: { src: "http://isv-vod.alibabausercontent.com/RGjZJMdpNgKGVQeEyw8/RNpLxsf1VfhnI3puBjI?auth_key=1600418314-0-0-5b59216722fd88b18586e7c605ad3b76" },//炸弹音乐
clearAudio: { src: "http://isv-vod.alibabausercontent.com/RGjZJMdpNgKGVQeEyw8/RNpLxsf1VfhnI3puBjI?auth_key=1600418314-0-0-5b59216722fd88b18586e7c605ad3b76" },//全屏消除音乐
},
curSteps: 30,
},
onLoad() { },
onRef(game) {
this.popGameComponent = game;
},
overFun() {
this.popGameComponent.stop();
},
beginFun() {
my.alert({
content: "游戏开始"
})
this.popGameComponent.start();
},
resetFun() {
this.popGameComponent.reset();
},
clearFun() {
this.popGameComponent.clear();
},
onFinish() {
my.alert({
content: "游戏结束"
})
},
onProgress(progress) {
// 资源读取进度回调
},
onError(e) {
// 资源读取报错回调
},
onInitDone() {
my.alert({
content: "游戏初始化完成"
})
},
onUpdate(item) {
// {curScore,totalScore,curSteps}
this.setData({
curSteps: item.curSteps,
totalScore: item.totalScore,
curScore: item.curScore
})
// my.alert({
// content: "游戏消除了"
// })
},
});
- xaml
<!--
gameSource:游戏资源
scorePos:分数对象
gameSteps:游戏步数(游戏步数和倒计时是二选一,如果都传了,则取游戏步数)
timePos:倒计时对象
selectShowAll:选中状态是否撑满 默认true:撑满 false:不撑满
rowNum:行数
colNum:列数
audio:游戏音效地址
gameStartPlayAudio:游戏进行中才播放音效 默认false:游戏渲染了消除就播放 true:游戏开始后消除才播放
onInitDone:游戏渲染完回调
onUpdate:游戏消除回调
onFinish:游戏结束回调
-->
<gm-game-popgame
gameSource="{{gameSource}}"
scorePos="{{scorePos}}"
gameSteps="{{gameSteps}}"
timePos="{{timePos}}"
selectShowAll="{{true}}"
rowNum="{{6}}"
colNum="{{6}}"
audio="{{audioObj}}"
gameStartPlayAudio="{{true}}"
onRef="onRef"
onProgress="onProgress"
onError="onError"
onInitDone="onInitDone"
onUpdate="onUpdate"
onFinish="onFinish"
/>