0.0.6 • Published 2 years ago
game-olypk v0.0.6
game-olypk
游戏
安装
npm install game-olypk使用
必须开启 "enableSkia": "true"- json
{
"usingComponents": {
"game": "game-olypk/olypk"
}
}- mini.project.json
{
"node_modules_es6_whitelist": [
"common-game"
]
}- js
Page({
data: {
gameSource: {
baseOps: {
speed: 3,//速度,值越大速度越块
speedXS: 3,//速度系数
minBottomY: 900,//从底部开始计算 元素最小状态时的Y坐标
minWidth: 10,//最小状态位置的宽度
maxBottomY: -300,//从底部开始计算 元素最大状态时的Y坐标
maxWidth: 750,//最大状态位置的宽度
xzMaxScale: true,//是否限制最大缩放比例 true:当超过maxBottomY位置之后,不再继续放大
stepH: 200,//两个物品之间的间距
tipFadeTime: 500,//提示语显示的时间
},
wallBound: { left: 100, right: 650 },
gameShowRect: { x: 0, y: 0, width: 750, height: 1300 },//游戏元素显示区域
items: [
{ def: { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01aYTqHY1FJvfiWdiYF_!!1080040467.png" }, tip2: { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01DTaS4G1FJvfjFxgeH_!!1080040467.png", offset: { x: 0, y: -100 } }, val: 10, bound: { left: 10, top: 0, right: 10, bottom: 10 }, probability: 1, scaleOps: { min: 0.2, max: 3 } },
{ def: { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01FehIAD1FJvfpngRb3_!!1080040467.png" }, tip2: { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN016H701p1FJvfpNObsi_!!1080040467.png", offset: { x: 0, y: -100 } }, val: 10, bound: { left: 10, top: 10, right: 10, bottom: 40 }, probability: 1, scaleOps: { min: 0.2, max: 3 } },
{ def: { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01TF8xnB1FJvfgNzDME_!!1080040467.png" }, tip2: { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01q71njq1FJvftOpdZG_!!1080040467.png", offset: { x: 0, y: -100 } }, val: 10, bound: { left: 10, top: 0, right: 10, bottom: 36 }, probability: 1, scaleOps: { min: 0.2, max: 3 } },
{ def: { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01fP6xDY1FJvfo6kZwL_!!1080040467.png" }, tip2: { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01ZXHD1v1FJvfriLUqi_!!1080040467.png", offset: { x: 0, y: -100 } }, val: 10, bound: { left: 0, top: 0, right: 0, bottom: 30 }, probability: 1, scaleOps: { min: 0.2, max: 3 } },
{ def: { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01rGH43L1FJvfZYvnxt_!!1080040467.png" }, tip2: { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01Y3a44O1FJvflOuaJk_!!1080040467.png", offset: { x: 0, y: -100 } }, val: 10, over: true, bound: { left: 0, top: 0, right: 0, bottom: 17 }, probability: 1, scaleOps: { min: 0.2, max: 2 } },
],
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/i3/1080040467/O1CN019tnwSc1FJvfImdgqS_!!1080040467.png", "val": "0" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01LrzaiY1FJvfOB3E9c_!!1080040467.png", "val": "1" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01QGYPLl1FJvfKTJ2iC_!!1080040467.png", "val": "2" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01NzGt7Y1FJvfQXkbaq_!!1080040467.png", "val": "3" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01BKF4BI1FJvfQXjX3I_!!1080040467.png", "val": "4" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01i4lBCf1FJvfLbyEcY_!!1080040467.png", "val": "5" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01uG4yWK1FJvfGaJjRc_!!1080040467.png", "val": "6" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01A2tr6P1FJvfKTI2KM_!!1080040467.png", "val": "7" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01unAK0L1FJvfIiPBeu_!!1080040467.png", "val": "8" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01K4sEu51FJvfKBHika_!!1080040467.png", "val": "9" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01jEUCr31FJvf9qprPi_!!1080040467.png", "val": "+" },
],
},
catAni: { // 提示序列帧
width: 690,
height: 946,
boomSpeed: 0.4,//速度
offsetBottom: 0,
bound: { left: 200, top: 200, right: 200, bottom: 0 },
scale: { x: 0.5, y: 0.5 },
anchor: { x: 0.5, y: 1 },
srcArr: [
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01ESXGpn1FJvfZ5wPmu_!!1080040467.png", "name": "cat_00000.png", "width": "690", "height": "946" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01UNwznc1FJvfl1Hrse_!!1080040467.png", "name": "cat_00001.png", "width": "690", "height": "946" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01Ac7l7l1FJvfoLiJeB_!!1080040467.png", "name": "cat_00002.png", "width": "690", "height": "946" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01LwnJN01FJvfieIELA_!!1080040467.png", "name": "cat_00003.png", "width": "690", "height": "946" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN012pEKor1FJvfq1PugQ_!!1080040467.png", "name": "cat_00004.png", "width": "690", "height": "946" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01iAy5mW1FJvfm1p9IE_!!1080040467.png", "name": "cat_00005.png", "width": "690", "height": "946" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN014HKY041FJvffJsJx4_!!1080040467.png", "name": "cat_00006.png", "width": "690", "height": "946" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01wy9ji51FJvffJpZSr_!!1080040467.png", "name": "cat_00007.png", "width": "690", "height": "946" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01mR8BR71FJvfieIQpR_!!1080040467.png", "name": "cat_00008.png", "width": "690", "height": "946" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01RxQxa91FJvfpKBZaS_!!1080040467.png", "name": "cat_00009.png", "width": "690", "height": "946" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01hTQFcG1FJvfmWu78Y_!!1080040467.png", "name": "cat_00010.png", "width": "690", "height": "946" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01xCiYrW1FJvfi3jMgX_!!1080040467.png", "name": "cat_00011.png", "width": "690", "height": "946" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN011AtYll1FJvfnd8egI_!!1080040467.png", "name": "cat_00012.png", "width": "690", "height": "946" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01WiWFMt1FJvfZ5wPnl_!!1080040467.png", "name": "cat_00013.png", "width": "690", "height": "946" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01R38bOt1FJvffJtKKz_!!1080040467.png", "name": "cat_00014.png", "width": "690", "height": "946" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01ilkedG1FJvfdnyhAy_!!1080040467.png", "name": "cat_00015.png", "width": "690", "height": "946" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01HZk3lt1FJvfjZGJC7_!!1080040467.png", "name": "cat_00016.png", "width": "690", "height": "946" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01YmqeN51FJvffunsSg_!!1080040467.png", "name": "cat_00017.png", "width": "690", "height": "946" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01wKKvTa1FJvfm1lf5e_!!1080040467.png", "name": "cat_00018.png", "width": "690", "height": "946" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01ofraLs1FJvfq1QJeX_!!1080040467.png", "name": "cat_00019.png", "width": "690", "height": "946" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01jSv2nF1FJvfZ5ubX3_!!1080040467.png", "name": "cat_00020.png", "width": "690", "height": "946" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01YOOidF1FJvfl1HjZV_!!1080040467.png", "name": "cat_00021.png", "width": "690", "height": "946" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01MJdDHY1FJvfpKCJJK_!!1080040467.png", "name": "cat_00022.png", "width": "690", "height": "946" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01ssHZbO1FJvfoLkb3I_!!1080040467.png", "name": "cat_00023.png", "width": "690", "height": "946" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01y9n10w1FJvfoLmbpY_!!1080040467.png", "name": "cat_00024.png", "width": "690", "height": "946" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN015QjHa41FJvfZ5wLeN_!!1080040467.png", "name": "cat_00025.png", "width": "690", "height": "946" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01dz3D5t1FJvfi5WCne_!!1080040467.png", "name": "cat_00026.png", "width": "690", "height": "946" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01KGMZwY1FJvffuqlI8_!!1080040467.png", "name": "cat_00027.png", "width": "690", "height": "946" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN012Moq8n1FJvfl1GG5x_!!1080040467.png", "name": "cat_00028.png", "width": "690", "height": "946" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01cp5cq01FJvfoLmXfP_!!1080040467.png", "name": "cat_00029.png", "width": "690", "height": "946" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01JMieO31FJvfi3lqa0_!!1080040467.png", "name": "cat_00030.png", "width": "690", "height": "946" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01Eua2yF1FJvfq1OuNw_!!1080040467.png", "name": "cat_00031.png", "width": "690", "height": "946" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01sMUPK71FJvfjs8jTh_!!1080040467.png", "name": "cat_00032.png", "width": "690", "height": "946" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01LvtC021FJvfdo0yXe_!!1080040467.png", "name": "cat_00033.png", "width": "690", "height": "946" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01wbZ0ip1FJvfi3kElk_!!1080040467.png", "name": "cat_00034.png", "width": "690", "height": "946" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01sISAxo1FJvfZ5vXl0_!!1080040467.png", "name": "cat_00035.png", "width": "690", "height": "946" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01y0rdYl1FJvfdnzIcj_!!1080040467.png", "name": "cat_00036.png", "width": "690", "height": "946" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01R7zPK91FJvfi5USjm_!!1080040467.png", "name": "cat_00037.png", "width": "690", "height": "946" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01bcVHvB1FJvfpKEj2I_!!1080040467.png", "name": "cat_00038.png", "width": "690", "height": "946" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01BVfAQ41FJvfdo1FBY_!!1080040467.png", "name": "cat_00039.png", "width": "690", "height": "946" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01AVX8Bb1FJvfpKDv8w_!!1080040467.png", "name": "cat_00040.png", "width": "690", "height": "946" },
]
},
scorePos: {
align: "center",
x: 464,
y: 32,
// money: true,
bg: {
src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01LuZTtw1FJvfiXCd61_!!1080040467.png",
x: 428,
y: 4
},
// 分数数字图片 0 - 9
numOffset: -4,//数字两边空白太多，增加偏移量
numArr: [
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01veupVO1FJvflSwLay_!!1080040467.png", val: 0 },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01eBWAkp1FJvfon6TkF_!!1080040467.png", val: 1 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01Ky8FnS1FJvfeF6H1H_!!1080040467.png", val: 2 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01jYUbuY1FJvfplq32b_!!1080040467.png", val: 3 },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01SL5rpd1FJvfkJNpn6_!!1080040467.png", val: 4 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01wnddCD1FJvfqT6Xe7_!!1080040467.png", val: 5 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01DOcBNF1FJvfiX1LoE_!!1080040467.png", val: 6 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN017dEbfH1FJvfmTOOHX_!!1080040467.png", val: 7 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01LtdwdR1FJvfj5hbYr_!!1080040467.png", val: 8 },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01yzKfsp1FJvfqT7Ts3_!!1080040467.png", val: 9 },
],
},
timePos: {
align: "center",
x: 298,
y: 32,
bg: {
src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01TEuZjT1FJvfo4wbKu_!!1080040467.png",
x: 276,
y: 4
},
time: 45,//倒计时时间
// 时间数字图片 0 - 9
numOffset: -4,//数字两边空白太多，增加偏移量
numArr: [
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01veupVO1FJvflSwLay_!!1080040467.png", val: 0 },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01eBWAkp1FJvfon6TkF_!!1080040467.png", val: 1 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01Ky8FnS1FJvfeF6H1H_!!1080040467.png", val: 2 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01jYUbuY1FJvfplq32b_!!1080040467.png", val: 3 },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01SL5rpd1FJvfkJNpn6_!!1080040467.png", val: 4 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01wnddCD1FJvfqT6Xe7_!!1080040467.png", val: 5 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01DOcBNF1FJvfiX1LoE_!!1080040467.png", val: 6 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN017dEbfH1FJvfmTOOHX_!!1080040467.png", val: 7 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01LtdwdR1FJvfj5hbYr_!!1080040467.png", val: 8 },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01yzKfsp1FJvfqT7Ts3_!!1080040467.png", val: 9 },
],
},
}
},
onLoad() {
my.t = this;
},
// 组件主动公开方法----------
beginFun() {
// 开始游戏
this.gameComponent.onEvent("start");
},
stopFun() {
// 结束游戏
this.gameComponent.onEvent("stop");
},
resetFun(e) {
// 重置游戏
this.gameComponent.onEvent("reset");
},
pauseFun() {
// 暂停游戏
this.gameComponent.onEvent("pause");
},
// 组件回调方法------------------
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)
},
isShowFun() {
this.setData({
showGame: !this.data.showGame
})
}
});- xaml
<view class="pageBox">
<view class="gameBox">
<game gameSource="{{gameSource}}"
a:if="{{!showGame}}"
onRef="onRef"
onInitDone="onInitDone"
onUpdate="onUpdate"
onGameOver="onGameOver"
/>
</view>
<view onTap="beginFun" style="position:relative;z-index: 10;">开始</view>
<view onTap="pauseFun" 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>-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/O1CN01tBFXmJ1FJvfpm3bpc_!!1080040467.jpg") no-repeat center top;
background-size: 100% auto;
}