纯OC代码绘制PACMAN吃豆效果

各位读者老爷周末好，这篇文章应该在十一假期期间更新，当时由于发了篇Git的简介，就一直搁置了，今天周六明天不用上课，利用这个时间写一下，最近学习状态不佳，觉得不应该花费过多时间在写小游戏上面，我得好好学习学习网络多线程了，以后文章会慢慢转向总结OC中重要的知识点，毕竟基础得打扎实了，这样以后小游戏才能写的更顺手，程序里主要利用了些些Quartz2D中的基础知识，难度很适合像我这样的萌新。废话不多说，先上效果图，gif效果显示可能略卡，实际运行效果很流畅，代码文章结尾处有下载链接。

PACMAN

游戏中PACMAN的移动是通过手指滑动控制的，碰到一个红色的豆子会把它吃掉，接下来分布介绍下我的的方法：

第一步：如何画出PACMAN并实现嘴巴一张一合的效果

我是利用drawRect方法绘制的，就是画了一个3/4的圆弧，然后把一端连到圆心，再通过closePath方法封闭起来就可以，代码如下

-(void)drawRect:(CGRect)rect
{
    
    CGFloat starA = -M_PI/4 + self.progress * M_PI/4 ;
    CGFloat endA = M_PI/4 - self.progress * M_PI/4 ;
    CGPoint center = CGPointMake(25 , 25);

    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:25 startAngle:starA endAngle:endA clockwise:NO];
    [path addLineToPoint:center];
    [path closePath];
    [[UIColor yellowColor] setFill];
    [path fill];
}

起始角度和结束角度都设一下，这样看起来是一个口朝右的PACMAN，progress属性是为了之后通过改变它的值从而改变扇形的大小。注意在progress的set方法中要调用setNeedDisplay方法这样才会更新。

PACMAN画到一个长宽等于它直径的view上面（比如叫shapeView）然后把这个view放到viewController的view中去，之后的代码都在viewController.m中进行，之后要做的就是将self.shapeView.progress值周期性从0到1变化，最好不要完全等于1，嘴巴完全合上后圆形会消失，0到0.9不会影响视觉的，这里的周期性变化我用CADisplayLink完成的，时间间隔短用这个动画看起来流畅，注意因为嘴巴要张合，所以0到1之后还要再到0，然后再到1周期性变化，这个要求怎么实现，我用到了这么个方法，这段代码应该不难懂。

static int count = 0;

-(void)change
{
    if (count == 20) {
        count = 0;
    }
    
    if (count < 10) {
        self.shapeView.progress += 0.1;
    }
    
    if (count >= 10) {
        self.shapeView.progress -= 0.1;
    }
    
    count ++;
}

好，到这里嘴巴张合的效果就可以实现了。

第二步：PACMAN动起来！

这里我的代码写的略显臃肿，不够漂亮，我通过滑动手势的方向，上下左右分别写了四个方法，然后再设置第二个CADisplayLink计时器，来实现frame的变化，分别是x值的增加减少和y值的增加减少，每次滑动的时候让计时器停止然后再执行前往将要移动方向的方法即可，我还实现跑出屏幕一端再从另一端进入的效果，以往右边跑为例，只要x值超过了屏幕宽度，再让它的x值变为0减去shapeView的宽度的值即可。

这里有个细节也是小难点要注意，就是每次移动之后嘴巴的方向也要变化，我用到的方法是每次让shapeView旋转一定角度，角度的大小由之前的移动方向决定，比如PACMAN正在往右移动的时候，你往上滑动手指，需要让它往左转90度，如果往左滑手指，需要让它转180度，依次类推，那么如何知道上次的移动方向是哪里呢，我设置了一个变量a，往不同的方向移动就给a一个不同的值，这样每次新的移动之前判断一下a的值就知道了。我的程序里我初始让PACMAN默认往右跑，所以a是一直有正确的值的。

这一块大家看下我的代码理解起来容易些，由于代码比较臃肿我就不粘贴了

第三步：吃豆子的效果

这一步最为简单，只要初始的时候默认生成一些有颜色的imageView，对它的layer操作下设置成个圆形即可，然后每次移动的时候判断下shapeView的center到每个imageView的center的距离小于一定值，就让imageView消失即可，就 (x2-x1)² + (y2-y1)² <= (一定值)² 。我是这么写的。。

for (UIImageView *imageView in self.pointArray) {
        if ((imageView.center.x - self.shapeView.center.x) * (imageView.center.x - self.shapeView.center.x) + (imageView.center.y - self.shapeView.center.y) * (imageView.center.y - self.shapeView.center.y) <= 25*25  ) {
            imageView.hidden = YES;
        }
    }

代码写出来之后没去修改，本菜就写道这里了，大家下载代码的话用iphone6模拟器运行，里面好多值我直接用数字写的，没做屏幕适配什么的，就为了达成效果，有兴趣的朋友可以设置下障碍物，分数之类的把这个搞成个小游戏，今天就到这里了，有好的建议或者问题，大家留言讨论哦。

代码在这里下载https://github.com/SaberVicky/PACMAN