消消乐实现下坠_手把手教你如何实现iOS消消乐小游戏Demo
引言
做消消乐Demo属于一个意外,本想借助学习iOS游戏开发把CoreAnimation学好,并完成第一个游戏Demo:俄罗斯方块。却在这过程中发现了一些实现消消乐的小技巧,于是兴起完成了这个小Demo,供大家参考。
当然,这个Demo不是平白无故产生的,笔者也是参考了一些资料,其中就包括斯坦福大学的iOS公开课,这里放上百度云的链接(含字幕):Dynamic Animation。视频是用swift讲的,笔者从视频中获取了帮助和灵感,大家英语好的话也可以尝试学习一下。
本文将会讲解如何实现这个消消乐小游戏,相信你一定会有所收获。
项目地址
Cubee Game
欢迎一切fork,issue,pull request来帮助该项目做得更好。
效果演示
如下图,和大多数消消乐一样,Demo根据颜色,进行垂直,水平以及两个斜向的三消。用户可以上下左右自由交换两个方块的位置。
消消乐Demo效果
基本思路
先讲解一下基本思路。主要分如下几个部分:
首先,大家可以看到这个消消乐需要一些动画,以及一些诸如碰撞和重力下落等物理特性的支持。
其次,我们需要能够正确计算出三消,并以美观的动画样式将其消除。
接着,我们需要响应用户的移动方块的操作,实现方块位置的调换。
最后,我们添加一些美化效果。
物理特性及其对应的动画
很显然,物理特性实现的好坏,直接关系到消消乐游戏的体验。在Demo中笔者使用了UIDynamicAnimator和UIDynamicBehavior这两个基于UIKit的类来进行管理。
通过UIDynamicAnimator来实现各种物理特性发生时的动画,如下落加速动画和碰撞反弹动画。而其中涉及的物理特性则使用UIDynamicBehavior。
KMAnimatorManager
动画管理器:KMAnimatorManager继承自UIDynamicAnimator,用来管理各种物理特性对应的动画效果。它会关联到一个UIView,这个UIView是我们动画展现的场所,之后所有的物理特性和动画显示都在这个view上进行。如下:
_animator = [[KMAnimatorManager alloc] initWithReferenceView:self];
_animator.delegate = self;
Demo中,我们所有的游戏场景都在KMGameView的实例_gameView中,上述代码的self就是_gameView。而封装好的_gameView就可以直接添加到任意ViewController了。如下:
_gameView = [[KMGameView alloc] initWithFrame:self.view.frame];
UIImage *background = [UIImage imageNamed:@"background"];
_gameView.contentMode = UIViewContentModeScaleAspectFill;
_gameView.layer.contents = (__bridge id _Nullable)(background.CGImage);
_gameView.delegate = self;
[self.view addSubview:_gameView];
KMCubeBehavior
通过自定义UIDynamicBehavior的子类KMCubeBehavior,笔者向其中封装了诸如重力,碰撞检测,弹性系数,是否围绕质心旋转等特性。这可能需要你有一些相关物理学方面的基础。但幸好Apple已经做好了封装,我们大可以放心地使用它提供的接口。如下:
- (instancetype)init
{
self = [super init];
[self addChildBehavior:self.gravity];
[self addChildBehavior:self.collider];
[self addChildBehavior:self.animationOptions];
return self;
}
- (void)addItem:(id)item
{
[self.gravity addItem:item];
[self.collider addItem:item];
[self.animationOptions addItem:item];
}
我们向KMCubeBehavior类中加入了所需的各种物理特性,使得之后基于此生成的每一个小方块都有这些效果。如下:
_cubeBehavior = [[KMCubeBehavior alloc] init];
[_animator addBehavior:_cubeBehavior];
三消计算及消除动画
消除的时机
在Demo中,我们以随机下落不同颜色方块的形式来累积砖块,供用户调换位置来消除。因此,需要在两个情况下进行三消判断。一个是在方块下落动画结束后,一个是在用户执行完调换操作。
对于前者我们可以利用中的接口- (void)dynamicAnimatorDidPause:(UIDynamicAnimator *)animator。每当物理动画执行完毕,我们都可以进入该方法,在其中执行我们的三消计算。
消除的计算
整个的计算,我们会多次调用- (NSArray *)checkCrossAt:(KMDropView *)centerView方法。该方法类似于一个扫描,传入一个方块视图,然后执行四个方向的扫描,发现可以三消的方块后,将它们进行标记,最后以数组统一返回。供外部程序进行消除。
这其中涉及到如何识别方块是否属于同一个类型。虽然Demo是通过颜色区分,但在更多实际场景中,我们可以加载各种图片,比如各种颜色的糖果点心等。因此对于视图中所有小方块,笔者让它们继承于自定义的KMDropView类,其中封装了方块所需的各种属性,详细内容我们放到下一小节讲。
这里,你需要知道,我们通过任一方块的type属性来进行识别,type是一个字符串,其内容会在方块创建时进行赋值,不同类型的方块有不同的type。用户看到的仅仅是视图样式,背后真正的匹配可以和视图样式完全独立。例如,我们把匹配三消的方块加入消除数组中:
NSString *centerColor = centerView.type;
NSString *leftColor = (leftView)?leftView.type : @"#$%^&*";
NSString *rightColor = (rightView)?rightView.type : @"#$%^&*";
...
...
NSMutableArray *totalArr = [NSMutableArray new];
if ([centerColor isEqualToString:leftColor] && [centerColor isEqualToString:rightColor]) {
NSArray *arr = [NSArray arrayWithObjects:leftView, centerView, rightView, nil];
[totalArr addObjectsFromArray:arr];
}
因此,整个的三消计算思路是遍历所有的方块,利用- (NSArray *)checkCrossAt:(KMDropView *)centerView检测可消除的方块,不断地进行消除。该算法思路比较简单,可以后续进一步优化。
消除动画
有了需要消除的方块,我们就可以执行消除动画,将它们从视图中移除。在- (void)kickAwayDrops:(NSArray *)drops方法中进行响应的实现。我们将这些视图移动至视图的视野外侧,然后从父视图上移除。最后我们的动画管理器KMAnimatorManager的实例_cubeBehavior会移除这些方块。方块就会以美观的动画形式消除。如下:
[UIView animateWithDuration:0.5 animations:^{
for (UIView *drop in drops) {
//设定移除后的位置
int x = self.bounds.size.width+DROP_SIZE.width;
int y = - DROP_SIZE.height;
drop.center = CGPointMake(x, y);
}
} completion:^(BOOL finished) {
[drops makeObjectsPerformSelector:@selector(removeFromSuperview)];
}];
for (UIView *drop in drops) {
[_cubeBehavior removeItem:drop];
}
用户调换操作
KMPanGestureRecognizer
消消乐需要响应用户对于方块调换的操作,笔者在这里首先想到了使用Gesture。为了能够更好地响应用户操作,并简化View的代码,我自己封装了一个手势KMPanGestureRecognizer,并将其添加到游戏主视图_gameView中。
查看其头文件,可以看到一些外部需要的属性和接口。其中比较重要的就是对于手势的判断。用户移动方块属于一种Pan操作,而不是简单的Swipe。这表明,用户除了常规的轻扫屏幕,也可以先按住一个方块,然后再慢慢悠悠地往一个方向滑动。因此,系统原生的UISwipeGestureRecognizer可能就不能很好满足需求了。特自定义一个。
在自定义的手势中,对于手指滑动的方向,我们需要设定阈值,某些范围内的滑动我们需要将其标记为无效滑动,即该操作不匹配我们的手势。通过枚举KMPanGestureRecognizerDirection,笔者定义了一系列方向类型,并通过direction这个@property供外部读取。
此外,笔者来提供了一些接口,供特定情况下的使用,如可以在手指按住方块时进行回调接口,通知外部代码让改方块高亮,以达到更好的显示效果。
KMDropView
有了调换手势,我们就可以在手势提供的帮助下,正确得知移动两个方块的时机。上文提到过,我们的方块的视图和背后的type是分离的。type确定了,方块的类型就确定了,用户看到的显示效果可以额外设置,与type独立。所以调换两个方块,最根本的是调换它们的type,而显示的视图效果是可以通过动画来“伪装”的。
因此,在自定义的KMDropView中。笔者提供了一系列@property来正确设置方块的属性。对于方块使用的思路,笔者经过思考,认为如下是比较合理的:对于方块属性的设置并不直接体现在方块的样式上,方块通过state字段的设置才最终完成样式的绘制。而这个state也是通过枚举,举出了方块所有可能的状态。因此一个方块最终显示的效果,其实是取决于它当前所处的状态的。例如普通状态或者高亮状态。
调换动画
有了调换的时机和调换所需改变的东西,我们就可以实现最终的调换动画了。这里笔者使用了一些“伪装”。笔者并没有真的移动两个方块的位置,而是在底层的模型中简单地调换type,而上层的用户视图中,临时生成两个方块,覆盖在两个原方块上方。然后将这两个临时方块进行位移操作,在动画完成后消除,从而产生方块调换的假象。为此,我特地在KMDropView中加入了一个深拷贝(KMDropView *)duplicateFrom:(KMDropView *)originView;类方法,使得临时生成的方块能够和原来的看起来一模一样。
美化操作
有了上述三步最关键的操作,剩下的就是一些美化和代码整理。例如高亮选中的方块,把游戏主视图封装起来,独立于ViewConroller等等。
总结
这个消消乐小Demo的编写,还是涉及到了不少新内容。并且含有很多可以值得优化算法的地方。越往后学习真的越感觉到基础的重要性,甚至出现了跨学科的需求。希望大家对于编程,能够静下心打好基础,避免急于求成。
希望我的这篇文章能够给大家带来帮助,也非常欢迎大家提出宝贵意见,帮助改进这个Demo。感谢您的阅读,欢迎分享~
消消乐实现下坠_手把手教你如何实现iOS消消乐小游戏Demo相关推荐
- 消消乐实现下坠_教你用Vue写一个开心消消乐
之前做过一个算法题,算法要求就是写一个开心消消乐的逻辑算法,当时也是考虑了一段时间才做出来.后来想了想,既然核心算法都有了,能不能实现一个开心消消乐的小游戏呢,于是花了两天时间做了一个小游戏出来. 效 ...
- 手把手教你用Python改造一款外星人入侵小游戏
点击上方"Python爬虫与数据挖掘",进行关注 回复"书籍"即可获赠Python从入门到进阶共10本电子书 今 日 鸡 汤 为学应须毕生力,攀高贵在少年时. ...
- 消消乐实现下坠_消消乐游戏算法实现
先上前端效果图 3消乐地图初始化的时候不允许有下面两种情况的发生,就是不允许3个(3个以上已经包含3个,所以只要判断3个就可以了)相同颜色的格子连在一起, 下图是两种情况,细分分为6种情况,就是初始点 ...
- 消消乐实现下坠_消消乐.cpp
#include #include #include #define High 600//定义画布长度与高度 #define Width 600 #define step 50//定义方块大小 str ...
- uniaccess安全助手卸载_手把手教你卸载电脑的流氓软件(每天一个小知识)
阅读本文前,请您先点击上面的"蓝色字体",再点击"关注",这样您就可以继续免费收到文章了.每天都有分享,完全是免费订阅,请放心关注. 注:本文转载自网络,不代表 ...
- canvas绘制竖排的数字_大佬教你用Python Tkinter实现数字猜谜小游戏
Tkinter是Python的Tk GUI(图形用户界面)工具包和事实上的标准GUI 的标准接口.GUI使您可以使用大多数操作系统使用的可视项(例如窗口,图标和菜单)与计算机进行交互.这个功能强大的工 ...
- 手把手教你写出《三子棋》小游戏
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一.设计思路 二.具体步骤 1.游戏的逻辑 2.游戏的实现 1)头文件的使用 2)InitBoard(初始化棋盘) 3 ...
- vscode angular智能提示_【线下活动】手把手教你玩转 VS Code 插件开发
感谢 Google Developer Group 的邀请,3 月 30 号下午,韩老师将手把手带你玩转 VS Code 插件开发. Angular 使用了 TypeScript,VS Code 使用 ...
- 软件_手把手教vscode配置c++,python开发环境
原创:软件_手把手教vscode配置c++,python开发环境 之前主用Python作为项目开发语言,将项目迁移到arm边缘盒子上后发现arm的cpu不给力,软件速度低于预期,所以计划将部分程序改为 ...
最新文章
- 怎么用express搭建一个服务器
- SpringBoot配置属性之NOSQL
- 用JavaScript实现列数据的标出重复项和去重(解决科学计数法的excel数据去重异常问题)
- 邀您共赴数据库学术顶会ICDE 2019——阿里云专场 零距离接触达摩院数据库“最强大脑”...
- 纵横免root框架打不开应用怎么办_很好用的软件多开神奇安卓欧皇十框架!!!...
- Mysql索引示例_MYSQL索引实例
- 微服务精华问答 | 什么是金丝雀释放?
- textarea 内容前端展示换行php处理
- OO生存指.....抱歉无法生存
- 如何安装inf类型驱动程序 inno
- 第八章节 文件操作一 (文件对话框)
- android的抓包工具,安卓抓包工具
- IE8中解决Cell华表插件不显示方法!
- matlab fig 字体,关于.fig文件的font,请教达人,多谢
- java web 使用 Freemarker 导出word,zip包导出多个word
- linux配置yum源的三种方法:
- Linux常用命令大全(史无前例的命令大全)
- wifi搜索不到连接不上的问题(企业局域网wifi)
- 360收藏夹html文件,360浏览器收藏夹在哪个文件夹
- 51单片机免冷启动下程序不用断电重启也能下载
热门文章
- POJ 3667 Hotel 线段树区间合并
- CLR: 那些你不知道你不知道的事情 程序集(Assembly)和模块(Managed Module)
- 转的:SQL执行提高效率的多种方法
- 交换机接口用了那几根线_【网工必知】图集:交换机接口知识大全
- rtt面向对象oopc——1.rtt定义的这些类有什么用?
- C语言课后习题(40)
- malloc()与calloc区别
- html js 回调函数,js中回调函数的学习笔记
- 每日一题 丨2020.06.02
- Java编程中忽略这些细节,Bug肯定找上你