game-llk
v0.0.9
Published
``` npm install game-llk ```
Downloads
25
Readme
连连看
游戏
安装
npm install game-llk使用
必须开启 "enableSkia": "true"- json
{
"usingComponents": {
"game": "game-llk/llk"
}
}- mini.project.json
{
"node_modules_es6_whitelist": [
"common-game"
]
}- js
Page({
data: {
gameSource: {
row: 6,
col: 6,
boxPadding: {//游戏容器
left: 39,
top: 39,
right: 39,
bottom: 39
},
boundIndent: {//边界连线向内缩进距离
left: 30,
right: 30,
top: 30,
bottom: 30
},
itemPadding: {//每个元素
left: 0,
top: 0,
right: 0,
bottom: 0
},
curLevel: 1,
items: [//如果在item上有val，则按照此val计算分数，否则判断lines的分数计算，如果都没有，则分数为0
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN013GIXQn1FJveTTxHdY_!!1080040467.png", val: 1, active: { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN016fg8rJ1FJvePWsChC_!!1080040467.png" }, probability: 1, },//levels: [1, 2, 3, 4]
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01hvPhv11FJveNJFD0H_!!1080040467.png", val: 2, active: { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01gMTLCs1FJveMoldk6_!!1080040467.png" }, probability: 1, },//levels: [1, 2, 3, 4]
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01UgUorI1FJveUBYJf8_!!1080040467.png", val: 3, active: { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01wWlJoO1FJveQv5WBm_!!1080040467.png" }, probability: 1, },//levels: [1, 3, 4]
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01MQyfkQ1FJvePWrrti_!!1080040467.png", val: 4, active: { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01H3ZBSz1FJveIjNmKx_!!1080040467.png" }, probability: 1, },//levels: [1, 4]
// { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01DXJ5A21FJveMlhqgu_!!1080040467.png", val: 5, active: { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01IG0EHp1FJveOMrpSa_!!1080040467.png" }, probability: 1, },//levels: [1, 4]
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01ocGPsY1FJveOPdbEd_!!1080040467.png", val: 5, active: { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN012eTNDG1FJveXjVmuh_!!1080040467.png" }, probability: 1, },//levels: [1, 4]
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01eKk3tr1FJveKmexjm_!!1080040467.png", val: 6, active: { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN0142kmy61FJveKmcLY3_!!1080040467.png" }, probability: 1, },//levels: [1, 4]
],
lineOps: {
showTime: 0.5,//线条显示时长 s
},
lines: [
{ name: "hengxian", detail: "横线", src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01qfytIn1FJveTTet82_!!1080040467.png", val: 10 },
{ name: "shuxian", detail: "竖线", src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01GmzAnX1FJveNIxowx_!!1080040467.png", val: 10 },
{ name: "to_up", detail: "向上出去", src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01eZenYy1FJveMmLFyr_!!1080040467.png", val: 0 },
{ name: "to_down", detail: "向下出去", src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01kn0muA1FJveKBZblI_!!1080040467.png", val: 0 },
{ name: "to_left", detail: "向左出去", src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01BjQfjw1FJveKnIIs4_!!1080040467.png", val: 0 },
{ name: "to_right", detail: "向右出去", src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01lWkbC21FJvePXWxB8_!!1080040467.png", val: 0 },
{ name: "left_top", detail: "左上角", src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN017PWZ1I1FJveQPu2kK_!!1080040467.png", val: 10 },
{ name: "left_bottom", detail: "左下角", src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01v9xZiR1FJveSdTXpZ_!!1080040467.png", val: 10 },
{ name: "right_top", detail: "右上角", src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01U8JJZU1FJveMoS6ag_!!1080040467.png", val: 10 },
{ name: "right_bottom", detail: "右下角", src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01GW5yYA1FJveOMbJWq_!!1080040467.png", val: 10 },
],
timePos1: {
align: "left",
x: 20,
y: 10,
time: 20,//倒计时时间
// 时间数字图片 0 - 9
before: { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01tCqjHA1FJvdzU6xZg_!!1080040467.png", width: 147, height: 52 },
numOffset: -10,//数字两边空白太多，增加偏移量
numArr: [
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01bubGmn1FJvdxLuRaj_!!1080040467.png", "width": "21", "height": "52", val: 0 },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01Py4MSA1FJvdv0Du6S_!!1080040467.png", "width": "7", "height": "52", val: 1 },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01DRvX2d1FJvdzU6QHO_!!1080040467.png", "width": "21", "height": "52", val: 2 },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01qRhJhq1FJvdxLvJes_!!1080040467.png", "width": "22", "height": "52", val: 3 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01Z8qVEu1FJvdy1dGkt_!!1080040467.png", "width": "25", "height": "52", val: 4 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01VUvFID1FJvdsMS99K_!!1080040467.png", "width": "22", "height": "52", val: 5 },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01A5yK8K1FJvdsrNRSo_!!1080040467.png", "width": "21", "height": "52", val: 6 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN015xYfUO1FJvdsLcWbF_!!1080040467.png", "width": "18", "height": "52", val: 7 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01ulLTFh1FJvdjhWkDS_!!1080040467.png", "width": "21", "height": "52", val: 8 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01C4VeeR1FJvdsMRH53_!!1080040467.png", "width": "21", "height": "52", val: 9 },
],
},
scorePos1: {
align: "right",
x: 736,
y: 10,
// 分数数字图片 0 - 9
before: { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01Ox2Ti81FJvdtqSll1_!!1080040467.png", width: 153, height: 52 },
numOffset: -10,//数字两边空白太多，增加偏移量
numArr: [
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01iRV0iM1FJvdjhmBgn_!!1080040467.png", "width": "30", "height": "52", val: 0 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01dTBzlc1FJvdzUPM1U_!!1080040467.png", "width": "22", "height": "52", val: 1 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01s15kV61FJvdv0WIbX_!!1080040467.png", "width": "33", "height": "52", val: 2 },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01PNfAgY1FJvdoPKWZO_!!1080040467.png", "width": "33", "height": "52", val: 3 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01Qi0Og31FJvdjhmK04_!!1080040467.png", "width": "32", "height": "52", val: 4 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01cWUbwH1FJvdzUOsup_!!1080040467.png", "width": "32", "height": "52", val: 5 },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01YTJovr1FJvdoPMKoy_!!1080040467.png", "width": "33", "height": "52", val: 6 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01EOvUkl1FJvdwJmsKV_!!1080040467.png", "width": "28", "height": "52", val: 7 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01iL8XnH1FJvdy1xTav_!!1080040467.png", "width": "31", "height": "52", val: 8 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01o4Jo6D1FJvdtqSIeN_!!1080040467.png", "width": "33", "height": "52", val: 9 },
],
},
}
},
onLoad() {
},
// 组件主动公开方法----------
beginFun() {
// 开始游戏
this.gameComponent.onEvent("start");
},
stopFun() {
// 结束游戏
this.gameComponent.onEvent("stop");
},
resetFun() {
// 重置游戏
// let level = parseInt(Math.random() * 4 + 1);
// console.log("level:", level)
// this.gameComponent.onEvent("reset", { curLevel: level });
this.gameComponent.onEvent("reset");
},
refreshFun() {
// 刷新游戏 重新排列
this.gameComponent.onEvent("refresh");
},
pauseFun() {
// 暂停游戏 第一次暂停，再次点击就恢复
this.gameComponent.onEvent("pause");
},
// 组件回调方法------------------
onRef(game) {
this.gameComponent = game;
console.log("进入游戏")
},
onInitDone() {
// my.alert({
// content: "游戏初始化完成"
// })
},
onUpdate(ops) {
// { totalScore: 0, imgObj: { } }
// startSprite endSprite
console.log(ops)
console.log(ops.endSprite.x, ops.endSprite.y)
},
onGameOver(totalScore) {
console.log(totalScore)
this.resetFun();
},
});- xaml
//游戏容器高度 目前设计高的尺寸为 width: 750rpx;height: 726rpx;
<game gameSource="{{gameSource}}"
onRef="onRef"
onInitDone="onInitDone"
onUpdate="onUpdate"
onGameOver="onGameOver"
/>
<view onTap="beginFun" style="position:relative;z-index: 10;">开始</view>
<view onTap="stopFun" style="position:relative;z-index: 10;">结束</view>
<view onTap="resetFun" style="position:relative;z-index: 10;">重置</view>
<view onTap="refreshFun" style="position:relative;z-index: 10;">刷新</view>
<view onTap="pauseFun" style="position:relative;z-index: 10;">暂停</view>