0.0.6 • Published 2 years ago
game-wx-car v0.0.6
car
游戏
安装
npm install game-wx-car
安装完后，开发工具栏菜单：工具->构建npm使用
{
"usingComponents": {
"game": "game-wx-car/index"
}
}- js
Page({
data: {
showGame: true,
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
},
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" },
]
},
timePos2: {
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: function () {
},
onInitDone(e) {
this.gameComponent = e.detail.ref;
console.log("游戏游戏初始化完成")
},
onUpdate(e) {
let detail = e.detail;
console.log(detail)
},
onGameOver(e) {
let totalScore = e.detail.totalScore;
console.log(totalScore)
wx.showToast({
title: "游戏结束"
})
},
beginFun() {
this.gameComponent.onEvent("start");
},
resetFun() {
this.gameComponent.onEvent("reset");
},
})- wxml
<view>
<view style="width: 750rpx;height: 1000rpx;margin:0 auto;position:relative;background:#ccc;" wx:if="{{showGame}}">
<game gameSource="{{gameSource}}" bind:onInitDone="onInitDone" bind:onUpdate="onUpdate" bind:onGameOver="onGameOver" />
</view>
<view bindtap="beginFun" style="position:absolute;left: 100rpx;bottom: 0;">开始</view>
<view bindtap="resetFun" style="position:absolute;left: 300rpx;bottom: 0;">重置</view>
</view>- wxss
.box{
position: relative;
width: 750rpx;
height: 1000rpx;
}