0.0.7 • Published 2 years ago
game-claw v0.0.7
game-claw
游戏
安装
npm install game-claw
使用
必须开启 "enableSkia": "true"
- json
{
"usingComponents": {
"game": "game-claw/index"
}
}
- mini.project.json
{
"node_modules_es6_whitelist": [
"common-game"
]
}
- js
Page({
data: {
gameSource: {
baseOps: {
wczY: 10,//抓取时,y轴误差值
wczX: 30,//抓取时,中心点误差值(注:如果元素上有wczX参数,则使用元素的wczX值)值越大越容易抓中
clawDuration: 0.5,//爪子下拉动画时间
maxHeight: 700,//爪子最大升的长度
// saveBaseX: true,//保持原位置,默认false会让精灵居中
player: {//爪子左右移动区域和速度
minX: 156,
maxX: 580,
speed: 0,
},
singlePro: {//单个产品尺寸,显示按照此尺寸居中显示,如果大于此尺寸,就做等比缩放
width: 180,
height: 210
},
line1: {
noClaw: false,//true:这一行不会被抓取
y: 800,//第一行y轴坐标
baseX: 70,//第一行起始点
speed: -1,//移动速度,正数向右移动,负数向左移动
},
line2: {
y: 900,//第二行y轴坐标
baseX: 0,//第二行起始点
speed: 1,//移动速度,正数向右移动,负数向左移动
}
},
player: {
tranHead: { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN017gBJ4w1FJvh0bYj19_!!1080040467.png", "width": "86", "height": "25", x: 375, y: 100, offsetY: -25 },//透明head,和head一致
head: { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01Nl2dQK1FJvgtYk9M0_!!1080040467.png", "width": "86", "height": "25" },
line: { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN0108r16o1FJvgvlPzhl_!!1080040467.png", "width": "16", "height": "474" },
claw: { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN011LK4261FJvgmW6fru_!!1080040467.png", "width": "122", "height": "165", bounds: { bottom: 20 } },
light: {//抓取成功后,播放的动画
width: 240,
height: 240,
boomSpeed: 0.3,//速度
srcArr: [
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01T6AXmK1FJvgtd3KuN_!!1080040467.png", "name": "1.png", "width": "240", "height": "240" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01sDyctZ1FJvh4m8pD8_!!1080040467.png", "name": "2.png", "width": "240", "height": "240" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01elFJje1FJvh2F9bbd_!!1080040467.png", "name": "3.png", "width": "240", "height": "240" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01MkUoON1FJvh5tRpld_!!1080040467.png", "name": "4.png", "width": "240", "height": "240" },
],
},
},
items: [
// 元素使用bounds的left和right控制中心点
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01EJezT31FJvgwX7bOP_!!1080040467.png", "name": "1.png", "width": "125", "height": "120", bounds: { top: 0, right: 0, left: 0 }, wczX: 63, "val": "10", showLine: [1] },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01bHN6BW1FJvgt2gERy_!!1080040467.png", "name": "2.png", "width": "69", "height": "208", bounds: { top: 0, right: 0, left: 0 }, wczX: 35, "val": "10", showLine: [1] },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01OeiWM01FJvgvvIjKn_!!1080040467.png", "name": "3.png", "width": "74", "height": "213", bounds: { top: 0, right: 0, left: 0 }, wczX: 37, "val": "10", showLine: [1] },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01KbwHTn1FJvh2bpXt7_!!1080040467.png", "name": "4.png", "width": "189", "height": "166", bounds: { top: 0, right: 0, left: 0 }, wczX: 95, "val": "10", showLine: [2] },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01JpUIa11FJvh4Q2tFG_!!1080040467.png", "name": "5.png", "width": "123", "height": "218", bounds: { top: 0, right: 0, left: 0 }, wczX: 62, "val": "10", showLine: [2] },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01Fc6gjS1FJvgrU9bK8_!!1080040467.png", "name": "6.png", "width": "180", "height": "124", bounds: { top: 0, right: 0, left: 30 }, wczX: 90, "val": "10", showLine: [2] },
]
}
},
onLoad() {
},
beginFun(e) {
// 开始游戏 必须在游戏初始化完成之后开始
this.gameComponent.onEvent("start");
},
stopFun() {
this.gameComponent.onEvent("stop");
},
resetFun() {
this.gameComponent.onEvent("init");
},
isShowFun() {
this.setData({
showGame: !this.data.showGame
})
},
getFun() {
this.gameComponent.onEvent("runClaw");
},
onRef(game) {
this.gameComponent = game;
console.log("进入游戏")
},
onInitDone() {
/* my.alert({
content: "游戏初始化完成"
}) */
},
onUpdate(res) {
// res : {img,totalScore}
console.log("抓到的元素:", res)
// 默认抓完就停止,如需继续,则手动调用开始
this.beginFun();
},
onGameOver() {
// 所有元素都被抓完了回调方法
console.log("游戏结束了或者所有元素都被抓完了")
},
onVersionError() {
console.error("low version...")
}
});
- 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;">开始</view>
<view onTap="stopFun" style="position:relative;z-index: 10;">停止</view>
<view onTap="resetFun" style="position:relative;z-index: 10;">重置游戏</view>
<view onTap="isShowFun" style="position:relative;z-index: 10;">切换</view>
<view onTap="getFun" style="position:relative;z-index: 10;">吸</view>
</view>
-acss
.pageBox{
position: absolute;
width: 750rpx;
height: 100vh;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
.gameBox{
position: relative;
width: 750rpx;
height: 1200rpx;
/* background: #323449; */
background-color: #ccc;
}