0.0.8 • Published 2 years ago
game-hltn v0.0.8
game-hltn
游戏
安装
npm install game-hltn使用
必须开启 "enableSkia": "true"- json
{
"usingComponents": {
"game": "game-hltn/hltn"
}
}- mini.project.json
{
"node_modules_es6_whitelist": [
"common-game"
]
}- js
Page({
data: {
gameSource: {
// showBasePos: true,//元素现在在成功后的位置
// showRect: { x: 0, y: 0, width: 750, height: 800 },//游戏元素显示区域
items: [
{
name: "香水",
touchTime: 100,//长按指定时间，执行直接降落到底部
aniMove: !true,//true:动画下降 false:一步到位
noMoveOut: true,//true:不松开手判断 false:松开手才去判断
singleMoveV: 40,//每格宽度，也是移动距离
delayTime: 300,//移动一格间隔时间
bgInfoAlpha: 0.4,//背景透明度
bgInfo: [
[0, 0, 0, 2, 2, 2, 2, 0, 0, 0],
[0, 0, 0, 0, 2, 2, 0, 0, 0, 0],
[0, 0, 0, 2, 2, 2, 2, 0, 0, 0],
[0, 8, 8, 3, 3, 3, 3, 8, 8, 0],
[6, 4, 4, 4, 4, 4, 4, 4, 4, 7],
[6, 4, 4, 4, 4, 4, 4, 4, 4, 7],
[6, 4, 2, 2, 2, 2, 2, 2, 4, 7],
[6, 4, 2, 2, 2, 2, 2, 2, 4, 7],
[6, 4, 4, 4, 4, 4, 4, 4, 4, 7],
[6, 4, 4, 4, 4, 4, 4, 4, 4, 7],
[6, 5, 5, 5, 5, 5, 5, 5, 5, 7],
[6, 5, 5, 5, 5, 5, 5, 5, 5, 7],
],//背景
baseRow: 0,
baseCol: 1,
helpLine: { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01KeBXmN1FJvg1PKYee_!!1080040467.png", offset: { x: 38, y: 0 }, scale: { x: 1, y: 1 } },//虚线辅助线(是根据bginfo的位置来放置的)
showArr: [
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01NUdWqT1FJvfocBX6J_!!1080040467.png", name: "def", val: 1, alpha: 0 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01nTtS4P1FJvfqB74L3_!!1080040467.png", name: "black", val: 2 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN019g7mn91FJvfqB4aVH_!!1080040467.png", name: "blackred", val: 3 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN014hf8qw1FJvfluYqVD_!!1080040467.png", name: "red", val: 4 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01yR9rK91FJvfvy2w2P_!!1080040467.png", name: "white", val: 5 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01oAz5Nj1FJvfpFMaay_!!1080040467.png", name: "leftwhite", val: 6 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01oSMMQy1FJvfqB84jI_!!1080040467.png", name: "rightwhite", val: 7 },
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01fqFx951FJvfuzoupz_!!1080040467.png", name: "bottomred", val: 8 },
],
blocks: [//方块
{
val: 10,
baseCol: 0,
baseRow: 10,
items: [
[5, 5, 5, 5, 5, 5, 5, 5],
[5, 5, 5, 5, 5, 5, 5, 5],
]
},
{
val: 10,
baseCol: 0,
baseRow: 8,
items: [
[4, 4, 4, 4, 4, 4, 4, 4],
[4, 4, 4, 4, 4, 4, 4, 4],
]
},
{
val: 10,
baseCol: 0,
baseRow: 6,
items: [
[4, 2, 2, 2],
[4, 2, 2, 2],
]
},
{
val: 10,
baseCol: 4,
baseRow: 6,
items: [
[2, 2, 2, 4],
[2, 2, 2, 4],
]
},
{
val: 10,
baseCol: 0,
baseRow: 4,
items: [
[4, 4, 4, 4, 4, 4, 4, 4],
[4, 4, 4, 4, 4, 4, 4, 4],
]
},
{
val: 10,
baseCol: 2,
baseRow: 2,
items: [
[2, 2],
[2, 2],
]
},
{
val: 10,
baseCol: 4,
baseRow: 2,
items: [
[2, 2],
[2, 2],
]
},
{
val: 10,
baseCol: 2,
baseRow: 0,
items: [
[2, 2, 2, 2],
[0, 2, 2, 0],
]
},
]
},
{
name: "口红",
touchTime: 100,//长按指定时间，执行直接降落到底部
aniMove: !true,//true:动画下降 false:一步到位
noMoveOut: true,//true:不松开手判断 false:松开手才去判断
singleMoveV: 20,//每格宽度，也是移动距离
delayTime: 300,//移动一格间隔时间
bgInfoAlpha: 0.4,//背景透明度
bgInfo: [
[0, 0, 0, 0, 2, 0, 0],
[0, 0, 0, 2, 2, 0, 0],
[0, 0, 2, 2, 2, 0, 0],
[0, 0, 2, 2, 2, 0, 0],
[0, 0, 2, 2, 2, 0, 0],
[0, 0, 2, 2, 2, 0, 0],
[0, 0, 2, 2, 2, 0, 0],
[0, 0, 2, 2, 2, 0, 0],
[0, 3, 3, 3, 3, 3, 0],
[0, 3, 3, 3, 3, 3, 0],
[0, 3, 3, 3, 3, 3, 0],
[0, 3, 3, 3, 3, 3, 0],
[0, 3, 3, 3, 3, 3, 0],
[0, 3, 3, 3, 3, 3, 0],
[0, 3, 3, 3, 3, 3, 0],
[0, 3, 3, 3, 3, 3, 0],
[2, 2, 2, 2, 2, 2, 2],
[2, 3, 2, 2, 2, 3, 2],
[3, 2, 3, 2, 3, 2, 3],
[3, 2, 2, 3, 2, 2, 3],
[2, 3, 3, 3, 3, 3, 2],
[2, 2, 2, 2, 2, 2, 2],
[2, 2, 2, 2, 2, 2, 2],
[2, 2, 2, 2, 2, 2, 2],
[2, 2, 2, 2, 2, 2, 2],
[2, 2, 2, 2, 2, 2, 2],
[2, 2, 2, 2, 2, 2, 2],
[2, 2, 2, 2, 2, 2, 2],
[2, 2, 2, 2, 2, 2, 2],
[3, 3, 3, 3, 3, 3, 3],
],//背景
baseRow: 0,
baseCol: 0,
helpLine: { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01cs7BAb1FJvfxIp8jd_!!1080040467.png", offset: { x: 0, y: 0 } },//虚线辅助线(是根据bginfo的位置来放置的)
showArr: [
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01NUdWqT1FJvfocBX6J_!!1080040467.png", name: "def", val: 1, alpha: 0 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01hbihN21FJvfjkdOZF_!!1080040467.png", name: "red", val: 2 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01F1Kcns1FJvfpqSU70_!!1080040467.png", name: "yellow", val: 3 },
],
blocks: [//方块
{
val: 10,
baseCol: 0,
baseRow: 26,
items: [
[2, 2, 2],
[2, 2, 2],
[2, 2, 2],
[3, 3, 3],
]
},
{
val: 10,
baseCol: 3,
baseRow: 26,
items: [
[2, 2, 2, 2],
[2, 2, 2, 2],
[2, 2, 2, 2],
[3, 3, 3, 3],
]
},
{
val: 10,
baseCol: 0,
baseRow: 22,
items: [
[2, 2, 2],
[2, 2, 2],
[2, 2, 2],
[2, 2, 2],
]
},
{
val: 10,
baseCol: 3,
baseRow: 22,
items: [
[2, 2, 2, 2],
[2, 2, 2, 2],
[2, 2, 2, 2],
[2, 2, 2, 2],
]
},
{
val: 10,
baseCol: 0,
baseRow: 16,
items: [
[2, 2, 2, 2, 2, 2, 2],
[2, 3, 2, 2, 2, 3, 2],
[3, 2, 3, 2, 3, 2, 3],
[3, 2, 2, 3, 2, 2, 3],
[2, 3, 3, 3, 3, 3, 2],
[2, 2, 2, 2, 2, 2, 2],
]
},
{
val: 10,
baseCol: 1,
baseRow: 12,
items: [
[2, 2, 2, 2, 2],
[2, 2, 2, 2, 2],
[2, 2, 2, 2, 2],
[2, 2, 2, 2, 2],
]
},
{
val: 10,
baseCol: 1,
baseRow: 8,
items: [
[2, 2, 2, 2, 2],
[2, 2, 2, 2, 2],
[2, 2, 2, 2, 2],
[2, 2, 2, 2, 2],
]
},
{
val: 10,
baseCol: 2,
baseRow: 0,
items: [
[0, 0, 3],
[0, 3, 3],
[3, 3, 3],
[3, 3, 3],
[3, 3, 3],
[3, 3, 3],
[3, 3, 3],
[3, 3, 3],
]
},
]
},
{
name: "气垫",
touchTime: 100,//长按指定时间，执行直接降落到底部
aniMove: !true,//true:动画下降 false:一步到位
noMoveOut: true,//true:不松开手判断 false:松开手才去判断
singleMoveV: 30,//每格宽度，也是移动距离
delayTime: 300,//移动一格间隔时间
bgInfoAlpha: 0.4,//背景透明度
bgInfo: [
[0, 0, 0, 0, 3, 3, 3, 3, 3, 0, 0, 0, 0],
[0, 0, 0, 3, 2, 2, 2, 2, 2, 3, 0, 0, 0],
[0, 0, 3, 2, 2, 2, 2, 2, 2, 2, 3, 0, 0],
[0, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 0],
[3, 2, 2, 3, 3, 3, 2, 3, 3, 3, 2, 2, 3],
[3, 2, 3, 2, 3, 2, 2, 2, 3, 2, 3, 2, 3],
[3, 2, 3, 2, 2, 3, 2, 3, 2, 2, 3, 2, 3],
[3, 2, 3, 2, 2, 2, 3, 2, 2, 2, 3, 2, 3],
[3, 2, 2, 3, 3, 3, 3, 3, 3, 3, 2, 2, 3],
[0, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 0],
[0, 0, 3, 2, 2, 2, 2, 2, 2, 2, 3, 0, 0],
[0, 0, 0, 3, 2, 2, 2, 2, 2, 3, 0, 0, 0],
[0, 0, 0, 0, 3, 3, 3, 3, 3, 0, 0, 0, 0],
],//背景
baseRow: 0,
baseCol: 0,
helpLine: { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01ZMKPAM1FJvg1PYr1D_!!1080040467.png", scale: { x: 1, y: 1 }, offset: { x: 0, y: 0 } },//虚线辅助线(是根据bginfo的位置来放置的)
showArr: [
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01NUdWqT1FJvfocBX6J_!!1080040467.png", name: "def", val: 1, alpha: 0 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01hbihN21FJvfjkdOZF_!!1080040467.png", name: "red", val: 2 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01F1Kcns1FJvfpqSU70_!!1080040467.png", name: "yellow", val: 3 },
],
blocks: [//方块
{
val: 10,
baseCol: 3,
baseRow: 11,
items: [
[3, 2, 2, 2, 2, 2, 3],
[0, 3, 3, 3, 3, 3, 0],
]
},
{
val: 10,
baseCol: 1,
baseRow: 9,
items: [
[3, 2, 2, 2, 2, 2],
[0, 3, 2, 2, 2, 2],
]
},
{
val: 10,
baseCol: 7,
baseRow: 9,
items: [
[2, 2, 2, 2, 3],
[2, 2, 2, 3, 0],
]
},
{
val: 10,
baseCol: 0,
baseRow: 4,
items: [
[3, 2, 2, 3, 3, 3, 2],
[3, 2, 3, 2, 3, 2, 2],
[3, 2, 3, 2, 2, 3, 2],
[3, 2, 3, 2, 2, 2, 3],
[3, 2, 2, 3, 3, 3, 3],
]
},
{
val: 10,
baseCol: 7,
baseRow: 4,
items: [
[3, 3, 3, 2, 2, 3],
[2, 3, 2, 3, 2, 3],
[3, 2, 2, 3, 2, 3],
[2, 2, 2, 3, 2, 3],
[3, 3, 3, 2, 2, 3],
]
},
{
val: 10,
baseCol: 1,
baseRow: 2,
items: [
[0, 3, 2, 2, 2, 2],
[3, 2, 2, 2, 2, 2],
]
},
{
val: 10,
baseCol: 7,
baseRow: 2,
items: [
[2, 2, 2, 3, 0],
[2, 2, 2, 2, 3],
]
},
{
val: 10,
baseCol: 3,
baseRow: 0,
items: [
[0, 3, 3, 3, 3, 3, 0],
[3, 2, 2, 2, 2, 2, 3],
]
},
]
},
],
tipScorePos: {
fadeTime: 0.5,//消失时间
numOffset: -4,//数字两边空白太多，增加偏移量
x: 750 / 2,
y: 200,
scale: "1",
numArr: [
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01I4V9J21FJvfpDmyp0_!!1080040467.png", "val": "0" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01d1r2GG1FJvfpWKG2c_!!1080040467.png", "val": "1" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN0163Edez1FJvfoHkATz_!!1080040467.png", "val": "2" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01lixWDf1FJvflXv8ej_!!1080040467.png", "val": "3" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01THpJoL1FJvfei7TQ5_!!1080040467.png", "val": "4" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01iRpC6W1FJvfpWK7iW_!!1080040467.png", "val": "5" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01qBNc6b1FJvfvi1cSE_!!1080040467.png", "val": "6" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01MreOj31FJvfsBACVY_!!1080040467.png", "val": "7" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01xo0AsQ1FJvfrgQebl_!!1080040467.png", "val": "8" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01EDkgVC1FJvfv07W1w_!!1080040467.png", "val": "9" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01f2yoUu1FJvfnitz2C_!!1080040467.png", "val": "+" },
],
},
}
},
onLoad() {
},
isShowFun() {
this.setData({
showGame: !this.data.showGame
})
},
// 组件主动公开方法----------
beginFun() {
// 开始游戏
this.gameComponent.onEvent("start");
},
resetFun(e) {
// 重置游戏
this.gameComponent.onEvent("reset");
},
moveFun(e) {
// 移动
let { currentTarget: { dataset: { type } } } = e;
this.gameComponent.onEvent("move", type);
},
rotateFun() {
// 旋转
this.gameComponent.onEvent("rotate");
},
downFun() {
// 直接降落到底部
this.gameComponent.onEvent("downFun");
},
// 组件回调方法------------------
onRef(game) {
this.gameComponent = game;
console.log("进入游戏")
},
onInitDone() {
// my.alert({
// content: "游戏初始化完成"
// })
// 初始化game
this.gameComponent.onEvent("reset", 2);
this.beginFun();
},
onUpdate(ops) {
// { totalScore: 0, imgObj: { } }
console.log(ops)
},
onGameOver(totalScore) {
console.log("游戏结束：", totalScore)
}
});- xaml
<view class="pageBox">
<view class="gameBox" a:if="{{!showGame}}">
<game gameSource="{{gameSource}}" onRef="onRef" onInitDone="onInitDone" onUpdate="onUpdate" onGameOver="onGameOver" />
</view>
<view onTap="beginFun" style="position:relative;z-index: 10; float:left;">开始</view>
<view onTap="resetFun" style="position:relative;z-index: 10; float:left;">重置游戏</view>
<view onTap="isShowFun" style="position:relative;z-index: 10; float:left;">切换</view>
<view style="width: 100%;overflow:hidden;"></view>
<view onTap="moveFun" data-type="left" class="btn1" style="background-image:url('https://img.alicdn.com/imgextra/i2/1080040467/O1CN01bFXxwa1FJvfrgNhc2_!!1080040467.png');">左</view>
<view onTap="rotateFun" class="btn1" style="background-image:url('https://img.alicdn.com/imgextra/i4/1080040467/O1CN01mNwDb11FJvfrgQFcC_!!1080040467.png');">旋转</view>
<view onTap="moveFun" data-type="right" class="btn1" style="background-image:url('https://img.alicdn.com/imgextra/i3/1080040467/O1CN01TJk6rU1FJvfoHiM9a_!!1080040467.png');">右</view>
</view>-acss
.gameBox{
position: relative;
width: 750rpx;
height: 800rpx;
background-color: #ccc;
}
.btn1{
float: left;
width: 152rpx;
height: 85rpx;
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
text-indent: -99px;
overflow: hidden;
}