0.0.11 • Published 2 years ago
game-hk v0.0.11
game-hk
游戏
安装
npm install game-hk使用
必须开启 "enableSkia": "true"- json
{
"usingComponents": {
"game": "game-hk/hk"
}
}- mini.project.json
{
"node_modules_es6_whitelist": [
"common-game"
]
}- js
Page({
data: {
gameSource: JSON.stringify({
ops: {
defY: 60,//顶部音符默认位置
stepTime: 0.6,//生成元素间隔时间
musicStartAlpha: 0.5,//音符移动时的透明度
maxRenderNum: [{ val: 1, probability: 1 }, { val: 2, probability: 10 }],//一次最多生成元素个数
moveDuration: 0.8,//音符从底部移动到顶部的时间
minValAni: 0.4,//执行动画的最小值
},
gameShowRect: { x: 0, y: 0, width: 750, height: 700 },//音符元素显示区域
items: [
{ "name": "蝴蝶结_active.png", bounds: { top: 107, bottom: 106 }, anchor: { x: 0.5, y: 0.5 }, dir: "left", "width": "325", "height": "307", x: 150, def: { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01lgT57T1FJvfdNyTSP_!!1080040467.png" }, active: { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01a5zesA1FJvfdxZrN1_!!1080040467.png" }, move: { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01HXzCQO1FJvfZnrvRe_!!1080040467.png" } },
{ "name": "音符_def.png", bounds: { top: 98, bottom: 103 }, anchor: { x: 0.5, y: 0.5 }, dir: "up", "width": "295", "height": "299", x: 307, def: { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01wjLJ8b1FJvfkc37ZM_!!1080040467.png" }, active: { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01lrbKXy1FJvfdPueHn_!!1080040467.png" }, move: { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01U7uA0y1FJvfZnp6oI_!!1080040467.png" } },
{ "name": "闪电_def.png", bounds: { top: 100, bottom: 100 }, anchor: { x: 0.5, y: 0.5 }, dir: "down", "width": "273", "height": "299", x: 453, def: { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN019biMrx1FJvfZ977k2_!!1080040467.png" }, active: { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01y0hddZ1FJvffABIFH_!!1080040467.png" }, move: { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN012whW8W1FJvfjaPMH0_!!1080040467.png" } },
{ "name": "五角星_def.png", bounds: { top: 114, bottom: 106 }, anchor: { x: 0.5, y: 0.5 }, dir: "right", "width": "317", "height": "339", x: 606, def: { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01T6bdPQ1FJvferkzoR_!!1080040467.png" }, active: { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01hjFpWi1FJvffACdOD_!!1080040467.png" }, move: { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01GaxPKs1FJvfjaSJEq_!!1080040467.png" } },
],
btns: {
up: { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01LRuku11FJvfeCZfjT_!!1080040467.png", dir: "up", bounds: { top: 100, right: 92, bottom: 92, left: 86 }, x: 750 / 2, y: 730, active: { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01tta6As1FJvfjtcOO3_!!1080040467.png" } },
down: { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01Zg2rjC1FJvff6TYa4_!!1080040467.png", dir: "down", bounds: { top: 124, right: 128, bottom: 130, left: 130 }, x: 750 / 2, y: 1134, active: { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01EVsGZs1FJvfdegIP9_!!1080040467.png" } },
left: { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01VIpfS01FJvfjAeQnU_!!1080040467.png", dir: "left", bounds: { top: 120, right: 113, bottom: 118, left: 120 }, x: 170, y: 936, active: { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01zFqDaw1FJvfdefcnv_!!1080040467.png" } },
right: { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01oEHFWm1FJvfZO57f0_!!1080040467.png", dir: "right", bounds: { top: 93, right: 82, bottom: 92, left: 76 }, x: 568, y: 936, active: { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01U3vObU1FJvfgZ9nXV_!!1080040467.png" } },
},
cat: {
up: {
width: 1000,
height: 1000,
boomSpeed: 0.4,//速度
offsetBottom: 0,
scale: { x: 0.5, y: 0.5 },
anchor: { x: 0.5, y: 0.5 },
x: 325,
y: 500,
srcArr: [
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01KqiOGs1FJvfdwXbyE_!!1080040467.png", "name": "1.png", "width": "1000", "height": "1000" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN012E9IvT1FJvflIJiV6_!!1080040467.png", "name": "2.png", "width": "1000", "height": "1000" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01aTpEzH1FJvfeqfKJf_!!1080040467.png", "name": "3.png", "width": "1000", "height": "1000" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01f0gGxy1FJvflILnNF_!!1080040467.png", "name": "4.png", "width": "1000", "height": "1000" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01Xgd2fU1FJvfho0T46_!!1080040467.png", "name": "5.png", "width": "1000", "height": "1000" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN011jUaLv1FJvfdOndMw_!!1080040467.png", "name": "6.png", "width": "1000", "height": "1000" },
]
},
right: {
width: 1000,
height: 1000,
boomSpeed: 0.4,//速度
offsetBottom: 0,
scale: { x: 0.5, y: 0.5 },
anchor: { x: 0.5, y: 0.5 },
x: 325,
y: 500,
srcArr: [
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01lbeaIW1FJvfkawF8F_!!1080040467.png", "name": "1.png", "width": "1000", "height": "1000" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01TiNdHq1FJvfkawF7z_!!1080040467.png", "name": "2.png", "width": "1000", "height": "1000" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01TICUju1FJvfdOmlMH_!!1080040467.png", "name": "3.png", "width": "1000", "height": "1000" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01XjqhKR1FJvfUOVKgV_!!1080040467.png", "name": "4.png", "width": "1000", "height": "1000" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01Tt7O7Y1FJvfkaxzCz_!!1080040467.png", "name": "5.png", "width": "1000", "height": "1000" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01wytKPI1FJvfho1LAn_!!1080040467.png", "name": "6.png", "width": "1000", "height": "1000" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01ug28Sq1FJvfbCtepT_!!1080040467.png", "name": "7.png", "width": "1000", "height": "1000" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01Y1buLZ1FJvfbCtK3r_!!1080040467.png", "name": "8.png", "width": "1000", "height": "1000" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01gm8RFj1FJvfeqgGYC_!!1080040467.png", "name": "9.png", "width": "1000", "height": "1000" },
]
},
left: {
width: 1000,
height: 1000,
boomSpeed: 0.4,//速度
offsetBottom: 0,
scale: { x: 0.5, y: 0.5 },
anchor: { x: 0.5, y: 0.5 },
x: 325,
y: 500,
srcArr: [
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN012WWZlz1FJvfhIcZjW_!!1080040467.png", "name": "1.png", "width": "1000", "height": "1000" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01rawzGR1FJvfZ81JoR_!!1080040467.png", "name": "2.png", "width": "1000", "height": "1000" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01WrTOkB1FJvff98Zlk_!!1080040467.png", "name": "3.png", "width": "1000", "height": "1000" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN011vVjIr1FJvfjdnpRW_!!1080040467.png", "name": "4.png", "width": "1000", "height": "1000" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01PHsRKn1FJvfdOnu5K_!!1080040467.png", "name": "5.png", "width": "1000", "height": "1000" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01Z1v6KG1FJvfkawqZj_!!1080040467.png", "name": "6.png", "width": "1000", "height": "1000" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN019mbPm51FJvfgIwreL_!!1080040467.png", "name": "7.png", "width": "1000", "height": "1000" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01yBUsDz1FJvfdwXXuK_!!1080040467.png", "name": "8.png", "width": "1000", "height": "1000" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01qeEKav1FJvfhIeaSU_!!1080040467.png", "name": "9.png", "width": "1000", "height": "1000" },
]
},
down: {
width: 1000,
height: 1000,
boomSpeed: 0.4,//速度
offsetBottom: 0,
scale: { x: 0.5, y: 0.5 },
anchor: { x: 0.5, y: 0.5 },
x: 325,
y: 500,
srcArr: [
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01HwNO7z1FJvfdMs8Il_!!1080040467.png", "name": "1.png", "width": "1000", "height": "1000" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01ubPJ741FJvfdOlHs2_!!1080040467.png", "name": "2.png", "width": "1000", "height": "1000" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01K3AEuS1FJvfdMrSha_!!1080040467.png", "name": "3.png", "width": "1000", "height": "1000" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01kggYx01FJvfeqhPDx_!!1080040467.png", "name": "4.png", "width": "1000", "height": "1000" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01QtRPwG1FJvfiuEo8l_!!1080040467.png", "name": "5.png", "width": "1000", "height": "1000" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01UPTJcV1FJvfjdnUaX_!!1080040467.png", "name": "6.png", "width": "1000", "height": "1000" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01zpR6zP1FJvfbCrZw6_!!1080040467.png", "name": "7.png", "width": "1000", "height": "1000" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01Z245IE1FJvfdwVnfk_!!1080040467.png", "name": "8.png", "width": "1000", "height": "1000" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01dZeAMm1FJvfZ81r0F_!!1080040467.png", "name": "9.png", "width": "1000", "height": "1000" },
]
},
def: {
width: 1000,
height: 1000,
boomSpeed: 0.4,//速度
offsetBottom: 0,
// scale: { x: 0.5, y: 0.5 },
anchor: { x: 0.5, y: 0.5 },
x: 325,
y: 500,
srcArr: [
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01Jl0b5Y1FJvfdPw3g0_!!1080040467.png", "name": "未标题-1.png", "width": "495", "height": "621" },
]
},
},
}),
},
onLoad(query) {
},
playFun(e) {
// 开始游戏 必须在游戏初始化完成之后开始
this.gameComponent.onEvent("start");
},
stopFun() {
this.gameComponent.onEvent("stop");
},
onRef(game) {
this.gameComponent = game;
console.log("进入游戏")
},
onInitDone() {
/* my.alert({
content: "游戏初始化完成"
}) */
},
onUpdate(ops) {
/* { btnArr: [{
btnObj: { name: "left", anchor: { … }, src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01VIpfS01FJvfjAeQnU_!!1080040467.png", dir: "left", bounds: { … }, … }//点击的按钮
// maxNum：当前元素同时存在的个数
curObj: { maxNum: 2, name: "蝴蝶结_active.png", bounds: { … }, anchor: { … }, dir: "left", … }//匹配的元素
per: 0.05087609193177292 //重合度
}]
} */
console.log(ops)
},
})- xaml
<view class="pageBox">
<game gameSource="{{gameSource}}" onRef="onRef" onInitDone="onInitDone" onUpdate="onUpdate" />
<view class="btn up" data-type="up" onTap="playFun">开始</view>
<view class="btn down" data-type="up" onTap="stopFun">结束</view>
</view>-acss
.pageBox{
position: absolute;
width: 750rpx;
height: 100vh;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
background-color: #ccc;
}