iOS小项目之第二弹- 别踩白块

iOS-OC项目 别踩白块(Don’t Tap The White Tile)


写在前面的话

①别踩白块游戏简介:

《别踩白块儿 Don’t Tap The White Tile》,这就是这个游戏唯一的一个规则,我们只需要不断踩着黑色方块前进即可,很简单吧?谁都可以会玩,但并不是谁都能玩得很好噢,你呢?快来挑战看看吧!经典模式,以最快的速度到达终点。街机模式,你有能力得多少分就得多少分,没有任何限制,这也是最具挑战性的一个模式。限时模式,在30秒内看你能走几步。极速模式,没有最高速限制的街机模式, 挑战你的极限接力模式,规定时间内完成50块儿,然后会有更多时间去完成另外的50块儿。【复制于百度百科】

如果你没玩过,没关系 ,上图看看

别踩白块儿.gif

意思就是:每行有四个按钮,黑色的按钮是正确的需要你点击的按钮,白色块点击后游戏失败,所以这个游戏就叫”别踩白块儿”😂,别问我我为什么这么机智。

②写这个小游戏的目的

最重要 : 纯属好玩

我觉得做一件事情最大的推动力就是 兴趣 兴趣 兴趣
看到好多游戏都是拿Unity3D、Cocos2D开发的,我就想 我用系统自带的一些东海也可以实现一些简单的平面2D动画呀,所以我试了试,所以就有了这篇简书。

电商之类的app不美观

前面仿写过半糖app,公司也是电商的app,所以对于电商app无爱了,,,Ծ‸Ծ,,,都是 首页、分类、购物车、个人中心的套路,你懂的。相反我倒是更喜欢一些电商入口的APP,就比如半糖、美丽说、小红书之类的app,UI很美观,这是吸引我的地方。


项目整体的概括

①开发周期:

工作闲暇之余累计有10天左右,最近一个半月在忙公司的项目,只好抽时间写啦

②开发工具和语言:

开发工具为Xcode7.3 语言为Objective-C
因为前面仿写半糖app的时候,好多朋友给我说不太懂swift,那我就写个OC的小项目

③开发要点:

游戏成功、失败的逻辑代码基于 ReactiveCocoa ,代码有详细的解释。
音频管理、整体的UI搭建不难,难的是整体游戏逻辑的设计。


项目详细实现过程

①首页,页面较为简单,主要介绍一下 UIButton与 ReactiveCocoa的结合使用

121299512-81e0e7253713d485

–主要代码如下

解释:[_startButton rac_signalForControlEvents:UIControlEventTouchUpInside]返回一个 RACSignal,可以理解为 一个信号,后面 subscribeNext:^(id x) {} 意思就是 接受到这个信号所做的操作。从字面意思上可以理解为,前者当你点击按钮,触发UIControlEventTouchUpInside事件的时候 ,发出一个信号,后者是接受到这个信号,你要干什么,由你决定。

②游戏页面view,

倒计时动画介绍

上图:

倒计时动画.gif

—-构成:view背景为黑色,中间添加了一个label,显示当前的数字

—-实现思路: 要做的从给定的参数 anim 递减到 0 之后结束动画,然后执行completeBlock
,我是这样写一个类似于递归的动画:
①整体动画可以分为很多个,单个数字,做缩放和透明度改变的动画组

@用一个参数控制整体的动画的继续和停止,就是_animIndex
每一个动画group执行完毕后,在 - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag 中进行_animIndex--,并且添加下一组动画,看代码:

游戏界面如何搭建

①首页整体界面搭建
151299512-23020b7609d725bd

界面中每一个被我框起来的都是我封装的 GameSceneView,当然我们不能在每一个GameSceneView那如何实现”重用’呢’
实现思路:
①计算你的屏幕中需要多少个gameScene

②创建与之等同数量的scene
_frameArray存储的是 scene创建时的初始frame,便于点击错误时,直接恢复到初始的frame
_operateArray将创建好的scene集中到一起,便于管理

屏幕上所有的 scene都是向下滚动的,每次滚动判断是否超出屏幕,当用户点击正确、scene漂移到屏幕外的时候,再更新sceneframe,这个scene将被安排到最后一个scene的后面,上代码:

disPlayLink一直在调用 - (void)startScroll这个方法,刷新界面

点击正确之后 计算该 scene新的frame

这一部分用图很好解释:

161299512-4e87160e38bfa764

红色框为屏幕范围, 第0个scene超出屏幕后,新的位置即在 第4个scene的后面

GameSceneView 的构建

这一部分有一个小遗憾,应该将每行的button数量写成 参数,不应该写成4😀
每个button通过 button.layer的borderColor 和 borderWidth属性设置边框,所以显的有点粗糙。
主要代码:

解释一下:
对于其中ReactiveCocoa的解释
[btn rac_signalForControlEvents:UIControlEventTouchUpInside]就是当你点击button的时候 会发出一个信号,map:^id(id value) { ........}是接受到该信号之后,你做的一些操作,返回一个value对象 ,subscribeNext:^(id value) {.......} 就是 对于接受到的value做的一些操作

用一个比喻来说,[btn rac_signalForControlEvents:UIControlEventTouchUpInside] 就是水源,map:^id(id value) { ........}就是农夫山泉加工厂,subscribeNext:^(id value) {.......}就是水送到你手里了,你要干什么,洗脸洗脚喝掉随便你。。

对于游戏逻辑的解释:
isHasOtherSelected这个bool类型的变量 :
true代表已经有一个button被点击 false代表没有button被点击
②根据点击成功与否,返回完成状态completeType
点击成功:weakSelf.clickBlock(CompleteTypeVictory);
点击失败:

button闪烁动画如下

音频处理、

SoundPlayer这个类负责播放音频,调用AVAudioPlayer来播放音频
有三个方法:

关于点击音效的处理
我有两个方案,都在代码里面
①点击按钮时,按点击次数来播放对应的声音:
具体实现:

关于音频的来源:我将 马克西姆克罗地亚狂想曲分成了每个部分为1s的片段,大概200多个片段
这一部分有个疑问:声音文件一般不是分为左右声道吗,我将其中一个声道抽离出来当做背景音乐,另一个声道文件分成若干分,当按钮点击时播放是不是更好?懂电子音频处理的朋友出来回答下呗。

项目感想

①其实复杂动画也是 “缩放” “旋转” “改变透明度” “移动”等一些基础动画的组合,下次遇到动画的时候可以试着将动画进行分解,这样就会减小实现的难度,
②尽量将代码写的清晰易懂,不忙的时候多回去review代码,就可以发现当初代码的一些不合理的逻辑,这样才会进步,这些天回去将我的高仿半糖app review下,古人老话,温故而知新 可以为师矣
③学习之路,任重而道远,路漫漫其修远兮,吾将上下而求索

Github项目下载地址

温馨提示:app启动后 会有背景音乐响起,so,你懂的,点击按钮也会播放 克罗地亚狂想曲的片段,运行时请请调低音量

171299512-d22eeea07435f018

请运行.xcworkspace

点击去我的Github下载

1 2 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部