0.0.4 • Published 2 years ago
game-mi v0.0.4
mi
游戏
安装
npm install game-mi
使用
必须开启 "enableSkia": "true"
- json
{
"usingComponents": {
"game": "game-mi/mi"
}
}
- mini.project.json
{
"node_modules_es6_whitelist": [
"common-game"
]
}
- js
Page({
data: {
gameSource: JSON.stringify({
baseOps: {
speed: { min: 10, max: 15, step: 0 },//移动速度
firstY: 200,//首次加载游戏第一个元素的底部坐标位置
intervalStep: 1,//两个物体之间的间隔递减值
intervalStepH: 50,//移动指定距离递减一次
minIntervalH: 420,//两个物体之间的最小间隔距离
maxIntervalH: 600,//两个物体之间的间隔距离
maxCols: 3,//一共有多少列
},
items: [
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01mD7VGr1FJvebKTobj_!!1080040467.png", bound: { left: 0, right: 0, bottom: 0, top: 0 }, tip: { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01GauKip1FJveXkisZ9_!!1080040467.png" }, probability: 1, val: 20 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01qJOZEy1FJveaoXU5Q_!!1080040467.png", bound: { left: 0, right: 0, bottom: 30, top: 0 }, tip: { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01ve5jDb1FJveT8TcNB_!!1080040467.png" }, probability: 1, val: 30 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01u7eOGb1FJveOQj3tn_!!1080040467.png", bound: { left: 0, right: 0, bottom: 25, top: 0 }, tip: { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01MXm91K1FJvebOC1Fm_!!1080040467.png" }, probability: 1, val: 10 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01nsDx9W1FJved3sx1R_!!1080040467.png", bound: { left: 0, right: 0, bottom: 20, top: 0 }, tip: { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN015lvg0Y1FJveXkj9B7_!!1080040467.png" }, probability: 1, val: 5 },
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01rWLKsE1FJveUY3WCs_!!1080040467.png", bound: { left: 0, right: 0, bottom: 16, top: 0 }, tip: { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01rIHWH31FJved7ax6s_!!1080040467.png" }, probability: 1, val: 25 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01VdfEN11FJvecLwMX7_!!1080040467.png", bound: { left: 0, right: 0, bottom: 10, top: 0 }, tip: { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01KYmXMu1FJveXFzSw6_!!1080040467.png" }, probability: 1, val: 15 },
],
player: { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01Ei5VA21FJveaoY9h5_!!1080040467.png", bound: { left: 0, right: 0, bottom: 0, top: 0 }, moveY: false, bottom: 0, },
timePos: {
align: "right",
x: 710,
y: 170,
isSplitHouse: true,//是否拆分成时分秒
noHour: true,
bg: { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01KMvZbL1FJveeiOMxi_!!1080040467.png", x: 496, y: 170 },
time: 20,//倒计时时间
// 时间数字图片 0 - 9
numOffset: -4,//数字两边空白太多,增加偏移量
numArr: [
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01uX60I61FJved7LqT6_!!1080040467.png", val: ":" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01NKWomi1FJvecPJpD2_!!1080040467.png", val: 0 },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01z0cUDE1FJveVBNAhp_!!1080040467.png", val: 1 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01Jzhvw51FJved7MFPl_!!1080040467.png", val: 2 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01xziJbC1FJveT8Cu0e_!!1080040467.png", val: 3 },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01aJ3DHq1FJveas40OO_!!1080040467.png", val: 4 },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01P4JmfZ1FJveUbT7os_!!1080040467.png", val: 5 },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01vkqunP1FJveUbRz8E_!!1080040467.png", val: 6 },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN013ja2uB1FJveas5DDB_!!1080040467.png", val: 7 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01B4B6Pt1FJveas3wFE_!!1080040467.png", val: 8 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01L7FNwS1FJveXkTq7G_!!1080040467.png", val: 9 },
],
},
/* tipScorePos: {
fadeTime: 0.5,//消失时间
numOffset: -4,//数字两边空白太多,增加偏移量
scale: "1.5",
bg: { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01FM8QxU1FJveZ9Z9j1_!!1080040467.png", x: 0, y: -30 },
numArr: [
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01T251Kg1FJveOa46G1_!!1080040467.png", val: "+" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01yPU5CY1FJveWIxirL_!!1080040467.png", val: "s" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01DPEQwk1FJveJhg5Vy_!!1080040467.png", val: 0 },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01lXNJlP1FJveZsuPSq_!!1080040467.png", val: 1 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01ponlGV1FJveVBdVc5_!!1080040467.png", val: 2 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01BR76pf1FJveYJ1Jul_!!1080040467.png", val: 3 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01YOYyMu1FJveZsvLg6_!!1080040467.png", val: 4 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01pq3Y1f1FJveSOfyl0_!!1080040467.png", val: 5 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01uQqQ7v1FJveOLnbeu_!!1080040467.png", val: 6 },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01coylPi1FJveQP6SyQ_!!1080040467.png", val: 7 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01EwOq2Z1FJveZ9Y9LM_!!1080040467.png", val: 8 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01m44Vvm1FJveVBfFi3_!!1080040467.png", val: 9 },
],
}, */
/* scorePos: {
align: "right",
x: 730,
y: 68,
money: true,
bg: { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01j59EmB1FJveYJ2SbG_!!1080040467.png", x: 662, y: 23 },
// 分数数字图片 0 - 9
numOffset: -4,//数字两边空白太多,增加偏移量
numArr: [
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01XQlAMw1FJveZ9aQgX_!!1080040467.png", val: "," },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01DPEQwk1FJveJhg5Vy_!!1080040467.png", val: 0 },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01lXNJlP1FJveZsuPSq_!!1080040467.png", val: 1 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01ponlGV1FJveVBdVc5_!!1080040467.png", val: 2 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01BR76pf1FJveYJ1Jul_!!1080040467.png", val: 3 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01YOYyMu1FJveZsvLg6_!!1080040467.png", val: 4 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01pq3Y1f1FJveSOfyl0_!!1080040467.png", val: 5 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01uQqQ7v1FJveOLnbeu_!!1080040467.png", val: 6 },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01coylPi1FJveQP6SyQ_!!1080040467.png", val: 7 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01EwOq2Z1FJveZ9Y9LM_!!1080040467.png", val: 8 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01m44Vvm1FJveVBfFi3_!!1080040467.png", val: 9 },
],
}, */
}),
},
onLoad(query) {
},
playFun() {
this.gameComponent.onEvent("start");
},
resetFun() {
this.gameComponent.onEvent("reset");
},
movePlayer(e) {
let { currentTarget: { dataset: { v } } } = e;
this.gameComponent.onEvent("movePlayer", v);
},
endPlayer() {
this.gameComponent.onEvent("stopPlayer");
},
pause() {
// 暂停、继续
this.gameComponent.onEvent("pause");
},
stop() {
// 暂停、继续
this.gameComponent.onEvent("gameOver");
},
onRef(game) {
this.gameComponent = game;
console.log("进入游戏")
},
onInitDone() {
// my.alert({
// content: "游戏初始化完成"
// })
// this.playFun();
},
onUpdate(ops) {
// { totalScore: 0, imgObj: { } }
console.log(ops)
},
onGameOver({ totalScore }) {
console.log(totalScore)
}
})
- xaml
<game gameSource="{{gameSource}}"
onRef="onRef"
onInitDone="onInitDone"
onUpdate="onUpdate"
onGameOver="onGameOver"
/>
<view onTap="playFun" style="position:absolute;left: 40%;bottom: 100rpx;">开始</view>
<view onTap="resetFun" style="position:absolute;left: 50%;bottom: 100rpx;">重置</view>
<view onTap="pause" style="position:absolute;left: 60%;bottom: 100rpx;">暂停</view>
<view onTap="stop" style="position:absolute;left: 70%;bottom: 100rpx;">结束</view>
<view onTouchStart="movePlayer" onTouchCancel="endPlayer" onTouchEnd="endPlayer" data-v="-5" style="position:absolute;left: 10%;bottom: 100rpx;">左</view>
<view onTouchStart="movePlayer" onTouchCancel="endPlayer" onTouchEnd="endPlayer" data-v="5" style="position:absolute;right: 10%;bottom: 100rpx;">右</view>