0.0.6 • Published 2 years ago
game-car v0.0.6
car
游戏
安装
npm install game-car使用
必须开启 "enableSkia": "true"- json
{
"usingComponents": {
"game": "game-car/index"
}
}- mini.project.json
{
"node_modules_es6_whitelist": [
"common-game"
]
}- js
Page({
data: {
gameSource: {
dieOps: {
// 游戏碰撞结束配置
hideTime: 0.5,//碰撞了消失时间
moveV: -50,//障碍物骑车移动距离（小于0往上移）
rotate: 720,//玩家旋转
scale: 1,//玩家缩放
alpha2: 1,//玩家透明度
},
showPlay: {
showTime: 0.5,//显示时间
src: "https://img.alicdn.com/imgextra/i2/2185320355/O1CN018lJsGl1EUdN78Ahkv_!!2185320355.png",
offset: { x: 0, y: 300 }
},
baseOps: {
defH: 800,//初始距离
stepH: 500,//递减距离
stepV: 10,//递减值
stepRandom: { min: 500, max: 1000 },//两个物品之间的间距
},
rect: {
//玩家游戏中可移动区域
left: 130,
top: 0,
right: 130,
bottom: 0
},
audioObj: {
audioSrc: "http://isv-vod.alibabausercontent.com/mk8pOHtSi7MPYyhqseq/Peh41bV9Y3RscetcAFe?auth_key=1658388418-0-0-ea9ec6897ed81a300c0a2470b37a47fe&w=0&h=0&e=sd&t=2136376816581292184526949e7d2a&b=tb_rcpaasm&p=*_null&tr=aac-264-sd",//音频地址
defaultStatus: "open",//默认状态
},
bg: {
bottomOffset: 0,
speed: 10,
addSpeed: {//加速度
stepSpeed: 0.1,//递增值
stepH: 500,//递增距离
},
firstArr: [
{ "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01j83Dz21EUdNC3ElDa_!!2185320355.png", "name": "未标题-1_01_01.png", "width": "750", "height": "425" },
{ "src": "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01pkBhcB1EUdN73DyBs_!!2185320355.png", "name": "未标题-1_01_02.png", "width": "750", "height": "425" },
{ "src": "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01W5YROh1EUdNA1s0GJ_!!2185320355.png", "name": "未标题-1_01_03.png", "width": "750", "height": "425" },
{ "src": "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01Z4llDe1EUdNC3CkTI_!!2185320355.png", "name": "未标题-1_01_04.png", "width": "750", "height": "425" },
],
repeatArr: [
{ "src": "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01GJdj411EUdN4DJElz_!!2185320355.png", "name": "未标题-1_01.png", "width": "750", "height": "451" },
{ "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01AvNxVT1EUdN3PYGtS_!!2185320355.png", "name": "未标题-1_02.png", "width": "750", "height": "451" },
{ "src": "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01MMj7yo1EUdNC4LRIo_!!2185320355.png", "name": "未标题-1_03.png", "width": "750", "height": "452" },
{ "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN019uPQQ81EUdN5m5Nlg_!!2185320355.png", "name": "未标题-1_04.png", "width": "750", "height": "451" },
{ "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01bN3oYu1EUdN818aBe_!!2185320355.png", "name": "未标题-1_05.png", "width": "750", "height": "451" },
{ "src": "https://img.alicdn.com/imgextra/i1/2185320355/O1CN01zzT4ip1EUdNA2w3oq_!!2185320355.png", "name": "未标题-1_06.png", "width": "750", "height": "451" },
{ "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01E74AeQ1EUdN0M7RId_!!2185320355.png", "name": "未标题-1_07.png", "width": "750", "height": "451" },
{ "src": "https://img.alicdn.com/imgextra/i2/2185320355/O1CN01yuMaEl1EUdN8rQi03_!!2185320355.png", "name": "未标题-1_08.png", "width": "750", "height": "452" },
{ "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01jyo0ky1EUdN4DJN5u_!!2185320355.png", "name": "未标题-1_09.png", "width": "750", "height": "451" },
{ "src": "https://img.alicdn.com/imgextra/i1/2185320355/O1CN01TKr75e1EUdN5m7KKt_!!2185320355.png", "name": "未标题-1_10.png", "width": "750", "height": "451" },
]
},
items: [
{
"src": "https://img.alicdn.com/imgextra/i1/2185320355/O1CN01ygk8k11EUdN8vCs7u_!!2185320355.png", addSpeed: {//加速度
stepSpeed: 0.1,//递增值
stepH: 500,//递增距离
}, speedRandom: { min: 12, max: 15 }, val: 10, bound: { left: 0, top: 0, right: 0, bottom: 0 }, probability: 1, tipScore: { src: "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01PLw91l1EUdN5M7UsT_!!2185320355.png", offset: { x: 0, y: 0 }, scale: { x: 1, y: 1 } },
},
{
"src": "https://img.alicdn.com/imgextra/i1/2185320355/O1CN01D589061EUdN1AFMY5_!!2185320355.png", addSpeed: {//加速度
stepSpeed: 0.1,//递增值
stepH: 500,//递增距离
}, speedRandom: { min: 12, max: 15 }, val: 10, bound: { left: 0, top: 0, right: 0, bottom: 0 }, probability: 1, tipScore: { src: "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01PLw91l1EUdN5M7UsT_!!2185320355.png", offset: { x: 0, y: 0 }, scale: { x: 1, y: 1 } },
},
{
"src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01k5KJtr1EUdN1AEtRw_!!2185320355.png", addSpeed: {//加速度
stepSpeed: 0.1,//递增值
stepH: 500,//递增距离
}, speedRandom: { min: 12, max: 15 }, val: 10, bound: { left: 0, top: 0, right: 0, bottom: 0 }, probability: 1, tipScore: { src: "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01PLw91l1EUdN5M7UsT_!!2185320355.png", offset: { x: 0, y: 0 }, scale: { x: 1, y: 1 } },
},
],
playerInfo: {
offset: { x: 0, y: -590 },
arr: [
{ "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01rrdylf1EUdNCxs60J_!!2185320355.png", "name": "绿车-准备状态.png", "width": "171", "height": "357", bound: { left: 32, top: 27, right: 32, bottom: 30 }, direction: "ready" },
{ "src": "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01wvgSDE1EUdMu0oklX_!!2185320355.png", "name": "绿车-右拐.png", "width": "171", "height": "357", bound: { left: 32, top: 27, right: 32, bottom: 30 }, direction: "right" },
{ "src": "https://img.alicdn.com/imgextra/i1/2185320355/O1CN019nGI5Z1EUdNCxt2EI_!!2185320355.png", "name": "绿车-左拐.png", "width": "171", "height": "357", bound: { left: 32, top: 27, right: 32, bottom: 30 }, direction: "left" },
{ "src": "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01UyFlDd1EUdN4HO00a_!!2185320355.png", "name": "绿车-正常行驶.png", "width": "171", "height": "357", bound: { left: 32, top: 27, right: 32, bottom: 30 }, direction: "run" },
]
},
timePos1: {
align: "center",
x: 54,
y: 290,
bg: { src: "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01NBQE7O1EUdN3TBZjO_!!2185320355.png", x: 28, y: 226 },
time: 10,//倒计时时间
// 时间数字图片 0 - 9
numOffset: -6,//数字两边空白太多，增加偏移量
numArr: [
{ "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01qfQeiq1EUdNCHqGjh_!!2185320355.png", "val": "0", "width": "16", "height": "26" },
{ "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01VySyhy1EUdN5Vu7TO_!!2185320355.png", "val": "1", "width": "10", "height": "26" },
{ "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01O9kbzG1EUdN7HbF7G_!!2185320355.png", "val": "2", "width": "15", "height": "26" },
{ "src": "https://img.alicdn.com/imgextra/i1/2185320355/O1CN01OOkgbU1EUdNB2MOgz_!!2185320355.png", "val": "3", "width": "14", "height": "26" },
{ "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01HJqtmv1EUdNCHqCaV_!!2185320355.png", "val": "4", "width": "16", "height": "26" },
{ "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01CHm1Ii1EUdND6yYoA_!!2185320355.png", "val": "5", "width": "14", "height": "26" },
{ "src": "https://img.alicdn.com/imgextra/i1/2185320355/O1CN01RjEJsZ1EUdN5zXFxS_!!2185320355.png", "val": "6", "width": "15", "height": "26" },
{ "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01CSxZvM1EUdN0ZKx4W_!!2185320355.png", "val": "7", "width": "15", "height": "26" },
{ "src": "https://img.alicdn.com/imgextra/i2/2185320355/O1CN01ndhRnu1EUdNB2Mvx0_!!2185320355.png", "val": "8", "width": "15", "height": "26" },
{ "src": "https://img.alicdn.com/imgextra/i1/2185320355/O1CN01MeDn8Z1EUdNB2Jz0T_!!2185320355.png", "val": "9", "width": "15", "height": "26" },
{ "src": "https://img.alicdn.com/imgextra/i1/2185320355/O1CN012JKGQa1EUdND6zZCB_!!2185320355.png", "val": "s", "width": "11", "height": "26" },
],
},
scorePos: {
align: "center",
x: 750 / 2,
y: 196,
// 分数数字图片 0 - 9
numOffset: 4,//数字两边空白太多，增加偏移量
numArr: [
{ "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01z6VqEV1EUdN3TCJSW_!!2185320355.png", "val": 0, "width": "75", "height": "119" },
{ "src": "https://img.alicdn.com/imgextra/i2/2185320355/O1CN01OFDjE81EUdN84hnF4_!!2185320355.png", "val": 1, "width": "52", "height": "119" },
{ "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01IQS78w1EUdNCxZhPj_!!2185320355.png", "val": 2, "width": "70", "height": "119" },
{ "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01R04q2C1EUdNAsmBxq_!!2185320355.png", "val": 3, "width": "71", "height": "119" },
{ "src": "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01B9lds21EUdN3TDNyz_!!2185320355.png", "val": 4, "width": "69", "height": "119" },
{ "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01084E821EUdN3TCRmI_!!2185320355.png", "val": 5, "width": "70", "height": "119" },
{ "src": "https://img.alicdn.com/imgextra/i1/2185320355/O1CN01fqPwju1EUdNCxZUwH_!!2185320355.png", "val": 6, "width": "70", "height": "119" },
{ "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01tDBWOc1EUdNCxayQr_!!2185320355.png", "val": 7, "width": "70", "height": "119" },
{ "src": "https://img.alicdn.com/imgextra/i3/2185320355/O1CN01GS1myh1EUdN1ADYHU_!!2185320355.png", "val": 8, "width": "70", "height": "119" },
{ "src": "https://img.alicdn.com/imgextra/i4/2185320355/O1CN01Y8qxv71EUdMysZ1e1_!!2185320355.png", "val": 9, "width": "70", "height": "119" },
],
},
}
},
onLoad() {
},
// 组件主动公开方法----------
beginFun() {
// 开始游戏
this.gameComponent.onEvent("start");
},
resetFun(e) {
// 重置游戏
this.gameComponent.onEvent("reset");
},
muteFun() {
// 静音
this.gameComponent.onEvent("mute");
},
playFun() {
// 播放
this.gameComponent.onEvent("play");
},
// 组件回调方法------------------
onInitDone(e) {
this.gameComponent = e.ref;
// my.alert({
// content: "游戏初始化完成"
// })
},
onUpdate(ops) {
// { curScore: 0,totalScore: 0, imgObj: { } }
console.log(ops)
},
onGameOver(totalScore) {
console.log(totalScore)
},
});- xaml
<view class="pageBox">
<view class="gameBox">
<game gameSource="{{gameSource}}" onInitDone="onInitDone" onUpdate="onUpdate" onGameOver="onGameOver" />
</view>
<view style="position:absolute;left:100rpx;bottom:200rpx;">
<view onTap="beginFun" style="position:relative;z-index: 10;">开始</view>
<view onTap="resetFun" style="position:relative;z-index: 10;">重置游戏</view>
<view onTap="muteFun" style="position:relative;z-index: 10;">静音</view>
<view onTap="playFun" style="position:relative;z-index: 10;">播放</view>
</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: 1500rpx;
}