0.0.7 • Published 3 years ago
gm-game-clock v0.0.7
gm-game-clock
钟摆撞击小游戏
安装
npm install gm-game-clock使用
- app.json
必须开启 "enableSkia": "true"- json
{
"usingComponents": {
"gm-game-clock": "gm-game-clock/clock"
}
}- js
Page({
data: {
audio: false,
gameSource: {
isBumpBox: false,//碰撞显示区域
GameType: 0,//游戏玩法 0钟上下移动自动左右摇摆 1钟固定位置 滑动左右摇摆 自动回弹 2 钟固定 滑动左右摇摆 衰弱回弹
//背景
bg: { src: "https://img.alicdn.com/imgextra/i4/555657275/O1CN01rgfohY23c01tqJfcI_!!555657275.png", width: 750, height: 1770 },
Bgmusic: {
btn_img: { src: "https://img.alicdn.com/imgextra/i4/555657275/O1CN015azfwR23c01q84KLR_!!555657275.png", width: 29, height: 38, },//开
btn_img1: { src: "https://img.alicdn.com/imgextra/i3/555657275/O1CN01GTfHq323c021u6gwp_!!555657275.png", width: 29, height: 38, },//关
InitPlay: !false,//是否初始播放
audio: {
src1: "http://isv-vod.alibabausercontent.com/RGjZJMdpNgKGVQeEyw8/KUBC6V68mgkJCKoWQdR?auth_key=1610591862-0-0-4c2230e44d94550b4546f10c926e03a8&w=0&h=0&e=sd&t=2105834516103326628376926e1b3a",
},
loop: true,//是否循环播放
left: 700,
top: 193,
},
//滚动背景
rollBg: {
src: "https://img.alicdn.com/imgextra/i1/555657275/O1CN01ENSgu823c01ox6H1Q_!!555657275.png",
width: 750,
height: 1612,
rollSpeed: 0.1,//背景移动速度
},
//云
Cloud: {
AnimTime: 150,
type: [
[//左边
{ src: "https://img.alicdn.com/imgextra/i1/555657275/O1CN010os0s223c024NpCNU_!!555657275.png", width: 288, height: 203, },
{ src: "https://img.alicdn.com/imgextra/i4/555657275/O1CN01Mxe8kQ23c025mJMjA_!!555657275.png", width: 190, height: 204, },
],
[//右边
{ src: "https://img.alicdn.com/imgextra/i4/555657275/O1CN01n9mZnG23c02AvQZ5c_!!555657275.png", width: 210, height: 204, },
{ src: "https://img.alicdn.com/imgextra/i3/555657275/O1CN016VA5Nq23c020mscEK_!!555657275.png", width: 140, height: 197, },
],
]
},
//物品
goods: {
GoodsSpeed: 5,//物品初始速度
AddSpeed: 0.1,//累加速度
Spacing: 300,//上下物品间距
Left_X: 15,//物品在左边的横向位置
Right_X: -15,//物品在右边的横向位置
createPos: 100,//上一个物品走到生成下一个
maxcreateNum: 4,//最大生成数 =左边数量+右边数量
DisplayArea: 2.5,//显示物品在云的显示高度 2为遮挡物品的一半
srcArr: [
{ src: "https://img.alicdn.com/imgextra/i4/555657275/O1CN01lTfFus23c0280qorv_!!555657275.png", width: 100, height: 79, val: 1, gl: 80, },
{ src: "https://img.alicdn.com/imgextra/i1/555657275/O1CN01PN1GpZ23c02Awe5qS_!!555657275.png", width: 100, height: 175, val: 1, gl: 20, },
{ src: "https://img.alicdn.com/imgextra/i4/555657275/O1CN01QnQljH23c026riYRo_!!555657275.png", width: 100, height: 156, val: 1, gl: 50 },
{ src: "https://img.alicdn.com/imgextra/i1/555657275/O1CN01oZB4ZZ23c0220n0hT_!!555657275.png", width: 100, height: 141, val: 1, gl: 60, },
{ src: "https://img.alicdn.com/imgextra/i4/555657275/O1CN01Pdz0Id23c01w48IjS_!!555657275.png", width: 100, height: 140, val: 1, gl: 70, },
{ src: "https://img.alicdn.com/imgextra/i3/555657275/O1CN01rOZmDX23c0220ptVX_!!555657275.png", width: 100, height: 69, val: 1, gl: 40, },
{ src: "https://img.alicdn.com/imgextra/i2/555657275/O1CN01WuYEkg23c029EsSGm_!!555657275.png", width: 70, height: 169, val: 1, gl: 10, },
{ src: "https://img.alicdn.com/imgextra/i1/555657275/O1CN01nIMY5823c022bhM0v_!!555657275.png", width: 100, height: 178, val: 1, gl: 50, },
{ src: "https://img.alicdn.com/imgextra/i2/555657275/O1CN01bNBeXP23c02Acr3xU_!!555657275.png", width: 70, height: 169, val: 1, gl: 70, },
],
BumpAinmSpeed: 1.5,// 动画速度 值越大，速度越快
BumpAinmscale: 0.5,// 动画缩放
AinmList: [
{ src: "https://img.alicdn.com/imgextra/i1/555657275/O1CN01O5mpZt23c0258kx5X_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i2/555657275/O1CN016JId2G23c022sFduw_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i3/555657275/O1CN01KHd2CK23c020I84Ug_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i4/555657275/O1CN01OtU5Yf23c029DC9DI_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i4/555657275/O1CN01MNrT1w23c025tNd0J_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i2/555657275/O1CN01Pb12aR23c01uM142d_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i1/555657275/O1CN01BJxxoc23c01z69aHV_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i3/555657275/O1CN01NkZGiE23c022sGuu3_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i3/555657275/O1CN01oRi7rv23c028kbSbj_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i4/555657275/O1CN018IZ45s23c0243yq5k_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i4/555657275/O1CN01sgEr9Q23c0237Znz0_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i2/555657275/O1CN01O0HukP23c023nCJmz_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i3/555657275/O1CN01gLrEQz23c028kb3hp_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i1/555657275/O1CN01uZhUJT23c0237aXjg_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i2/555657275/O1CN01GWAMrc23c022sGiWf_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i2/555657275/O1CN01zwcYnN23c029DEEBK_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i2/555657275/O1CN01hLtrsQ23c022sFNLz_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i3/555657275/O1CN0136f77W23c0258jLLU_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i2/555657275/O1CN01i14elJ23c0258mEDV_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i1/555657275/O1CN01wrvfOm23c020tHveC_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i4/555657275/O1CN01Ncgpk923c023nBJU2_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i1/555657275/O1CN01k0t8br23c0258lcng_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i1/555657275/O1CN010R1YFl23c029DCcOD_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i1/555657275/O1CN01zyKUCr23c027FIkfJ_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i2/555657275/O1CN016oITLT23c0258lxaZ_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i1/555657275/O1CN01q12GgD23c028kbSi5_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i3/555657275/O1CN01qO4KWa23c01z6DLEH_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i2/555657275/O1CN01jFrRso23c023nDar9_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i1/555657275/O1CN01w40KXD23c029DEZ3k_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i2/555657275/O1CN01AqKDKB23c0258mUtB_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i2/555657275/O1CN01EZ7ZJf23c027FHseB_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i1/555657275/O1CN017w4ERc23c027FILl6_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i1/555657275/O1CN01mDxmUp23c027rVj8z_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i3/555657275/O1CN01KFiJQg23c027FHD4A_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i4/555657275/O1CN01pUcHrL23c027FL6H5_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i3/555657275/O1CN01MWTGsE23c029DFZRj_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i2/555657275/O1CN01qumtjK23c025tRJpe_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i3/555657275/O1CN01CBQVct23c022gLVR2_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i4/555657275/O1CN01tOZ7bq23c01z6Gpby_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i4/555657275/O1CN01K9AlZS23c028kekai_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i3/555657275/O1CN01in7ul523c022sJfel_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i3/555657275/O1CN01ysuA3n23c01z6EU22_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i3/555657275/O1CN019Yzhld23c028keY8N_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i1/555657275/O1CN01BHpuzu23c020tKc78_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i4/555657275/O1CN01KKzlVY23c025tPi7a_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i1/555657275/O1CN01LsL9O123c027FMiJE_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i2/555657275/O1CN019vT1SH23c020IDZox_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i2/555657275/O1CN01UsGR9i23c02442jZD_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i1/555657275/O1CN012hzyPk23c025tU0ML_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i3/555657275/O1CN01U6qBpl23c027FOj5B_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i2/555657275/O1CN018wqcd723c020tNAD8_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i3/555657275/O1CN019LNZvJ23c025tS7vu_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i4/555657275/O1CN01tSuWCl23c0237gFQP_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i2/555657275/O1CN01LeqB6l23c01z6IVgu_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i2/555657275/O1CN01SVF21v23c0237eN1y_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i4/555657275/O1CN01bsSDiH23c01uMAOUO_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i2/555657275/O1CN01pzOG9C23c01z6JBK6_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i2/555657275/O1CN01RCo3sO23c028kjeM9_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i1/555657275/O1CN01CFwPtL23c02444LLP_!!555657275.png", width: 276, height: 276 },
{ src: "https://img.alicdn.com/imgextra/i4/555657275/O1CN01RsnTFO23c027FR8q8_!!555657275.png", width: 276, height: 276 },
],
},
//钟
clock: {
LowerSpeed: 3,//钟下坠速度
UpperSpeed: 1,//钟上爬速度
UpperTime: 5,//上爬时间
isAnim: true,
AnimTime: 150,
isAnimType: true,//true 未开始游戏执行 false开始游戏执行
swingAngle: 50,//摆动角度
swingSpeed: 2,//摆动速度
swingWeak: 0.8,//摆动衰弱
srcArr: [
{
src: "https://img.alicdn.com/imgextra/i1/555657275/O1CN01hca0CX23c0292Be4T_!!555657275.png",//摆绳
width: 40, height: 350, step: 0.012,
},
{
src: "https://img.alicdn.com/imgextra/i3/555657275/O1CN01VeNvDR23c01sw56mH_!!555657275.png",//钟盘
width: 2236, height: 2236, showWidth: 2236 / 2236 * 280, showHeight: 2236 / 2236 * 280,
},
{
src: "https://img.alicdn.com/imgextra/i4/555657275/O1CN01QARkEa23c01sU8y7x_!!555657275.png",//钟心
width: 65, height: 65,
},
{
src: "https://img.alicdn.com/imgextra/i4/555657275/O1CN014nSnSH23c01xqT72W_!!555657275.png",//大撞针
width: 1745, height: 842, showWidth: 1745 / 842 * 155, showHeight: 842 / 842 * 145, posy: 215,
},
{
src: "https://img.alicdn.com/imgextra/i4/555657275/O1CN01QQc2Nv23c0223vlfL_!!555657275.png",//小撞针
width: 120, height: 58, posy: 300,
}
],
},
//倒计时
CountDown: {
Time: 60,//时间
Size: 20,
top: 1100,
TimeAinmscale: 0.4,// 动画缩放
AinmList: [
{ src: "https://img.alicdn.com/imgextra/i4/555657275/O1CN01AUXmR923c01uEzMX3_!!555657275.png", width: 222, height: 222 },
{ src: "https://img.alicdn.com/imgextra/i4/555657275/O1CN01HqYAg423c022lHAAF_!!555657275.png", width: 222, height: 222 },
{ src: "https://img.alicdn.com/imgextra/i3/555657275/O1CN01Mt9TxE23c022ZI3Y9_!!555657275.png", width: 222, height: 222 },
{ src: "https://img.alicdn.com/imgextra/i2/555657275/O1CN01NOGlza23c020B3cMr_!!555657275.png", width: 222, height: 222 },
{ src: "https://img.alicdn.com/imgextra/i1/555657275/O1CN015ERmiq23c022ZFuTB_!!555657275.png", width: 222, height: 222 },
{ src: "https://img.alicdn.com/imgextra/i3/555657275/O1CN01hPHEo223c022ZGuro_!!555657275.png", width: 222, height: 222 },
{ src: "https://img.alicdn.com/imgextra/i1/555657275/O1CN01ZvFAuk23c0230XZ3o_!!555657275.png", width: 222, height: 222 },
{ src: "https://img.alicdn.com/imgextra/i4/555657275/O1CN01dVh04z23c0296CWjd_!!555657275.png", width: 222, height: 222 },
{ src: "https://img.alicdn.com/imgextra/i2/555657275/O1CN01uX5CPI23c027kKpEf_!!555657275.png", width: 222, height: 222 },
{ src: "https://img.alicdn.com/imgextra/i2/555657275/O1CN01c9iRmT23c028dcunF_!!555657275.png", width: 222, height: 222 },
{ src: "https://img.alicdn.com/imgextra/i3/555657275/O1CN01phIhFF23c027kKM7S_!!555657275.png", width: 222, height: 222 },
{ src: "https://img.alicdn.com/imgextra/i2/555657275/O1CN01DwwsdK23c0278KXSP_!!555657275.png", width: 222, height: 222 },
{ src: "https://img.alicdn.com/imgextra/i1/555657275/O1CN01iC6kfE23c023wokIw_!!555657275.png", width: 222, height: 222 },
{ src: "https://img.alicdn.com/imgextra/i1/555657275/O1CN01NZR4RW23c023g119H_!!555657275.png", width: 222, height: 222 },
{ src: "https://img.alicdn.com/imgextra/i1/555657275/O1CN01YnxFfV23c025mIuHd_!!555657275.png", width: 222, height: 222 },
{ src: "https://img.alicdn.com/imgextra/i4/555657275/O1CN01LyT4kt23c025mJ2av_!!555657275.png", width: 222, height: 222 },
{ src: "https://img.alicdn.com/imgextra/i1/555657275/O1CN01Ot6Zh023c0296CBuj_!!555657275.png", width: 222, height: 222 },
{ src: "https://img.alicdn.com/imgextra/i1/555657275/O1CN010hkSlD23c01uEzlSM_!!555657275.png", width: 222, height: 222 },
{ src: "https://img.alicdn.com/imgextra/i2/555657275/O1CN012azy8w23c023wpYAm_!!555657275.png", width: 222, height: 222 },
{ src: "https://img.alicdn.com/imgextra/i2/555657275/O1CN01rKfIDx23c022ZIrRi_!!555657275.png", width: 222, height: 222 },
{ src: "https://img.alicdn.com/imgextra/i2/555657275/O1CN01iviGN023c01yz8kqD_!!555657275.png", width: 222, height: 222 },
{ src: "https://img.alicdn.com/imgextra/i2/555657275/O1CN01EEAuhx23c022lIIqz_!!555657275.png", width: 222, height: 222 },
{ src: "https://img.alicdn.com/imgextra/i1/555657275/O1CN01evHjJK23c020mHQsP_!!555657275.png", width: 222, height: 222 },
{ src: "https://img.alicdn.com/imgextra/i2/555657275/O1CN01t6ZvZO23c022ZHaRD_!!555657275.png", width: 222, height: 222 },
{ src: "https://img.alicdn.com/imgextra/i2/555657275/O1CN015LUo8o23c01yzAZ6S_!!555657275.png", width: 222, height: 222 },
{ src: "https://img.alicdn.com/imgextra/i3/555657275/O1CN01DpHJBL23c028dciIl_!!555657275.png", width: 222, height: 222 },
{ src: "https://img.alicdn.com/imgextra/i1/555657275/O1CN01ETZnLA23c028ddBNd_!!555657275.png", width: 222, height: 222 },
{ src: "https://img.alicdn.com/imgextra/i4/555657275/O1CN01Ldeipi23c027kJDQz_!!555657275.png", width: 222, height: 222 },
{ src: "https://img.alicdn.com/imgextra/i3/555657275/O1CN01pjR6S923c022ZGJQk_!!555657275.png", width: 222, height: 222 },
{ src: "https://img.alicdn.com/imgextra/i2/555657275/O1CN01Ga1VER23c0278Izo6_!!555657275.png", width: 222, height: 222 },
{ src: "https://img.alicdn.com/imgextra/i2/555657275/O1CN01UqixuQ23c0278I3bs_!!555657275.png", width: 222, height: 222 },
{ src: "https://img.alicdn.com/imgextra/i4/555657275/O1CN01KEa2Pg23c0278Ga7z_!!555657275.png", width: 222, height: 222 },
{ src: "https://img.alicdn.com/imgextra/i2/555657275/O1CN01ZdDHmj23c0296DOm1_!!555657275.png", width: 222, height: 222 },
{ src: "https://img.alicdn.com/imgextra/i2/555657275/O1CN01RsZfLM23c0278KP9Z_!!555657275.png", width: 222, height: 222 },
{ src: "https://img.alicdn.com/imgextra/i4/555657275/O1CN017ZZdPs23c027kJ58Q_!!555657275.png", width: 222, height: 222 },
{ src: "https://img.alicdn.com/imgextra/i4/555657275/O1CN01gVSDfe23c020B24kj_!!555657275.png", width: 222, height: 222 },
],
},
//得分
Score: {
Size: 18,
color: "#FFFFFF",
top: 1290,
},
//加分
addScore: {
show: false,
left: 350,
top: 800,
pos_y: 100,//移动的位置高度
Speed: 120,
color: "#FFFFFF",
Size: 22,
}
},
},
onLoad() {
this.setData({
"gameSource.Bgmusic.audio.src1": 1
}, () => {
this.setData({
audio: true
})
})
},
onRef(game) {
this.boxGameComponent = game;
},
beginFun() {
/* my.alert({
content: "游戏开始"
}) */
this.boxGameComponent.start();
},
restartFun() {
this.boxGameComponent.reset();
},
onError(e) {
console.log("loader读取资源报错时回调", e)
},
onFinish(obj) {
console.log("...游戏结束....", obj.totalScore)
my.alert({
content: "游戏结束" + obj.totalScore
})
},
onInitDone() {
console.log("initDone...游戏初始化完成")
/* my.alert({
content: "游戏初始化完成"
}) */
},
});- xaml
<!--
onInitDone:游戏渲染完回调
onFinish:游戏结束回调
-->
<view class="box_css">
<view class="btn_box_css">
<view class="btn_css" onTap="beginFun"> 开始</view>
<view class="btn_css" onTap="restartFun"> 重新开始</view>
</view>
<clock
gameSource="{{gameSource}}"
onRef="onRef"
onInitDone="onInitDone"
onFinish="onFinish"
/>
</view>