純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)2 + (y2-y1)2 <= (一定值)2 。我是這么寫的。。

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,251評論 25 708
  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,229評論 4 61
  • 懷念知青生活 轉眼46年過去了,我從16歲花季少年,到如今快步入花甲老年。46年前,偉大領袖揮揮手,我沒有選擇。那...
    無憂無慮61閱讀 1,109評論 2 2
  • -你的孩子到底在怕什么? 2017-03-24兔了個崽子兔了個崽子 你不了解,是沒辦法了解,孩子在想什么的。 有一...
    frank4li閱讀 221評論 0 0
  • 遇到一個很愛籃球的大學生,半場結束一直單挑,下午4點打到晚7:30,爽快的以球會友,但其實我是因為你才喜歡...
    T伊恩閱讀 305評論 0 0