``` npm install game-melon ```
npm install game-melon
npm install game-melon
`
##### 使用
`
必须开启 "enableSkia": "true"
`
- json
`
{
"usingComponents": {
"game": "game-melon/melon"
}
}
`
- mini.project.json
`
{
"node_modules_es6_whitelist": [
"common-game"
]
}
`
- js
`
Page({
data: {
gameshow: true,
gameSource: {
gravityX: 0,//x轴重力（小于0：x轴偏左）
gravityY: 100,//y轴重力（小于0：Y轴偏上）
fixDef: {
density: 0.000000001,//密度
friction: 1.0,//摩擦力（0-1）0：没有摩擦力
restitution: 0.2,//0.2;//回复力（0-1）0：不会反弹
fixedRotation: true,//是否禁止刚体旋转 true:允许旋转
},
hechengInterval: 500,//两个合成间隔时间 (毫秒)
renderNextTime: 1,//单位(s)点击掉落后生成下一个元素的时间，同时也是检测是否过生命线的时间。（如果设置太小，可能存在刚掉落的时候，就检测还没过生命线，视为游戏结束）
tipPosX: 400,//提示时，球移动的位置
tipPosXMoveDuration: 0.1,//移动到提示位置时间
tipAni: { // 提示序列帧
width: 100,
height: 800,
boomSpeed: 0.1,//速度
offsetBottom: 0,
anchor: { x: 0.5, y: 1.1 },
srcArr: [
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01CccH3q1FJvfVXP6GH_!!1080040467.png", "name": "箭头020000.png", "width": "250", "height": "750" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01jwALHw1FJvfW5TQAt_!!1080040467.png", "name": "箭头020001.png", "width": "250", "height": "750" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01F17hsw1FJvfg8ZXd1_!!1080040467.png", "name": "箭头020002.png", "width": "250", "height": "750" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01Z7ki8h1FJvfZhRqPQ_!!1080040467.png", "name": "箭头020003.png", "width": "250", "height": "750" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01SXahTT1FJvfdkiw5S_!!1080040467.png", "name": "箭头020004.png", "width": "250", "height": "750" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN014lsdMy1FJvfVXNtSI_!!1080040467.png", "name": "箭头020005.png", "width": "250", "height": "750" },
]
},
world: [
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN011tf1yN1FJvbf2Giw2_!!1080040467.png", direction: "bottom", show: !true, },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN011tf1yN1FJvbf2Giw2_!!1080040467.png", direction: "top", show: !true, },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01289gtt1FJvbbeuLLr_!!1080040467.png", direction: "left", show: !true, },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01289gtt1FJvbbeuLLr_!!1080040467.png", direction: "right", show: !true, }
],
paddingLeft: 0,//18.5,
paddingRight: 0,//18.5,
curDefIdx: 0,//最大顶部默认球下标，相对imgArr数组
maxDefIdx: 1,//最大顶部默认球下标
noCheckMax: !true,//不限制最大值
defCenterY: 200,//顶部生成元素Y轴中心坐标，默认Y轴中心点
alignType: "bottom",//相对defCenterY位置对其方式 默认center:中心点对其 top:顶部对齐 bottom:底部对齐
lifeLine: 250,//生命线，超过了就结束游戏
warnHeight: 100,//危险区域，距离结束线距离，在此范围内，就回调危险提示方法
// 鎏金瓶-成分球
/* imgArr: [
//球形
// noMerge: true//不合成
// { type: 0, shape: "circle", val: 5, src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01UL03sF1FJvd8YzHiG_!!1080040467.png", width: 750, height: 50, scoreImg: { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01SJk6cq1FJvdDwlMQr_!!1080040467.png", width: 57, height: 29 } },
{ type: 0, shape: "circle", val: 1, src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01qrw0aC1FJvfYLl2Rn_!!1080040467.png", tipMoveY: 20, probability: 200, tipMoveX: 80, tipMoveY: 50 },
{ type: 1, shape: "circle", val: 2, src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01OqRiX21FJvfZqrrXs_!!1080040467.png", tipMoveY: 20, probability: 200, tipMoveX: 80, tipMoveY: 50 },
{ type: 2, shape: "circle", val: 3, src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01zrzhrl1FJvfMVmAXL_!!1080040467.png", tipMoveY: 20, probability: 100, tipMoveX: 80, tipMoveY: 50 },
{ type: 3, shape: "circle", val: 5, src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01NvrbYY1FJvfXCfC6m_!!1080040467.png", tipMoveY: 20, probability: 20, tipMoveX: 80, tipMoveY: 50 },
{ type: 4, shape: "circle", val: 180, noCheckMax: !true, src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN014yC5iW1FJvfaweDHl_!!1080040467.png", tipMoveY: 20, fadeTime: 1, probability: 5, tipMoveX: 80, tipMoveY: 50 },
], */
// 眼霜-成分球
/* imgArr: [
//球形
// noMerge: true//不合成
// { type: 0, shape: "circle", val: 5, src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01UL03sF1FJvd8YzHiG_!!1080040467.png", width: 750, height: 50, scoreImg: { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01SJk6cq1FJvdDwlMQr_!!1080040467.png", width: 57, height: 29 } },
{ type: 0, shape: "circle", val: 1, src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN014b0enZ1FJvfVRr2rd_!!1080040467.png", tipMoveY: 20, probability: 200, tipMoveX: 80, tipMoveY: 50 },
{ type: 1, shape: "circle", val: 2, src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01aLK7F51FJvfRD7DJB_!!1080040467.png", tipMoveY: 20, probability: 200, tipMoveX: 80, tipMoveY: 50 },
{ type: 2, shape: "circle", val: 3, src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01uBgwVu1FJvfWtnAii_!!1080040467.png", tipMoveY: 20, probability: 100, tipMoveX: 80, tipMoveY: 50 },
{ type: 3, shape: "circle", val: 5, src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01ajwQ8i1FJvfccwjnX_!!1080040467.png", tipMoveY: 20, probability: 20, tipMoveX: 80, tipMoveY: 50 },
{ type: 4, shape: "circle", val: 180, noCheckMax: !true, src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01mOpRhV1FJvfccxoLi_!!1080040467.png", tipMoveY: 20, fadeTime: 1, probability: 5, tipMoveX: 80, tipMoveY: 50 },
], */
// 灵芝水-成分球
imgArr: [
//球形
// noMerge: true//不合成
// { type: 0, shape: "circle", val: 5, src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01UL03sF1FJvd8YzHiG_!!1080040467.png", width: 750, height: 50, scoreImg: { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01SJk6cq1FJvdDwlMQr_!!1080040467.png", width: 57, height: 29 } },
{ type: 0, shape: "circle", val: 1, src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01GLb8io1FJvfVSPDnE_!!1080040467.png", tipMoveY: 20, probability: 200, tipMoveX: 80, tipMoveY: 50 },
{ type: 1, shape: "circle", val: 2, src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01qVwv4c1FJvfVzfBhN_!!1080040467.png", tipMoveY: 20, probability: 200, tipMoveX: 80, tipMoveY: 50 },
{ type: 2, shape: "circle", val: 3, src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01BlgFWh1FJvfccxPOy_!!1080040467.png", tipMoveY: 20, probability: 100, tipMoveX: 80, tipMoveY: 50 },
{ type: 3, shape: "circle", val: 5, src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01McqJDm1FJvfawfYRz_!!1080040467.png", tipMoveY: 20, probability: 20, tipMoveX: 80, tipMoveY: 50 },
{ type: 4, shape: "circle", val: 180, noCheckMax: !true, src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01LCMk4f1FJvfVzdZzX_!!1080040467.png", tipMoveY: 20, fadeTime: 1, probability: 5, tipMoveX: 80, tipMoveY: 50 },
],
light: { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01k0xqgV1FJvfblYgEz_!!1080040467.png", anchor: { x: 0.45, y: 0 }, y: 200 },
tipScorePos: {
fadeTime: 0.5,//消失时间
numOffset: 10,//数字两边空白太多，增加偏移量
scale: "1",
numArr: [
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01Oxnof71FJvfg0qfmZ_!!1080040467.png", "val": "+" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01vzdfso1FJvfVPeDYY_!!1080040467.png", "val": "0" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01lc45RN1FJvfc2kxJF_!!1080040467.png", "val": "1" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01XlN1j31FJvfVPfpKW_!!1080040467.png", "val": "2" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN019l1akD1FJvfZsdkgn_!!1080040467.png", "val": "3" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01XoiyF71FJvfYf7FtE_!!1080040467.png", "val": "4" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01h2129I1FJvfZsdYEJ_!!1080040467.png", "val": "5" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01ngcBmO1FJvfY819Zu_!!1080040467.png", "val": "6" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01z56dZf1FJvfPAW3mC_!!1080040467.png", "val": "7" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01murFCr1FJvfc2lh1y_!!1080040467.png", "val": "8" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01PRTu2M1FJvfYf8rgh_!!1080040467.png", "val": "9" },
],
},
},
},
onLoad() {
},
/*游戏切换 /
switchFun() {
this.setData({ gameshow: !this.data.gameshow });
},
/*游戏开始 /
beginFun() {
this.gameComponent.onEvent("start", "tip");
},
resetFun() {
this.gameComponent.onEvent("reset");
},
drupFun() {
this.gameComponent.onEvent("drup");
},
gameOver() {
this.gameComponent.onEvent("gameOver");
},
refreshFun() {
// 刷新即将掉落的元素
this.gameComponent.onEvent("refresh");
},
showBallFun() {
this.gameComponent.onEvent("showBall");
},
onRef(game) {
this.gameComponent = game;
},
/*游戏初始化完成/
onInitDone() {
console.log("initDone...")
// my.alert({
// content: "游戏初始化完成"
// })
this.beginFun();
},
onUpdate(item) {
/* my.alert({
content: item.totalScore
}); */
// item.compos：当前已合成的各阶段元素个数 [type_{typeVal}]:typeVal:对应imgArr对象的type值
// item.totalScore:总分数
// item.img:消除图片对象 对应imgArr里面元素
console.log(item)
this.setData({
totalScore: item.totalScore,
img: item.img,
})
},
/*游戏结束 /
onGameOver(item) {
// item.totalScore 总分数
// item.maxObj 最大合成对象 对应imgArr里面的元素
console.log(item)
let type;
try {
type = item.maxObj.type;
} catch (e) { }
my.alert({
content: "游戏结束：" + item.totalScore + "maxType:" + type
})
},
onDrupCallBack(img) {
// 敲除元素成功后回调
my.alert({ content: "敲除成功" })
},
onRefreshCallBack() {
// 刷新回调函数
my.alert({ content: "刷新成功" })
},
onWarnCallBack() {
// 进入危险区域回调方法
my.alert({ content: "危险了，快使用道具解除危险" })
},
onTipCallback(stepNum) {
console.log(stepNum)
}
});
`
- xaml
`
onInitDone="onInitDone"
onUpdate="onUpdate"
onGameOver="onGameOver"
onDrupCallBack="onDrupCallBack"
onRefreshCallBack="onRefreshCallBack"
onWarnCallBack="onWarnCallBack"
onTipCallback="onTipCallback"
/>
开始
结束
切换
重玩
刷新
敲除
显示
`
- acss
`
.game-box {
width: 650rpx;
height: 80vh;
position: absolute;
left: 50rpx;
top: 10vh;
background: #ccc;
}
.line1 {
position: absolute;
left: 0;
top: 200rpx;
width: 100%;
border-top: 1px solid blue;
}
.line2 {
position: absolute;
left: 0;
top: 200rpx;
width: 100%;
border-top: 1px solid red;
}
.btn-box {
width: 100vw;
height: 50px;
position: fixed;
left: 0;
bottom: 0;
display: flex;
}
.btn_css {
width: 40%;
height: 15px;
padding: 10px;
margin: 7px 10px;
text-align: center;
background-color: rgb(152, 233, 21);
}
``