手把手教你如何实现iOS消消乐小游戏Demo

文章也同时在个人博客 http://kimihe.com/更新

引言

做消消乐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。感谢您的阅读，欢迎分享～