0.0.11 • Published 2 years ago
game-mi2 v0.0.11
game-mi2
游戏
安装
npm install game-mi2使用
必须开启 "enableSkia": "true"- json
{
"usingComponents": {
"game": "game-mi2/index"
}
}- mini.project.json
{
"node_modules_es6_whitelist": [
"common-game"
]
}- js
Page({
data: {
gameSource: {
baseOps: {
noItemsNum: 3,//不生成元素的个数(默认为1)
minY: 700,//最小的时候出现的位置Y轴坐标
minYScale: 0.2,//最小Y轴的缩放
maxY: 1000,//最大的时候出现的位置Y轴坐标（此处动画停止）
maxYScale: 1.0,//最大Y轴的缩放
speed: 3,
stepHeight: 60,//两个元素之间的距离
moveSpeed: 0.4,//移动速度(值越大速度越慢)
energyBaseProbability: 0.5,//能量元素生成的概率=============
changeShowDir: true,//true：障碍物元素交替显示 false:随机显示
},
showRect: { x: 0, y: 0, width: 750, height: 1300 },//游戏元素显示区域
moveRect: { x: 0, y: 0, width: 750, height: 1300 },//元素可移动的区域
loads: [
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01930JAn1FJvftEONFG_!!1080040467.png", centerYPer: 52 / 115 }
],
items: [
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01ScVT8b1FJvfrjAMl0_!!1080040467.png", bound: { left: 0, top: 0, right: 8, bottom: 0 }, probability: 1, over: true, anchor: { x: 0.5, y: -0.2 }, offsetX: { left: 180, right: 180 }, wper: 0.5, },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01ihb98o1FJvfmaUQUk_!!1080040467.png", bound: { left: 0, top: 0, right: 30, bottom: 0 }, probability: 1, over: true, anchor: { x: 0.5, y: 0.75 }, offsetX: { left: 100, right: 100 }, wper: 0.3, },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01IjVIXw1FJvfqYpqyZ_!!1080040467.png", bound: { left: 16, top: 0, right: 10, bottom: 0 }, probability: 1, over: true, anchor: { x: 0.5, y: 0.5 }, offsetX: { left: 200, right: 200 }, wper: 0.6, },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01v7xc9V1FJvflzBqch_!!1080040467.png", bound: { left: 14, top: 0, right: 14, bottom: 0 }, probability: 1, over: true, anchor: { x: 0.5, y: 0.5 }, offsetX: { left: 180, right: 180 }, wper: 0.55, },
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01OCJxal1FJvflzCNrl_!!1080040467.png", bound: { left: 0, top: 0, right: 0, bottom: 0 }, probability: 1, over: true, anchor: { x: 0.5, y: 0.75 }, offsetX: { left: 130, right: 130 }, wper: 0.4, },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN012A0y4H1FJvfqFyddV_!!1080040467.png", bound: { left: 14, top: 0, right: 24, bottom: 0 }, probability: 1, over: true, anchor: { x: 0.5, y: 0.65 }, offsetX: { left: 120, right: 120 }, wper: 0.35, },
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN019I2LiH1FJvfuKxGBl_!!1080040467.png", bound: { left: 20, top: 0, right: 96, bottom: 0 }, probability: 1, over: true, anchor: { x: 0.5, y: 0.82 }, offsetX: { left: 160, right: 100 }, wper: 0.4, },
],
energy: [
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN014cSVmV1FJvfwkuVse_!!1080040467.png", val: 20, bound: { left: 10, top: 0, right: 0, bottom: 0 }, probability: 1, anchor: { x: 0.5, y: 0.5 }, offsetX: { left: 120, right: 120 }, scaleOps: { min: 0.1, max: 0.8 } },
],
player: {
src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01qxwFcO1FJvfuKuuhZ_!!1080040467.png",
bound: { left: 22, top: 0, right: 18, bottom: 28 },
jumpHeight: 400,//跳的高度
y: 1200,
},
tipScorePos: {
fadeTime: 0.5,//消失时间
numOffset: -4,//数字两边空白太多，增加偏移量
x: 750 / 2,
y: 200,
scale: "1",
// bg: { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01FM8QxU1FJveZ9Z9j1_!!1080040467.png", x: 0, y: -30 },
numArr: [
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01dKI7l01FJvfvZejEi_!!1080040467.png", "val": "0" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01WyMmF91FJvfgEn6Dj_!!1080040467.png", "val": "1" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN018nnopf1FJvftj51uv_!!1080040467.png", "val": "2" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01KJe98l1FJvftEHj1V_!!1080040467.png", "val": "3" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01vSJREV1FJvftj4cxe_!!1080040467.png", "val": "4" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01gn3LBV1FJvftj2TsK_!!1080040467.png", "val": "5" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01TXUDGG1FJvftj35JD_!!1080040467.png", "val": "6" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01t18EoR1FJvfpE1Gal_!!1080040467.png", "val": "7" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01G1oRNV1FJvfr3pdn1_!!1080040467.png", "val": "8" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN012W2Cf01FJvfr3ou3c_!!1080040467.png", "val": "9" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN019H0IeS1FJvfkxeGMw_!!1080040467.png", "val": "+" },
],
},
scorePos: {
align: "center",
x: 160,
y: 114,
// money: true,
bg: {
src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01BSW4Lx1FJvfomr8TB_!!1080040467.png",
x: 0,
y: 89
},
// 分数数字图片 0 - 9
numOffset: -4,//数字两边空白太多，增加偏移量
numArr: [
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01jIslQf1FJvfomTAee_!!1080040467.png", "val": "0" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01O4vqCk1FJvfpLDBNi_!!1080040467.png", "val": "1" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01aovsKv1FJvfrk4HzO_!!1080040467.png", "val": "2" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN017PSKNc1FJvfrk5Z0L_!!1080040467.png", "val": "3" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01D9auRx1FJvfuLqB4Q_!!1080040467.png", "val": "4" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01yCqLCJ1FJvfuLpRJT_!!1080040467.png", "val": "5" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01IG8nfg1FJvfqGscwi_!!1080040467.png", "val": "6" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN015jkcaz1FJvfqZnOuL_!!1080040467.png", "val": "7" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01QA1EJ11FJvfokHHkx_!!1080040467.png", "val": "8" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01z4mVZR1FJvfflFbU2_!!1080040467.png", "val": "9" },
],
},
}
},
onLoad() {
my.t = this;
},
// 组件主动公开方法----------
beginFun() {
// 开始游戏
this.gameComponent.onEvent("start");
},
resetFun(e) {
// 重置游戏
this.gameComponent.onEvent("reset");
},
isShowFun() {
this.setData({
showGame: !this.data.showGame
})
},
addSpeedFun() {
// 加速 0.1需要加速的值（在GameSource->baseOps->moveSpeed基础上进行操作）
// 值越小速度越快。注：计算结果如果小于0，则加速失败
this.gameComponent.onEvent("addSpeed", "-0.1");
},
// 组件回调方法------------------
onRef(game) {
this.gameComponent = game;
console.log("进入游戏")
},
onInitDone() {
// my.alert({
// content: "游戏初始化完成"
// })
// 初始化game
this.gameComponent.onEvent("reset");
},
onUpdate(ops) {
// { totalScore: 0, imgObj: { } }
console.log(ops)
},
onGameOver(totalScore) {
console.log(totalScore)
},
onAddSpeedCallback(speed) {
// 加速成功回调，返回当前速度值
console.log(speed)
// my.alert({ content: speed })
}
});- xaml
<view class="pageBox">
<view class="gameBox" a:if="{{!showGame}}">
<game gameSource="{{gameSource}}" onRef="onRef" onInitDone="onInitDone" onUpdate="onUpdate" onGameOver="onGameOver" onAddSpeedCallback="onAddSpeedCallback" />
</view>
<!--<view style="position:absolute;width:100%;height:2px;background:red;left:0;top:800rpx;"></view> -->
<view onTap="beginFun" style="position:relative;z-index: 10;">开始</view>
<view onTap="addSpeedFun" 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>-acss
.pageBox{
position: absolute;
width: 750rpx;
height: 100vh;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
.gameBox{
position: relative;
width: 750rpx;
height: 1300rpx;
/* background: #ccc; */
background: url("https://img.alicdn.com/imgextra/i2/1080040467/O1CN0172Mn9x1FJvfv5P3oq_!!1080040467.jpg") no-repeat center top;
background-size: 100% auto;
}