手撸一个仿蚂蚁森林微信小程序

13 篇文章 1 订阅
6 篇文章 0 订阅

每天逛逛CSDN,看看大牛们的技术文章,查找自己想了解的知识,是我必做的事情。

每天到支付宝看看自己的余额,看看自己的33块钱还在吗?顺便到蚂蚁森林收下自己和好友的能量是我必做的事。看着自己的能量又被好友偷了,无比纠结。

自己最近在做微信小程序开发,就想能否用微信小程序实现一个仿蚂蚁森林的游戏。

最近换了工作岗位,上班不能摸鱼,牺牲了一个多星期的晚上时间手撸一个仿蚂蚁森林微信小程序。

今天主要介绍游戏界面和相关技术点,后期教程将把知识点通过代码呈现,望高手路过指点一二。

ac6ee4cf91234266b4dfd8ca2a8ca5ab.png

(蚂蚁树林微信小程序)

一、游戏主界面:

模仿游戏开发,不能只全盘照抄,要有自己的思想和玩法。

能量球有四种颜色状态:

青绿黄红四种颜色代表能量球成长的四个阶段,只有能量球成长到第三阶段后才能采摘,到第四阶段后能量球会有24小时倒计时时间,如果倒计时到0后没有采摘能量球就会消失。

技术点:能量球的样式和显示位置,能量球的动画,每次能量采摘后树成长。

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAaGF3a29s,size_18,color_FFFFFF,t_70,g_se,x_16

 二、游戏背包界面:

游戏背包界面采用组件开发模式,点击背包图标时窗体从底部弹窗。

技术点:颜色渐变,组件和游戏界面融合;每种道具的特效即和游戏交互。

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAaGF3a29s,size_18,color_FFFFFF,t_70,g_se,x_16

 三、游戏商店界面

不管有没有人会购买道具,商店应该是一个游戏需要实现的功能吧!

游戏商店界面采用组件开发模式,点击商店图标时窗体从底部弹窗。

技术点:微信支付相关 包含支付成功回调和定时订单查询功能。

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAaGF3a29s,size_18,color_FFFFFF,t_70,g_se,x_16

四、游戏奖励界面:

游戏奖励界面采用组件开发模式,点击奖励图标时窗体从底部弹窗。奖励每月更新,后台发布任务,用户登录后判断连续登录天数,符合条件后用户领取奖励。

技术点:连续签到,签到奖励领取,避免重复领取。

 watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAaGF3a29s,size_18,color_FFFFFF,t_70,g_se,x_16

 

五、游戏主界面辅助信息显示界面:

主界面层叠上拉窗口,显示用户账户信息、最新动态、排行帮、用户推荐等。

技术点:上拉加载-实现类似懒加载功能、根据用户上拉位置,加载不同板块。

底部按钮定位,适配不同屏幕比例正常显示。

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAaGF3a29s,size_18,color_FFFFFF,t_70,g_se,x_16

 六、道具使用和换肤功能

背景更换,树的皮肤更换,能量双击卡5分钟倒计时,能量保护罩。

技术点:能量双击卡倒计时,能量保护罩动画。

 

 七.收取好友能量

收取好友能量,如果好友使用了能量保护罩不可以收取

技术点:能量双击卡倒计时的显示,如果倒计时没有到0,可以双倍收取好友能量。

 

创作不易,总算是完工了。

如果你觉得我有必要发布开发教程,请点赞和留言。留言达到一千条后我将发布开发教程。

  • 19
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 17
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 17
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值