APSchmidt 发表于 2022-11-24 15:16

0基础也能做一款游戏小程序——我用zion写了个NBA2k资讯 ...

我是一个NBA2K等主机游戏的资深博主
我有很多特长:打游戏,打篮球,帅,腿毛特长
这和我做这个产品有很大的关联
没错我要做的就是专门针对我粉丝群体的一个NBA2K的资讯、游戏平台



目录

1.资讯板块

   i.新闻时讯
   ii.MT储物柜代码
   iii.主播动态
   iv.其他(后台管理系统)
2.游戏板块

   i.挑战赛(包括比赛模式等扩展介绍)
   ii.球王榜
   iii.赛季模式
   iv.球员库
3.开发经验:踩坑埋坑避坑

   i.多种情况下的内容呈现(页面逻辑)
   ii.文字样式页面排版(页面设计)
一.NBA2K资讯板块

资讯板块页面主要分为三块内容,最上面的一个NBA2K23(最新版本)大logo,中间有一个小喇叭就是最新或者最热的新闻的大概内容,最下三个大的视图容器,分别链接三块资讯内容



1.新闻时讯:发布关于该游戏最新的更新,职业比赛动态,球员变动等等





里面其实也就是一张大的列表,弄一个新闻的专属的数据模型,再通过我对美学的深刻理解美化一下UI,就能牢牢的把用户的目光吸引住
2.MT储物柜码:这个码就是游戏官方给玩家用的白piao码,可以兑换一些虚拟资产





大致和新闻板块一样,主要是图文
3.主播动态:主要用来呈现主播的个人信息和最新的动态





这里面就很牛逼了,可以放视频的,可以放很大的视频。牛逼不……
4.其他

其实除了这些给用户的功能意外我还专门设置了隐藏按钮,专门用来给管理员添加内容用的,位置就在每一个视图容器的右边,这个按钮只有管理员可以点击,一共有三个后台







丑!丑的一批!但是就我自己看没啥问题
二.游戏板块

游戏板块也和新闻板块一样分成好几个小内容



看这个界面,啧啧,帅!帅的一批!就是有点看不清这个字,没事正经人谁看字,都看图的呀
1.挑战赛:玩家挑战电脑





玩家可以组建阵容挑战电脑,当然这里我要插播一下关于比赛的东西:我专门为比赛写了一个自定义行为,其中要输入和要输出的数据多达上百条,这也是我这个小程序最难的也是最让人秃头的地方



这是JS写的自定义行为,里边百分之10是写的百分之90是复制粘贴的嘿嘿嘿
既然都说道这了我再介绍一下比赛的画面



这是准备比赛的界面,可以看到两队的信息,点击开始可以比赛,当然没有那种3D游戏的比赛画面,会有一个延迟的计算过程最后显示出比分这样



最后根据比分的大小判断输赢
2.球王榜:玩家vs玩家,赢了加积分输了减积分,最后看

排名,更具排名寄送奖品!







比赛的具体模式和挑战赛一样
3.赛季模式:未开发

4.球员库:可以看到全联盟的球员的数据属性等等信息,巨大的一个信息库





当你选中球员以后会出现该球员的球员卡,并加入到球队



加入球队以后就会在“我的“页面显示



以上就是所有我小程序的内容!当然这只是1.0版本,2.0版本我计划推出更多关NBA2K球员的个人信息,还有自创球员这个板块!
三.开发经验:踩坑埋坑避坑

    既然是程序开发那必然有各种各样的问题,没有bug的程序那肯定不是个好程序!我这里来说一下我在开发中遇到的问题和解决方法还有我总结的以后如何避开这些问题的方法。我觉得这在开发任何项目中都能用的到
1.多种情况下的内容呈现(页面逻辑)

我们的小程序往往会给用户呈现很多互动性的内容,也就是需要用户操作后才能改变的内容,比如我这个小程序的首页在用户添加完球员以后会显示一个阵容的头像和名字:



但是这其中有一个很大的问题我没有考虑到:当用户第一次进入小程序没有添加阵容的时候这里是完全不显示东西的,那就会很丑,而且浪费了一次引导用户正确操作小程序的机会

经过我的改进最后变成了这样:



条件式容器这会儿在这就显得空前NB。同样的问题我小程序里面还有不少,都是每完全考虑到多种情况下应该给用户展现不同的视图
总结:在开发UI界面过程中一定要提前想好一个页面,哪怕是一个组件在不同情况下需不需要给用户呈现不同的样式,每次涉及到用户交互的板块更需要谨慎考虑
2.文字样式页面排版(页面设计)

用户的手机屏幕大小不一,但是开发者可能在开发的时候有可能只看自己的手机和电脑,这样容易忽视UI界面或者组件内文字排版的普遍适用性。比如:我上面主播动态板块的大标题和我主页的球员名字





这两个文字组件的排版在不同的手机里看到的效果不一样,所以要通过修改“单行”“多行”或者“垂直布局”的方式让自己小程序UI排版以及组件排版适应大部分手机
总结:UI排版的时候要多预览多尝试,而且最好拿两个不同大小的手机尝试,给读取网络数据的组件留有足够大的空间,考虑短中长三种内容的情况下改如何排版
页: [1]
查看完整版本: 0基础也能做一款游戏小程序——我用zion写了个NBA2k资讯 ...