0.0.2 • Published 3 years ago
gm-game-leftright v0.0.2
gm-game-leftright
躲避障碍物小游戏
安装
npm install gm-game-leftright使用
必须开启 "enableSkia": "true"- json
{
"usingComponents": {
"game-leftright": "gm-game-leftright/leftright"
}
}- js
Page({
data: {
renderGame: true,
gameSource: {
speed: 8,//初始速度
maxSpeed: 15,//最大速度
speedStep: 0,//递增速度
speedStepHeight: 200,//递增高度（没隔递增高度增加对应的递增速度）
firstShowHeight: 0,//初始元素显示坐标
barrierMaxHeight: 2,//两个障碍物之间的间隔高度，player元素的倍数
playerBottom: 30,//player距离底部距离
scorePos: {
src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01U7d5PE1FJvcjjpTs0_!!1080040467.png",
width: 234,
height: 92,
left: 31,
top: 195,
scoreTop: 226,//分数值顶部位置
scoreLeft: 211,//分数值最左边位置
scoreCenter: 211,
// 分数值图片 0 - 9
numArr: [
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01EiDmFw1FJvchTVrRu_!!1080040467.png", width: 22, height: 28, val: 0 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01mdfCwt1FJvcnxeb7M_!!1080040467.png", width: 22, height: 28, val: 1 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01bBMHRk1FJvckSF4GI_!!1080040467.png", width: 22, height: 28, val: 2 },
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01vNIMYp1FJvcarpYdQ_!!1080040467.png", width: 22, height: 28, val: 3 },
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01Id7nDm1FJvcarpcnR_!!1080040467.png", width: 22, height: 28, val: 4 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01iUJqSk1FJvcgtOrKd_!!1080040467.png", width: 22, height: 28, val: 5 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01NPSijh1FJvcfanm09_!!1080040467.png", width: 22, height: 28, val: 6 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01hCqzn11FJvcmz6VEW_!!1080040467.png", width: 22, height: 28, val: 7 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01Ib6Kmv1FJvcobdbYR_!!1080040467.png", width: 22, height: 28, val: 8 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01oOd6HZ1FJvckiuXVn_!!1080040467.png", width: 22, height: 28, val: 9 },
],
},
timePos: {
src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN019oWP8S1FJvcarot9b_!!1080040467.png",
width: 87,
height: 101,
left: 640,
top: 184,
time: 60,//倒计时时间
fixedTime: true,//不转换成分钟数
timeTop: 226,//倒计时数字顶部位置
// timeleft: -999,//倒计时第一位数字左侧位置，第二位数紧跟其后
// timeRight: 130,//倒计时最后一位数字右侧位置，第三位数字在其前面
center: 684,//倒计时时间中间位置，如果有该字段，timeLeft和timeRight无效
endImg: { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01OHE6BP1FJvcq0sh9h_!!1080040467.png", width: 22, height: 28 },//跟在倒计时后面
// 时间数字图片 0 - 9
numArr: [
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01EiDmFw1FJvchTVrRu_!!1080040467.png", width: 22, height: 28, val: 0 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01mdfCwt1FJvcnxeb7M_!!1080040467.png", width: 22, height: 28, val: 1 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01bBMHRk1FJvckSF4GI_!!1080040467.png", width: 22, height: 28, val: 2 },
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01vNIMYp1FJvcarpYdQ_!!1080040467.png", width: 22, height: 28, val: 3 },
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01Id7nDm1FJvcarpcnR_!!1080040467.png", width: 22, height: 28, val: 4 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01iUJqSk1FJvcgtOrKd_!!1080040467.png", width: 22, height: 28, val: 5 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01NPSijh1FJvcfanm09_!!1080040467.png", width: 22, height: 28, val: 6 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01hCqzn11FJvcmz6VEW_!!1080040467.png", width: 22, height: 28, val: 7 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01Ib6Kmv1FJvcobdbYR_!!1080040467.png", width: 22, height: 28, val: 8 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01oOd6HZ1FJvckiuXVn_!!1080040467.png", width: 22, height: 28, val: 9 },
],
},
playerInfo: {
src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01Yj24OC1FJvcgtQbWj_!!1080040467.png", width: 246, height: 447
},
barrierArr: [
// changePlayer:吃掉此元素 改变player显示 {hidePlayer:是否隐藏默认player（如果隐藏了，不能拖动player，必须等player显示后才能拖动） boomArr:改变后的player元素，可以放序列帧 fadeTime：消失时间}
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01FgXpgf1FJvckiylWt_!!1080040467.png", width: 458, height: 122, bound: { left: 0, right: 0, top: 0, bottom: 0 }, },//bound：障碍物触碰的边界 相对障碍物图片边界向指定方向缩进
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01iXWiE71FJvcarpI6F_!!1080040467.png", width: 518, height: 119, bound: { left: 0, right: 0, top: 0, bottom: 0 }, },//bound：障碍物触碰的边界 相对障碍物图片边界向指定方向缩进
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01JJtyoq1FJvckm8aqK_!!1080040467.png", width: 224, height: 48, bound: { left: 0, right: 0, top: 0, bottom: 0 }, },//bound：障碍物触碰的边界 相对障碍物图片边界向指定方向缩进
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01N472ki1FJvcnJJVC2_!!1080040467.png", width: 420, height: 110, bound: { left: 0, right: 0, top: 0, bottom: 0 }, },//bound：障碍物触碰的边界 相对障碍物图片边界向指定方向缩进
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01Hix7tV1FJvcovi4Wh_!!1080040467.png", width: 408, height: 72, bound: { left: 0, right: 0, top: 0, bottom: 0 }, },//bound：障碍物触碰的边界 相对障碍物图片边界向指定方向缩进
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN019AnOow1FJvcqKTcoy_!!1080040467.png", width: 450, height: 53, bound: { left: 0, right: 0, top: 0, bottom: 0 }, },//bound：障碍物触碰的边界 相对障碍物图片边界向指定方向缩进
],
energyAndBarrierLine: true,//障碍物和能量在同一行生成
barrier2Center: true,//能量生成在两个障碍物之间
energyArr: [
{
src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01mnk0ai1FJvcnxjE7h_!!1080040467.png", width: 262, height: 313, val: 2, showHeight: 0, probability: 3, bound: { left: 0, right: 0, top: 0, bottom: 0 },
activeSpeed: 0.1,
activeImg: [
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN017arBPs1FJvcmz4tVz_!!1080040467.png", width: 262, height: 313 },
]
},//bound：障碍物触碰的边界 相对障碍物图片边界向指定方向缩进
{
src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01MtpYaH1FJvcarot9F_!!1080040467.png", width: 259, height: 297, val: 5, showHeight: 0, probability: 3, bound: { left: 0, right: 0, top: 0, bottom: 0 },
activeSpeed: 0.1,
activeImg: [
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01PZEhUz1FJvcpVJnFs_!!1080040467.png", width: 259, height: 297 },
]
},//bound：障碍物触碰的边界 相对障碍物图片边界向指定方向缩进
{
src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01DrDSUu1FJvcmZ2Zk3_!!1080040467.png", width: 257, height: 317, val: 8, showHeight: 0, probability: 3, bound: { left: 0, right: 0, top: 0, bottom: 0 },
activeSpeed: 0.1,
activeImg: [
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01yRUgGs1FJvcgtSHSX_!!1080040467.png", width: 257, height: 317 },
]
},//bound：障碍物触碰的边界 相对障碍物图片边界向指定方向缩进
{
src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01193pSa1FJvcfu08Ht_!!1080040467.png", width: 248, height: 297, val: 25, showHeight: 0, probability: 1, bound: { left: 0, right: 0, top: 0, bottom: 0 },
activeSpeed: 0.1,
activeImg: [
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN016hDrSg1FJvcovAZew_!!1080040467.png", width: 248, height: 297 },
]
},//bound：障碍物触碰的边界 相对障碍物图片边界向指定方向缩进
],
padding: {
top: 0
}
},
},
onLoad() {
},
onRef(game) {
this.gameComponent = game;
},
changeFun() {
this.setData({
renderGame: !this.data.renderGame
})
},
overFun() {
this.gameComponent.stop();
},
beginFun() {
this.gameComponent.start();
},
continueFun() {
this.gameComponent.continue();
},
resetFun() {
this.gameComponent.reset();
},
pauseFun() {
this.gameComponent.pause();
},
onFinish(obj) {
// obj {score:总分数,type:"timeout"}
my.alert({
content: "游戏结束" + obj.score
})
},
onInitDone() {
// my.alert({
// content: "游戏初始化完成"
// })
this.beginFun();
},
onUpdate(item) {
// console.log("------", item.imgObj)
// item.imgObj 返回图片对象
/* my.alert({
content: "游戏消除了"
}) */
},
});- xaml
<game-leftright
gameSource="{{gameSource}}"
onRef="onRef"
onFinish="onFinish"
onInitDone="onInitDone"
onUpdate="onUpdate"
/>