0.0.6 • Published 2 years ago
game-amani2 v0.0.6
game-amani2
游戏
安装
npm install game-amani2使用
必须开启 "enableSkia": "true"- json
{
"usingComponents": {
"game": "game-amani2/index"
}
}- mini.project.json
{
"node_modules_es6_whitelist": [
"common-game"
]
}- js
Page({
data: {
gameSource: JSON.stringify({
domClick: true,
baseOps: {
moveSpeed: "8",//下移速度
stepH: { min: "30", max: "600" },//两个元素之间间隔距离
tipTime: "0.3",//提示时间
minClickY: "300",//可点击区域最低点
addNum: { min: "1", max: "3" },//同时生成元素个数
},
// 元素出现的区域，默认为容器整个区域
showRect: {
x: 0, y: 44
},
// isDie: true点中就结束游戏 scoreType:分数提示类型（greate，perfect...） tip:提示分数
items: [
// { "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01GvBGJV1EUdMSgklFh_!!2185320355.png", "scoreType": { src: "https://img.alicdn.com/imgextra/i1/2185320355/O1CN01k5YXxM1EUdMK4b0F2_!!2185320355.png" }, probability: "1", val: "200", "tip": { src: "https://img.alicdn.com/imgextra/i2/2185320355/O1CN01Ta1Mx61EUdMQjJIO5_!!2185320355.png" }, },
{ "src": "https://img.alicdn.com/imgextra/i1/2185320355/O1CN01nYHSOV1EUdNv0WwF8_!!2185320355.png", isDie: true, tip: { src: "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01p9pYOB1EUdMK8ljr9_!!2185320355.png" }, probability: "1", val: "0", },
{ "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01YG0xlh1EUdNyzZ3e8_!!2185320355.png", probability: "1", val: "20", "tip": { src: "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01OOPwG01EUdNrXnNEw_!!2185320355.png" }, },
{ "src": "https://img.alicdn.com/imgextra/i1/2185320355/O1CN01M7keAL1EUdNmmFE83_!!2185320355.png", probability: "1", val: "20", "tip": { src: "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01OOPwG01EUdNrXnNEw_!!2185320355.png" }, },
{ "src": "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01l682Qy1EUdNs4mYXl_!!2185320355.png", probability: "1", val: "20", "tip": { src: "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01OOPwG01EUdNrXnNEw_!!2185320355.png" }, },
{ "src": "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01F0cMWI1EUdNv0UBmM_!!2185320355.png", probability: "1", val: "20", "tip": { src: "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01OOPwG01EUdNrXnNEw_!!2185320355.png" }, },
{ "src": "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01ZoVKJv1EUdNpvEOVv_!!2185320355.png", probability: "1", val: "20", "tip": { src: "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01OOPwG01EUdNrXnNEw_!!2185320355.png" }, },
],
timePos: {
align: "left",
x: "210",
y: "0",
time: "10",//倒计时时间
padLen: 2,//最小长度
// 时间数字图片 0 - 9
numOffset: "0",//数字两边空白太多，增加偏移量
numArr: [
{ "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01H9L9hE1EUdMJS8377_!!2185320355.png", "val": "0", "width": "29", "height": "44" },
{ "src": "https://img.alicdn.com/imgextra/i1/2185320355/O1CN013xmohu1EUdMOjWtBK_!!2185320355.png", "val": "1", "width": "15", "height": "42" },
{ "src": "https://img.alicdn.com/imgextra/i1/2185320355/O1CN01EgM16O1EUdMK8YZx0_!!2185320355.png", "val": "2", "width": "29", "height": "43" },
{ "src": "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01tqgWXC1EUdMLDydeK_!!2185320355.png", "val": "3", "width": "29", "height": "44" },
{ "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN012eTGl01EUdMGJRD19_!!2185320355.png", "val": "4", "width": "30", "height": "43" },
{ "src": "https://img.alicdn.com/imgextra/i2/2185320355/O1CN01SX6K8B1EUdM9sKTiK_!!2185320355.png", "val": "5", "width": "31", "height": "43" },
{ "src": "https://img.alicdn.com/imgextra/i2/2185320355/O1CN014OntJp1EUdMGJRLKz_!!2185320355.png", "val": "6", "width": "28", "height": "44" },
{ "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN018kxS9k1EUdMRuOKjW_!!2185320355.png", "val": "7", "width": "29", "height": "43" },
{ "src": "https://img.alicdn.com/imgextra/i4/2185320355/O1CN013atW171EUdM9sJo8R_!!2185320355.png", "val": "8", "width": "30", "height": "44" },
{ "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01ZCyoOW1EUdM9sK8wJ_!!2185320355.png", "val": "9", "width": "27", "height": "44" },
],
},
scorePos: {
align: "center",
x: "602",
y: "34",
numOffset: "0",
numArr: [
{ "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01H9L9hE1EUdMJS8377_!!2185320355.png", "val": "0", "width": "29", "height": "44" },
{ "src": "https://img.alicdn.com/imgextra/i1/2185320355/O1CN013xmohu1EUdMOjWtBK_!!2185320355.png", "val": "1", "width": "15", "height": "42" },
{ "src": "https://img.alicdn.com/imgextra/i1/2185320355/O1CN01EgM16O1EUdMK8YZx0_!!2185320355.png", "val": "2", "width": "29", "height": "43" },
{ "src": "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01tqgWXC1EUdMLDydeK_!!2185320355.png", "val": "3", "width": "29", "height": "44" },
{ "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN012eTGl01EUdMGJRD19_!!2185320355.png", "val": "4", "width": "30", "height": "43" },
{ "src": "https://img.alicdn.com/imgextra/i2/2185320355/O1CN01SX6K8B1EUdM9sKTiK_!!2185320355.png", "val": "5", "width": "31", "height": "43" },
{ "src": "https://img.alicdn.com/imgextra/i2/2185320355/O1CN014OntJp1EUdMGJRLKz_!!2185320355.png", "val": "6", "width": "28", "height": "44" },
{ "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN018kxS9k1EUdMRuOKjW_!!2185320355.png", "val": "7", "width": "29", "height": "43" },
{ "src": "https://img.alicdn.com/imgextra/i4/2185320355/O1CN013atW171EUdM9sJo8R_!!2185320355.png", "val": "8", "width": "30", "height": "44" },
{ "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01ZCyoOW1EUdM9sK8wJ_!!2185320355.png", "val": "9", "width": "27", "height": "44" },
]
},
}),
},
onLoad(query) {
},
playFun() {
// 传参图片id,数组格式
this.gameComponent.onEvent("start");
},
resetFun() {
this.gameComponent.onEvent("reset");
},
onInitDone(e) {
console.log("游戏初始化完成...")
this.gameComponent = e.ref;
},
onUpdate(ops) {
// { totalScore: 0, imgObj: { } }
console.log("update:", ops)
},
onGameOver(totalScore) {
console.log("gameOver:", totalScore)
}
})- xaml
<view class="pageBox">
<game gameSource="{{gameSource}}"
onInitDone="onInitDone"
onUpdate="onUpdate"
onGameOver="onGameOver"
/>
</view>
<view onTap="playFun" style="position:absolute;left: 40%;bottom: 100rpx;">开始</view>
<view onTap="resetFun" style="position:absolute;left: 50%;bottom: 100rpx;">重置</view>- acss
.pageBox{
position: absolute;
width: 700rpx;
height: 994rpx;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
background: #ccc;
}