0.0.8 • Published 3 years ago
gm-game-ppl v0.0.8
gm-game-ppl
泡泡龙
安装
npm install gm-game-ppl使用
- app.json
必须开启 "enableSkia": "true"如果项目需要使用插件，在window下加上 disablePluginSandBox：“true”- json
{
"usingComponents": {
"gm-game-ppl": "gm-game-ppl/ppl"
}
}- js
Page({
data: {
dis: true,
gameSource: {
// 游戏元素
items: [
{
src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN014y5g4E1FJvd936h9n_!!1080040467.png",
defaultBg: {
delayTime: 1000,
src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01d8M1CZ1FJvdDUJBT4_!!1080040467.png",
width: 100,
height: 100
},
val: 10,
width: 100,
height: 100,
probability: 1,//出现概率
nextImg: {
src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN014y5g4E1FJvd936h9n_!!1080040467.png",
width: 100,
height: 100,
},
// 爆炸动画序列帧
boomArr: [
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01GguwAR1FJvd741re9_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN014og4wn1FJvd8uIQUj_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01Ey9Hzo1FJvd5CHvkO_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01INm2C91FJvd92tsEH_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01yHDdGW1FJvdBVTjQn_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01kGDQFU1FJvdFoVxmv_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01dzhSHi1FJvdFHbgGa_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01wG2soJ1FJvd8uItbL_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01dDHZdn1FJvdCJ1nxo_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01Cyf0n71FJvd6UtgRa_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN019HCNoo1FJvdDkMjN6_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01P66isG1FJvdCJ4Q5j_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01BbKbk01FJvdFHcoyq_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01WCWg7s1FJvd6Utsv5_!!1080040467.png", width: 200, height: 200 },
],
boomSpeed: 0.5,// 爆炸动画速度 值越大，速度越快
},
{
src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01v6NKOl1FJvd9Q4DdU_!!1080040467.png",
defaultBg: {
delayTime: 1000,
src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01d8M1CZ1FJvdDUJBT4_!!1080040467.png",
width: 100,
height: 100
},
val: 10,
width: 100,
height: 100,
probability: 1,//出现概率
nextImg: {
src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01v6NKOl1FJvd9Q4DdU_!!1080040467.png",
width: 100,
height: 100,
},
// 爆炸动画序列帧
boomArr: [
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01a5Bg8z1FJvd0Qo66K_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01GlNLFL1FJvdEPfNMg_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01DIU7761FJvdDkJui5_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN014l2iFz1FJvdFHdUWa_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01ksoHkl1FJvdDkLWUo_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01GvUlE91FJvd0QpN7S_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01ksvKtH1FJvd8uHQ7x_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01KKv3gD1FJvd9PrOph_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01Na9RHJ1FJvd0QqiHT_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01zOYZJ91FJvdDkMKQ4_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01Wg3aOj1FJvd8uIpQe_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01uIyd7z1FJvd6UuM14_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01d43eSX1FJvd74515A_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN011bYGxm1FJvdFHedDH_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01AryTSY1FJvdFHbTmU_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01Z0HraS1FJvdBVMHFD_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01Y1OlYw1FJvdBVKGVb_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01sCu3k11FJvdCJ3ss3_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01rf2tBd1FJvdEPeyRa_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01eknCpa1FJvdBVLwSq_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01gYcN0X1FJvd0Qnxp4_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01Wq3TmC1FJvd6Us4cx_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01zTFguk1FJvd92usaa_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01WEy5hP1FJvd0QqB1J_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01D3ch7Q1FJvd6UucdJ_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01u6ZhqG1FJvd0Qqyut_!!1080040467.png", width: 200, height: 200 },
],
boomSpeed: 0.5,// 爆炸动画速度 值越大，速度越快
},
{
src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN016Ms5W81FJvd6V5Qqx_!!1080040467.png",
defaultBg: {
delayTime: 1000,
src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01d8M1CZ1FJvdDUJBT4_!!1080040467.png",
width: 100,
height: 100
},
val: 10,
width: 100,
height: 100,
probability: 1,//出现概率
nextImg: {
src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN016Ms5W81FJvd6V5Qqx_!!1080040467.png",
width: 100,
height: 100,
},
// 爆炸动画序列帧
boomArr: [
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01cTC2PJ1FJvd8uHxLv_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01jWfJ7P1FJvd8uHxLy_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN015XXOag1FJvdCJ28hX_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01209Uxg1FJvd92u0UO_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01xyswLe1FJvd8uIQRy_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01kc4CbL1FJvd9Psjyw_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01Du9XWv1FJvdFoUp4Y_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01yZBpym1FJvd9PuDR3_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01W3s1aK1FJvdDkKBIC_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01lxx73C1FJvdCJ2wbm_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01DGrMmb1FJvdCkBT9H_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01J7e7KK1FJvd5CJjzD_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01ghchwN1FJvdDkLenZ_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01dAfNOE1FJvd92u4e3_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01wNzIjr1FJvdFHdgyi_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01mcR9n71FJvd6UrwHr_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01bTP3Gk1FJvd9Ptwnn_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01tJvety1FJvdDkJqXm_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01eoBBRa1FJvdBVLjyA_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01HOY7Qd1FJvdCk8qyo_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01Quc4BS1FJvdFoVlHe_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01SWAwNZ1FJvdAA4lQk_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01nIOfug1FJvd8uIlFd_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01EyslgY1FJvdAA3M5i_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01fIJH5M1FJvd9Pu58M_!!1080040467.png", width: 200, height: 200 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01rl4gri1FJvdEPfNM3_!!1080040467.png", width: 200, height: 200 },
],
boomSpeed: 0.5,// 爆炸动画速度 值越大，速度越快
},
],
pao: {
src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01aXQeqB1FJvd6WBVLb_!!1080040467.png",
width: 100,
height: 100,
},
longLine: {
speed: 0.5,
arr: [
{
src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01NCqqnl1FJvdAroJT3_!!1080040467.png",
width: 750,
height: 100,
}
],
},
shortLine: {
speed: 0.5,
arr: [
{
src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01qs2dWt1FJvdEhqLpS_!!1080040467.png",
width: 750,
height: 100,
}
],
},
nextBallBg: {
src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN016Pez531FJvdFpgXIu_!!1080040467.png",
width: 160,
height: 107,
padding: 10,
nextBallPos: {
width: 87,
height: 87,
left: 0,//left距离相对于元素中心（width/2） 0：元素中心处于居中位置
bottom: 10
}
},
line: {
src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01Yhe1Sx1FJvdAQQpm7_!!1080040467.png",
width: 750,
height: 2,
bottom: 400,
showAllWidth: true
},
bubbleLine: {
speed: 0.5,
arr: [
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN0112XfpH1FJvdCkAKSc_!!1080040467.png", width: 125, height: 50 },
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01O15UWj1FJvdCkBwGH_!!1080040467.png", width: 125, height: 50 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01Zuqdjl1FJvdDkKeQc_!!1080040467.png", width: 125, height: 50 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01XqP5Jo1FJvdFHe5vO_!!1080040467.png", width: 125, height: 50 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01aGgF7s1FJvdDkK30s_!!1080040467.png", width: 125, height: 50 },
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN019Af5P21FJvdFoTgOG_!!1080040467.png", width: 125, height: 50 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01mlYTA21FJvd8uJQqD_!!1080040467.png", width: 125, height: 50 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01kbGEXz1FJvd6UrjoC_!!1080040467.png", width: 125, height: 50 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01lXA98M1FJvdDkMC5x_!!1080040467.png", width: 125, height: 50 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01qPo7aH1FJvd8uI5gg_!!1080040467.png", width: 125, height: 50 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN015VIs461FJvdFHdpIe_!!1080040467.png", width: 125, height: 50 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01SEfAPH1FJvdFHeIP6_!!1080040467.png", width: 125, height: 50 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01P76eHk1FJvdBVMkLF_!!1080040467.png", width: 125, height: 50 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01ScT4MT1FJvd9Ps4PU_!!1080040467.png", width: 125, height: 50 },
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01GiQTTx1FJvd9PrKfm_!!1080040467.png", width: 125, height: 50 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01RqSsKR1FJvdDkKeR3_!!1080040467.png", width: 125, height: 50 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01hqc26P1FJvd6UrKsy_!!1080040467.png", width: 125, height: 50 },
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN014GYSBJ1FJvdFoX6RP_!!1080040467.png", width: 125, height: 50 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01IpOuKL1FJvdEPeuGL_!!1080040467.png", width: 125, height: 50 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01E1Vaca1FJvdEPhSHF_!!1080040467.png", width: 125, height: 50 },
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01UnyLKA1FJvdFHd5Yq_!!1080040467.png", width: 125, height: 50 },
]
},
helpLine: {
src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01LQG99j1FJvdER6ncV_!!1080040467.png",
width: 15,
height: 274,
},
alphaStep: 0.9,//透明度增长速度
audioObj: {
default: { audioSrc: "http://isv-vod.alibabausercontent.com/9NHuyPIlugXPqpc4NFN/9P9H4QSkSnLtsxP1z11?auth_key=1616650210-0-0-b1b70a63db2479c0a4e04eb2aa2f2509&w=0&h=0&e=sd&t=2128005016163910103333231efce0" }
}
},
curBallNum: 1000,
},
onLoad() { },
onRef(game) {
this.gameComponent = game;
},
overFun() {
this.gameComponent.stop();
},
beginFun() {
my.alert({
content: "游戏开始"
})
this.gameComponent.start();
},
resetFun() {
this.gameComponent.reset();
},
addLineFun() {
// 添加一行
this.gameComponent.addLine();
},
renderNextFun() {
// 生成下一个
this.gameComponent.renderNext();
},
addBubbleFun() {
// 加一个泡泡
this.gameComponent.addBubble();
},
onFinish() {
my.alert({
content: "游戏结束"
})
},
onAddBallCallBack(ops) {
// 添加泡泡回调ops:{cur:0,total:0} cur：当次加到泡泡数 total:总泡泡数
my.alert({
content: "添加成功"
})
this.setData({
curBallNum: ops.total
})
},
onRenderSendBall(img) {
// 生成发射球
// my.alert({
// content: "生成发射球了"
// });
},
onInitDone() {
this.gameComponent.start();
/* my.alert({
content: "游戏初始化完成"
}) */
},
onUpdate(item) {
// spriteArr：打中消除的元素 noHangs：没有悬挂点的元素
// {curScore,totalScore}
this.setData({
totalScore: item.totalScore,
curScore: item.curScore,
curBallNum: item.curBallNum,
})
// my.alert({
// content: "游戏消除了"
// })
},
changeFun() {
this.setData({
dis: !this.data.dis
})
}
});- xaml
<!--
rowMaxNum:游戏一行最多泡泡个数，挨着行就少一个
speed：生成一行然后掉落的速度
speedTotalTime：生成一行掉落的时间（毫秒）
baseScore:游戏进入时的基础分
firstBottomLineType: "max",//第一次初始化，最后一排的球个数 max:球个数为rowMaxNum min:球个数为rowMaxNum-1
firstShowLine: 5,//初始化行数
nextRenderLine: 3,//当球清除完后自动生成行数
paddingLeft:左内边距
paddingRight:右内边距
totalBall:总共可发射的球个数
onAddBallCallBack:添加泡泡回调
onRenderSendBall:生成发射球回调
onInitDone:游戏渲染完回调
onUpdate:游戏消除回调
onFinish:游戏结束回调
-->
<ppl
gameSource="{{gameSource}}"
speed="{{60}}"
speedTotalTime="{{1}}"
rowMaxNum="{{7}}"
baseScore="{{100}}"
firstBottomLineType="max"
firstShowLine="{{5}}"
nextRenderLine="{{0}}"
paddingLeft="{{10}}"
paddingRight="{{10}}"
totalBall="{{curBallNum}}"
onRef="onRef"
onAddBallCallBack="onAddBallCallBack"
onRenderSendBall="onRenderSendBall"
onInitDone="onInitDone"
onUpdate="onUpdate"
onFinish="onFinish"
/>