game-rich
v0.0.7
Published
``` npm install game-rich ```
Downloads
2
Readme
game-rich
游戏
安装
npm install game-rich使用
必须开启 "enableSkia": "true"- json
{
"usingComponents": {
"game": "game-rich/index"
}
}- mini.project.json
{
"node_modules_es6_whitelist": [
"common-game"
]
}- js
Page({
data: {
gameSource: JSON.stringify({
ops: {
singleBoxDuration: 0.1,//单个格子移动的时间
bgMoveDuration: 1,//单次人物移动完之后背景移动动画时间
centerPos: {
x: 750 / 2,
y: 1200,
bottom: 500
},
},
initStep: 4,//初始位置
// 奖品配置
items: [
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01zp8QiC1FJvqSMaWZ6_!!1080040467.png", prizeCount: 1, anchor: { x: 0.5, y: 1 }, offset: { x: 80, y: -16 } },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01dc9OVv1FJvqTo7oA4_!!1080040467.png", anchor: { x: 0.5, y: 1 }, offset: { x: 80, y: -16 } },
],
start: { fx: "left", x: 378, y: 80, width: 149, height: 95, alpha: 0 },//第一格子
box: { width: 149, height: 95, alpha: 1, alpha: 0 },
map: {
src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN013GFPKY1FJvqQD0krG_!!1080040467.png",
offset: { bottom: 0 },
childArr: [
// 默认奖品随机显示，配置itemIdx可以指定items下标
// others:以格子为基点坐标，显示的元素
// 配置动画：speedY速度 yMaxV最大移动距离
// boxType: 1:常规格子 2:奖品格子
{ boxType: 1, fx: "left", firstFx: "left", offset: { x: -166, y: -124 }, },
{ boxType: 1, fx: "left", offset: { x: -218, y: -98 }, },
{ boxType: 1, fx: "left", offset: { x: -190, y: -105 }, },
{
boxType: 1, fx: "left", offset: { x: -200, y: -105 },
// 元素
others: [{
src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01dc9OVv1FJvqTo7oA4_!!1080040467.png",
globalX: 0,
offset: { y: -150 },
speedY: 0.1,
yMaxV: 10,
}],
},
{ boxType: 2, itemIdx: 0, fx: "right", offset: { x: -120, y: -120 }, },
{
boxType: 2, itemIdx: 0, fx: "right", offset: { x: -92, y: -118 },
others: [{
src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01UQatIK1FJvqRlpdwW_!!1080040467.png",
globalX: 540,
offset: { y: -150 },
speedY: -0.12,
yMaxV: 15,
}],
},
{ boxType: 1, fx: "right", offset: { x: -37, y: -168 }, standOffset: { x: -4 }, },
{
boxType: 1, fx: "left", offset: { x: -232, y: -124 },
others: [{
src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01Lx6ifc1FJvqQcWRHY_!!1080040467.png",
globalX: -320,
offset: { y: -150 },
speedY: -0.12,
yMaxV: 10,
}],
},
{ boxType: 2, fx: "left", offset: { x: -212, y: -124 }, prizeOffset: { x: 8, y: -10 } },
{
boxType: 1, fx: "top", offset: { x: -140, y: -125 },
others: [{
src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN019UM2101FJvqPTIeoY_!!1080040467.png",
globalX: 610,
offset: { y: -150 },
speedY: 0.12,
yMaxV: 10,
}, {
src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01o1Jc111FJvqPb3kaA_!!1080040467.png",
globalX: 624,
offset: { y: 80 }
}],
},
{ boxType: 1, fx: "right", offset: { x: -60, y: -114 }, standOffset: { x: -12 }, },
{ boxType: 1, fx: "right", offset: { x: -100, y: -114 }, prizeOffset: { x: -4, y: -10 }, standOffset: { x: -12 } },
{ boxType: 1, fx: "right", offset: { x: -138, y: -114 }, },
{
boxType: 1, fx: "left", offset: { x: -260, y: -94 },
others: [{
src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01tZJkuZ1FJvqUDsKm8_!!1080040467.png",
globalX: 0,
offset: { y: -100 },
speedY: 0.1,
yMaxV: 15,
}, {
src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01o1Jc111FJvqPb3kaA_!!1080040467.png",
globalX: 174,
offset: { y: 180 }
}, {
src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01fiaZLh1FJvqRloR7C_!!1080040467.png",
globalX: 48,
offset: { y: 50 }
}, {
src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01xQrtO21FJvqQcIPDX_!!1080040467.png",
globalX: 525,
offset: { y: -400 },
speedY: -0.12,
yMaxV: 10,
}, {
src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01o1Jc111FJvqPb3kaA_!!1080040467.png",
globalX: 684,
offset: { y: -450 }
}],
},
{ boxType: 1, fx: "left", offset: { x: -218, y: -106 }, },
{ boxType: 1, fx: "top", offset: { x: -136, y: -108 }, },
{ boxType: 1, fx: "right", offset: { x: -94, y: -98 }, standOffset: { x: -10 }, },
{ boxType: 2, fx: "right", offset: { x: -94, y: -96 }, prizeOffset: { x: 4, y: -10 } },
{ boxType: 1, fx: "right", offset: { x: -120, y: -110 }, },
{ boxType: 1, fx: "left", offset: { x: -166, y: -100 }, standOffset: { x: -12 }, },
{ boxType: 1, fx: "left", offset: { x: -238, y: -96 }, prizeOffset: { x: 4, y: -10 } },
{
boxType: 1, fx: "left", offset: { x: -200, y: -94 },
others: [{
src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01aAyMUO1FJvqTo9U62_!!1080040467.png",
globalX: -170,
offset: { y: -100 },
speedY: 0.05,
yMaxV: 10,
}, {
src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01YPprZR1FJvqV5EFcL_!!1080040467.png",
globalX: 560,
offset: { y: -350 },
speedY: 0.08,
yMaxV: 10,
}],
},
{ boxType: 1, fx: "top", offset: { x: -142, y: -106 }, standOffset: { x: -12 }, },
{ boxType: 1, fx: "right", offset: { x: -70, y: -100 }, },
{ boxType: 1, fx: "right", offset: { x: -44, y: -92 }, standOffset: { x: -6 }, },
]
},//offset：每个方向的格子边界偏移量
player: { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN017FtoA91FJvqOv9ODC_!!1080040467.png", anchor: { x: 0.42, y: 0.94 } },
}),
},
onLoad(query) { },
playFun() {
// // 获取player元素后面6个格子对象 6:返回指定个数
// let t = this.gameComponent.onEvent("getBox", 6);
// console.log(t)
// 开始移动，6：移动的格数
let num = parseInt((Math.random() * 6) + 1)
num = 1;
this.gameComponent.onEvent("go", num);
},
onInitDone(ops) {
console.error("initDone...");
this.gameComponent = ops.ref;
},
onUpdate(ops) {
// 对应map.childArr元素，mapIdx对应元素位于第几次循环地图上
console.log(ops.mapIdx, ops)
// 获取player位置
// let pos = this.gameComponent.onEvent("getPlayerPos");
// this.setData({
// // x: pos.x,
// // y: pos.y
// })
},
})- xaml
<view class="pageBox">
<game gameSource="{{gameSource}}" onInitDone="onInitDone" onUpdate="onUpdate" />
<view style="position:absolute;width:200rpx;height:200rpx;background:rgba(0,0,0,0.3);left:{{x}}rpx;top:{{y}}rpx;"></view>
</view>
<view onTap="playFun" class="tt" style="position:absolute;left: 40%;bottom: 100rpx;">开始123</view>-acss
.pageBox{
position: absolute;
width: 750rpx;
height: 100vh;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
background-color: #ccc;
}
.tt{font-family: "numFont";font-size: 44rpx;color: #bc8f56;}