game-melon2
v0.0.3
Published
``` npm install game-melon ```
Readme
合成
游戏
安装
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)点击掉落后生成下一个元素的时间，同时也是检测是否过生命线的时间。（如果设置太小，可能存在刚掉落的时候，就检测还没过生命线，视为游戏结束）
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: 3,//最大顶部默认球下标
noCheckMax: !true,//不限制最大值
defCenterY: 200,//顶部生成元素Y轴中心坐标，默认Y轴中心点
alignType: "bottom",//相对defCenterY位置对其方式 默认center:中心点对其 top:顶部对齐 bottom:底部对齐
lifeLine: 200,//生命线，超过了就结束游戏
warnHeight: 100,//危险区域，距离结束线距离，在此范围内，就回调危险提示方法
imgArr: [
//球形
// { 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: 5, src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01F98LJc1FJvecsD8j5_!!1080040467.png", audioName: "default", tipMoveY: 20, probability: 200 },
{ type: 1, shape: "circle", val: 10, src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01CiKkTU1FJvebLoI9K_!!1080040467.png", audioName: "default", tipMoveY: 20, probability: 200 },
{ type: 2, shape: "circle", val: 15, src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01UxZDgl1FJvecnyAks_!!1080040467.png", audioName: "default", tipMoveY: 20, probability: 100 },
{ type: 3, shape: "circle", val: 20, src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01r3yZVl1FJveU5uU1v_!!1080040467.png", audioName: "default", tipMoveY: 20, probability: 20 },
{ type: 4, shape: "circle", val: 25, src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01wVWOWA1FJveU5uDR5_!!1080040467.png", audioName: "default", tipMoveY: 20, probability: 5 },
{ type: 5, shape: "circle", val: 30, src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01NYZBAj1FJveanrti3_!!1080040467.png", audioName: "default", tipMoveY: 20, probability: 5 },
{ type: 6, shape: "circle", val: 35, src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01zH3MKw1FJveeT5jNU_!!1080040467.png", audioName: "default", tipMoveY: 20, probability: 1 },
{ type: 7, shape: "circle", val: 40, src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01aU013f1FJveanueBb_!!1080040467.png", audioName: "default", tipMoveY: 20, probability: 1 },
{ type: 8, shape: "circle", val: 45, src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN017PsBhX1FJveanrxrJ_!!1080040467.png", audioName: "default", tipMoveY: 20, probability: 1 },
{ type: 9, shape: "circle", val: 50, src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01zRnJsq1FJvekNufQL_!!1080040467.png", audioName: "default", tipMoveY: 20, probability: 1 },
{ type: 10, shape: "circle", val: 0, noCheckMax: true, src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01jJxe5T1FJvedO9Cq3_!!1080040467.png", tipMoveY: 20, fadeTime: 1, probability: 100 },
],
tipScorePos: {
fadeTime: 0.5,//消失时间
numOffset: -4,//数字两边空白太多，增加偏移量
scale: "1",
numArr: [
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01RZat2I1FJvei4bUIb_!!1080040467.png", val: "+" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01PDjsuC1FJveh26Yhy_!!1080040467.png", val: 0 },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01TdzVG41FJvedO8fVU_!!1080040467.png", val: 1 },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01293Q9o1FJvedO6zYM_!!1080040467.png", val: 2 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01UXFftd1FJvegWzeQR_!!1080040467.png", val: 3 },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN019y6OJf1FJvei4bcc4_!!1080040467.png", val: 4 },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01zWid8z1FJveansIbe_!!1080040467.png", val: 5 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01HfaURp1FJvegX0BhN_!!1080040467.png", val: 6 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01awnjlu1FJvegX0OAJ_!!1080040467.png", val: 7 },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01PoCH6v1FJveh24gGG_!!1080040467.png", val: 8 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01Ah8Rg31FJveU5twjv_!!1080040467.png", val: 9 },
],
},
audioObj: {
default: { audioSrc: "http://isv-vod.alibabausercontent.com/RGjZJMdpNgKGVQeEyw8/6cnFJEwIj5AGWCcBlTf?auth_key=1616480580-0-0-d0561ac34c6e55e1502b94b0bf20216f&w=0&h=0&e=sd&t=212b035516162213804197727e85ac" },//默认音效
},
},
},
onLoad() {
},
/**游戏切换 */
switchFun() {
this.setData({ gameshow: !this.data.gameshow });
},
/**游戏开始 */
beginFun() {
this.gameComponent.onEvent("start");
},
resetFun() {
this.gameComponent.onEvent("reset");
},
drupFun() {
this.gameComponent.onEvent("drup");
},
gameOver() {
this.gameComponent.onEvent("gameOver");
},
refreshFun() {
// 刷新即将掉落的元素
this.gameComponent.onEvent("refresh");
},
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: "危险了，快使用道具解除危险" })
},
});- xaml
<view class="game-box" a:if="{{!!gameshow}}">
<!--
onInitDone：游戏组件初始化完成
onUpdate：游戏合成回调
onGameOver：游戏结束回调
onDrupCallBack：敲除技能回调
onRefreshCallBack：刷新技能回调
onWarnCallBack：进入危险区域回调
-->
<game gameSource="{{gameSource}}"
onRef="onRef"
onInitDone="onInitDone"
onUpdate="onUpdate"
onGameOver="onGameOver"
onDrupCallBack="onDrupCallBack"
onRefreshCallBack="onRefreshCallBack"
onWarnCallBack="onWarnCallBack"
/>
<view class="line1"></view>
<view class="line2"></view>
</view>
<!-- end -->
<view class="btn-box">
<view class="btn_css" onTap="beginFun">开始</view>
<view class="btn_css" onTap="gameOver">结束</view>
<view class="btn_css" onTap="switchFun">切换</view>
<view class="btn_css" onTap="resetFun">重玩</view>
<view class="btn_css" onTap="refreshFun">刷新</view>
<view class="btn_css" onTap="drupFun">敲除</view>
</view>- 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);
}