0.0.7 • Published 3 years ago
gm-game-drop v0.0.7
gm-game-drop
躲避障碍物小游戏
安装
npm install gm-game-drop使用
必须开启 "enableSkia": "true"如果项目需要使用插件，在window下加上 disablePluginSandBox：“true”- json
{
"usingComponents": {
"gm-game-drop": "gm-game-drop/drop"
}
}- js
Page({
data: {
renderGame: true,
scorePos: {
src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01Vr30aH1FJvczxxubX_!!1080040467.png",
width: 122,
height: 122,
scoreTop: 54,//分数值顶部位置
scoreCenter: 670,
left: 610,
top: 0,
// 分数值图片 0 - 9
numArr: [
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01q3zoHI1FJvcybanj3_!!1080040467.png", "width": 22, "height": 36, "val": 0 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01vHs1ER1FJvd4tkYQ2_!!1080040467.png", "width": 22, "height": 36, "val": 1 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN012wbHD21FJvd2KISov_!!1080040467.png", "width": 22, "height": 36, "val": 2 },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01m9g1RT1FJvd76dlN6_!!1080040467.png", "width": 22, "height": 36, "val": 3 },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01x0Xww01FJvd3XujWZ_!!1080040467.png", "width": 22, "height": 36, "val": 4 },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01vKGT2p1FJvd3XsJqg_!!1080040467.png", "width": 22, "height": 36, "val": 5 },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01m4hFAy1FJvd3XtnLN_!!1080040467.png", "width": 22, "height": 36, "val": 6 },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01VVU16H1FJvd9AfPG6_!!1080040467.png", "width": 22, "height": 36, "val": 7 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN010F4xYv1FJvd68DWVw_!!1080040467.png", "width": 22, "height": 36, "val": 8 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN0111Z2Xk1FJvd5gaFgZ_!!1080040467.png", "width": 22, "height": 36, "val": 9 },
],
tipShowY: 500,//提示分数显示的Y轴坐标，不传或传0，默认显示在底部撞击位置
tipFadeTime: 1000,
tipAdd: {
src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01KvI24T1FJvd6ALmVh_!!1080040467.png",
width: 34,
height: 54
},
tipNumArr: [
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN0184X6eL1FJvd6ALRix_!!1080040467.png", "width": 34, "height": 54, "val": 0 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01c0KGhd1FJvd78ksMS_!!1080040467.png", "width": 34, "height": 54, "val": 1 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01Gixm361FJvd3p4Lcq_!!1080040467.png", "width": 34, "height": 54, "val": 2 },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01MhX5RU1FJvd3a0Ein_!!1080040467.png", "width": 34, "height": 54, "val": 3 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01RfdzOm1FJvd0WKQfe_!!1080040467.png", "width": 34, "height": 54, "val": 4 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01FTlVkW1FJvcydp1lb_!!1080040467.png", "width": 34, "height": 54, "val": 5 },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01A5aq6F1FJvd9CqHIP_!!1080040467.png", "width": 34, "height": 54, "val": 6 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN012nhLXS1FJvd6AN7g3_!!1080040467.png", "width": 34, "height": 54, "val": 7 },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01Ag7hxb1FJvcydo1P8_!!1080040467.png", "width": 34, "height": 54, "val": 8 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01xh9Z9D1FJvd0WMi3S_!!1080040467.png", "width": 34, "height": 54, "val": 9 },
],
tipFadeTime2: 1000,
tipAdd2: {
src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN011jg7jF1FJvd3ogJbn_!!1080040467.png",
width: 34,
height: 54
},
tipNumArr2: [
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN015HvZ2g1FJvd4vX3fT_!!1080040467.png", "width": 34, "height": 54, "val": 0 },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01q7lGul1FJvd0VyPGs_!!1080040467.png", "width": 34, "height": 54, "val": 1 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN015gTD7c1FJvd7mfibK_!!1080040467.png", "width": 34, "height": 54, "val": 2 },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01fY7wNc1FJvd8gqFcc_!!1080040467.png", "width": 34, "height": 54, "val": 3 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01hQeXIo1FJvd5iKTPO_!!1080040467.png", "width": 34, "height": 54, "val": 4 },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01D8tcQa1FJvd3ZcCXt_!!1080040467.png", "width": 34, "height": 54, "val": 5 },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01jtvN1P1FJvd78RGoT_!!1080040467.png", "width": 34, "height": 54, "val": 6 },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01RookPs1FJvd2qdMvZ_!!1080040467.png", "width": 34, "height": 54, "val": 7 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01CHXLg61FJvd7mclcV_!!1080040467.png", "width": 34, "height": 54, "val": 8 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01vyg9xk1FJvd2UV8Pa_!!1080040467.png", "width": 34, "height": 54, "val": 9 },
]
},
timePos: {
src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01fSftlZ1FJvd00RS3M_!!1080040467.png",
width: 122,
height: 122,
time: 60,//倒计时时间
timeTop: 64,//倒计时数字顶部位置
timeleft: 34,//倒计时第一位数字左侧位置，第二位数紧跟其后
timeRight: 125,//倒计时最后一位数字右侧位置，第三位数字在其前面
// timeCenter: 376,//倒计时时间中间位置，如果有该字段，timeLeft和timeRight无效
left: 20,
top: 0,
// 时间数字图片 0 - 9
numArr: [
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01AvBlJ51FJvd9BoASl_!!1080040467.png", "width": 20, "height": 29, "val": 0 },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01Nr8Gd51FJvd9BrO1c_!!1080040467.png", "width": 20, "height": 29, "val": 1 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01HvuqLN1FJvd69LwqC_!!1080040467.png", "width": 20, "height": 29, "val": 2 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01zKbUeh1FJvd2LTi0m_!!1080040467.png", "width": 20, "height": 29, "val": 3 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01GEbIAv1FJvd0VQqAJ_!!1080040467.png", "width": 20, "height": 29, "val": 4 },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01GH4bjm1FJvd0VPy7F_!!1080040467.png", "width": 20, "height": 29, "val": 5 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01tJ69sI1FJvd2LTZhQ_!!1080040467.png", "width": 20, "height": 29, "val": 6 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01IxNK7L1FJvd7m3ikX_!!1080040467.png", "width": 20, "height": 29, "val": 7 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01Nuwkhc1FJvd2TukRV_!!1080040467.png", "width": 20, "height": 29, "val": 8 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN017oU45x1FJvczwW9iE_!!1080040467.png", "width": 20, "height": 29, "val": 9 },
],
},
gameSource: {
playerInfo: {
<!-- showY:操作元素显示y坐标，不传或0 默认显示倒底部对齐 -->
src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01iH0HlQ1FJvd6AnRAG_!!1080040467.png", width: 338, height: 240, paddingLeft: 82, paddingRight: 50,showY: 0
},
barrierProbability: 1,//障碍物概率
barrierArr: [
// changePlayer:吃掉此元素 改变player显示 {hidePlayer:是否隐藏默认player（如果隐藏了，不能拖动player，必须等player显示后才能拖动） boomArr:改变后的player元素，可以放序列帧 fadeTime：消失时间}
// rotationVal:旋转速度
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01d684o11FJvd7FNOyK_!!1080040467.png", width: 257, height: 256, bound: { left: 64, right: 64, top: 64, bottom: 64 }, rotation: true, rotationVal: 0.01 },//bound：障碍物触碰的边界 相对障碍物图片边界向指定方向缩进
],
energyProbability: 1,//能量概率
maxEnergyNum: 0,//限制最多能吃多少个能量
energyArr: [
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01cv2eBg1FJvd5bcNDR_!!1080040467.png", width: 134, height: 416, val: 1, showHeight: 0, probability: 1, bound: { left: 0, right: 0, top: 0, bottom: 100 }, tipType: "tipNumArr" },//bound：障碍物触碰的边界 相对障碍物图片边界向指定方向缩进
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN018DgizV1FJvd2NqSaE_!!1080040467.png", width: 144, height: 433, val: 1, showHeight: 0, probability: 1, bound: { left: 0, right: 0, top: 0, bottom: 100 }, tipType: "tipNumArr2" },//bound：障碍物触碰的边界 相对障碍物图片边界向指定方向缩进
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01Md46g81FJvd71mnby_!!1080040467.png", width: 142, height: 421, val: 1, showHeight: 0, probability: 1, bound: { left: 0, right: 0, top: 0, bottom: 100 }, tipType: "tipNumArr2" },//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-drop
speed="{{5}}"
max-speed="{{10}}"
dipX="{{0}}"
topDeg="{{0}}"
deg="{{0}}"
speed-step="{{0}}"
speed-step-height="{{200}}"
barrier-height-step="{{0}}"
barrier-max-height="{{0.5}}"
no-over="{{!true}}"
player-bottom="{{0}}"
firstShowHeight="{{0}}"
gameSource="{{gameSource}}"
score-pos="{{scorePos}}"
time-pos="{{timePos}}"
isTimeOverAnimal="{{!true}}"
playerAnimal="{{false}}"
game-col="{{3}}"
isVertical="{{!true}}"
playerActive="{{!true}}"
onRef="onRef"
onFinish="onFinish"
onInitDone="onInitDone"
onUpdate="onUpdate"
/>