在學習了ios知識后，今天我們來實現一個經典的ios小游戲，tom貓小游戲，廢話不多說，直接入題。

一、效果展示

二、準備工作與知識點

1. 因為該程序是通過圖片形成的一系列動畫生成的各類效果，因此我們需要準備實現時所需的圖片，同時聲音效果也是需要準備的，在文章結尾，我會將本次項目使用到的資源貼上來。

2.通過這個項目我們能夠學習到oc中一些基礎語法的使用，其中使用到了switch結構、按鈕連線綁定方法、本地包圖片資源獲取等知識。

最新的項目代碼已經推送到該地址：https://gitee.com/suwu150/tom-cat-play
下面是涉及到的圖片資源和音頻資源：https://download.csdn.net/download/suwu150/20464032

三、代碼開發與分享

3.1 創建項目與目錄結構說明

開始一個項目，我們最基本的就是創建項目，因為我們這個是手機app應用程序，那么我們就對應的創建ios應用，具體過程讓我手把手來教給你.
首先創建項目，鼠標小手手移動到頂部[File->New->Project…],狠狠的點擊下去，就會出現下面這個界面：

點擊[Next]按鈕，進入下一通道，然后呈現項目信息填寫，如下：

填寫完之后，就會出現這樣的目錄結構，說到底，這個結構中，對我們有用的文件也就四項，分別是：

• tomcat_img:存儲圖片資源和音頻信息
• ViewController：實現按鈕點擊時事件響應
• Main.storyboard：小游戲界面主要布局，圖片展示，效果舞臺
• Assets.xcassets：按鈕資源文件存儲
  

3.2 頁面布局、按鈕布局、點擊觸發布局

ios中對于生成布局一般有兩種方式，一種是通過代碼生成各個子組件，然后再通過特定方法將子組件添加到父級容器中，今天我們采用最簡單的方式來實現這個布局，好，那我們就拖拽大法走起。

按照上面步驟，我們點擊頂部【+】號，然后按照我們需要放置的位置放入組件，效果如下面形式哈，這個可以看大家各自心情，其中我們用到的組件有：

• Image View:展示初始化界面、展示動畫圖片
• Button：相應點擊效果，展示動作圖標，響應點擊頭部和左右腳時的動作事件
  其實最開始我們推拽之后，是不會有這些圖片按鈕的，需要我們選中我們的按鈕進行編輯，當我們選中按鈕時，Xcode編輯器右邊會有按鈕屬性，用來提示我們進行修改，下面我們就可以按照我們的效果進行修改，主要是進行更換背景圖片
  
  如上，我專門勾選了三個地方需要更改的：
• 一是按鈕標題，用來識別按鈕
• 二是Image屬性，用來給按鈕設置背景，這里我們就設置了名稱為eat的圖片
• 三是給按鈕設置唯一的編號，這個是在后面用來區分我們點擊的是哪一個按鈕的

好了，反正你就不停地拖拽鼠標，最后形成下面這個界面就可以了

3.3 點擊事件響應與界面聯動

對于點擊事件響應，就是當我們點擊按鈕的時候，我們做出哪些響應，在我們這個小游戲里，我們是播放具體的動畫，這個具體播放動畫的細節，就在我們ViewController.m文件中進行實現，但是這塊我們也可以通過拖拽去生成代碼，具體操作是按住control按鈕，然后拖動按鈕到ViewController.m文件中,如下區域內，會自動彈出輸入修改信息彈窗，按照我們要求輸入doAction名稱即可。

@interface ViewController () - (IBAction)doAction:(UIButton *)sender; @end

按照同樣方法，對所有按鈕進行連接綁定，對Image View組件也同樣進行綁定，并將其命名為imgViewCat，最終結果如下代碼即可：

@interface ViewController ()@property (weak, nonatomic) IBOutlet UIImageView *imgViewCat; - (IBAction)doAction:(UIButton *)sender; @end

最后我們需要在@implementation ViewController中實現這些綁定，由于我們需要處理的按鈕形式類似，我們使用switch進行將他們具體劃分，在這里就是用到了3.2節布局時配置的tag值了，通過sender.tag的形式傳遞給switch進行區分，然后執行不同的操作。

#import "ViewController.h"; #import <AudioToolbox/AudioToolbox.h>@interface ViewController ()@property (weak, nonatomic) IBOutlet UIImageView *imgViewCat; - (IBAction)doAction:(UIButton *)sender; @end@implementation ViewController- (void)viewDidLoad {[super viewDidLoad];// Do any additional setup after loading the view. }- (IBAction)doAction:(UIButton *)sender {NSLog(@"%@", @"6666");switch (sender.tag) {case 10:NSLog(@"%@", @"10");break;case 20:NSLog(@"%@", @"20");break;case 30:NSLog(@"%@", @"30");break;case 40:NSLog(@"%@", @"40");break;case 50:NSLog(@"%@", @"50");break;case 60:NSLog(@"%@", @"60");break;case 70:NSLog(@"%@", @"70");break;case 80:NSLog(@"%@", @"80");break;case 90:NSLog(@"%@", @"90");break;default:break;} }@end

到這里我們可以初步啟動應用了，當我們點擊個個按鈕時，會進行打印出按鈕當初配置的tag值。

3.4 動畫實現

在完成以上效果的基礎上，我們來實現動畫播放，仍然是在ViewController.m文件中，我們分別添加定義和實現

// 定義方法 - (void)startAnimation:(int)count playPicName:(NSString *) playPicName soundName:(NSString *) soundName;// 實現方法 // 其中使用到三個參數，分別是count，playPicName，soundName - (void)startAnimation:(int)count playPicName:(NSString *) playPicName soundName:(NSString *) soundName {NSLog(@"%@", @"開始動畫");// 通過isAnimating屬性進行判斷，當前動畫是否正在播放，當正在播放時，阻止其重新開始播放if(self.imgViewCat.isAnimating){return;}// 定義數組，用于存儲需要播放動畫的圖片資源NSMutableArray *arrayM = [NSMutableArray array];for (int i = 0; i <= count; i++) {// 按照索引進行格式化圖片名稱，【@"%@_%02d.jpg"】格式用來格式化名稱，同時補齊數字NSString *imgName = [NSString stringWithFormat: @"%@_%02d.jpg", playPicName, i];// [NSBundle mainBundle]表示安裝包所在的地址路徑// 封裝資源圖片的路徑地址NSString *path = [[NSBundle mainBundle] pathForResource:imgName ofType:nil];// 按照路徑讀取圖片資源文件UIImage *imgCat = [UIImage imageWithContentsOfFile: path];NSLog(@"%@_%@_%@", imgCat, path, imgName);[arrayM addObject:imgCat];}self.imgViewCat.animationImages = arrayM;// 設置每一幀之間的間隔self.imgViewCat.animationDuration = count * 0.04;// 設置動畫重復次數self.imgViewCat.animationRepeatCount = 1;// 同步調用音頻播放，在后面一步進行實現該方法// [self playSoundEffect: soundName];// 開始播放動畫[self.imgViewCat startAnimating];}

• count： 代表每個動畫的幀數，通過參數的形式傳遞給播放方法
• playPicName：需要播放動畫的名稱，用于在資源包中查找圖片資源
• soundName：用于播放動畫時，同步播放音頻的名稱，播放音頻文件

實現完該方法之后，我們需要將其添加到最開始我們設置的switch響應方法中，通過調用startAnimation方法傳遞不同的參數的形式去實現對應的動畫效果。

- (IBAction)doAction:(UIButton *)sender {switch (sender.tag) {case 10:NSLog(@"%@", @"10");[self startAnimation: 12 playPicName:@"cymbal" soundName: @"cymbal.m4a"];break;case 20:NSLog(@"%@", @"20");[self startAnimation: 27 playPicName:@"fart" soundName: @"fart003_11025.m4a"];break;case 30:NSLog(@"%@", @"30");[self startAnimation: 80 playPicName:@"drink" soundName: @"drink.m4a"];break;case 40:NSLog(@"%@", @"40");[self startAnimation: 39 playPicName:@"eat" soundName: @"eat.m4a"];break;case 50:NSLog(@"%@", @"50");[self startAnimation: 55 playPicName:@"scratch" soundName: @"scratch.m4a"];break;case 60:NSLog(@"%@", @"60");[self startAnimation: 23 playPicName:@"pie" soundName: @"pie.m4a"];break;case 70:NSLog(@"%@", @"70");[self startAnimation: 80 playPicName:@"knockout" soundName: @"knockout.m4a"];break;case 80:NSLog(@"%@", @"80");[self startAnimation: 29 playPicName:@"foot_right" soundName: @"foot_right.m4a"];break;case 90:NSLog(@"%@", @"90");[self startAnimation: 29 playPicName:@"foot_left" soundName: @"foot_left.m4a"];break;default:break;} }

3.5 聲音播放

在完成以上效果的基礎上，我們來實現聲音音頻的播放，仍然是在ViewController.m文件中，我們分別添加定義和實現

// 定義方法 - (void)playSoundEffect:(NSString *)name;// 實現方法 /*** 播放音效文件** @param name 音頻文件名稱 */ -(void)playSoundEffect:(NSString *)name{NSString *audioFile=[[NSBundle mainBundle] pathForResource:name ofType:nil];NSURL *fileUrl=[NSURL fileURLWithPath:audioFile];//1.獲得系統聲音IDSystemSoundID soundID=0;/*** inFileUrl: 音頻文件url* outSystemSoundID:聲 id(此函數會將音效文件加入到系統音頻服務中并返回一個長整形ID) */AudioServicesCreateSystemSoundID((__bridge CFURLRef)(fileUrl), &soundID);//如果需要在播放完之后執行某些操作,可以調用如下方法注冊一個播放完成回調函數 AudioServicesAddSystemSoundCompletion(soundID, NULL, NULL, soundCompleteCallback, NULL);//2.播放音頻AudioServicesPlaySystemSound(soundID);//播放音效AudioServicesPlayAlertSound(soundID);//播放音效并震動 }

• name：用于播放動畫時，同步播放音頻的名稱，播放音頻文件

完成該方法后，將其同步添加到動畫播放的步驟中，就算大功告成了。

3.6 完整代碼

通過上面每一步的具體操作，我們就可以正式運行我們的項目了，起飛吧，當我們點擊按鈕時，分別出發對應的響應，實現整個動畫和音頻的播放，下面是整個完整的代碼：

#import "ViewController.h"; #import <AudioToolbox/AudioToolbox.h>@interface ViewController ()@property (weak, nonatomic) IBOutlet UIImageView *imgViewCat; - (IBAction)doAction:(UIButton *)sender; - (void)startAnimation:(int)count playPicName:(NSString *) playPicName soundName:(NSString *) soundName; - (void)playSoundEffect:(NSString *)name; @end@implementation ViewController- (void)viewDidLoad {[super viewDidLoad];// Do any additional setup after loading the view. }/*** 播放音效文件** @param name 音頻文件名稱 */ -(void)playSoundEffect:(NSString *)name{NSString *audioFile=[[NSBundle mainBundle] pathForResource:name ofType:nil];NSURL *fileUrl=[NSURL fileURLWithPath:audioFile];//1.獲得系統聲音IDSystemSoundID soundID=0;/*** inFileUrl: 音頻文件url* outSystemSoundID:聲 id(此函數會將音效文件加入到系統音頻服務中并返回一個長整形ID) */AudioServicesCreateSystemSoundID((__bridge CFURLRef)(fileUrl), &soundID);//如果需要在播放完之后執行某些操作,可以調用如下方法注冊一個播放完成回調函數 AudioServicesAddSystemSoundCompletion(soundID, NULL, NULL, soundCompleteCallback, NULL);//2.播放音頻AudioServicesPlaySystemSound(soundID);//播放音效AudioServicesPlayAlertSound(soundID);//播放音效并震動 } // 實現方法 // 其中使用到三個參數，分別是count，playPicName，soundName - (void)startAnimation:(int)count playPicName:(NSString *) playPicName soundName:(NSString *) soundName {NSLog(@"%@", @"開始動畫");// 通過isAnimating屬性進行判斷，當前動畫是否正在播放，當正在播放時，阻止其重新開始播放if(self.imgViewCat.isAnimating){return;}// 定義數組，用于存儲需要播放動畫的圖片資源NSMutableArray *arrayM = [NSMutableArray array];for (int i = 0; i <= count; i++) {// 按照索引進行格式化圖片名稱，【@"%@_%02d.jpg"】格式用來格式化名稱，同時補齊數字NSString *imgName = [NSString stringWithFormat: @"%@_%02d.jpg", playPicName, i];// [NSBundle mainBundle]表示安裝包所在的地址路徑// 封裝資源圖片的路徑地址NSString *path = [[NSBundle mainBundle] pathForResource:imgName ofType:nil];// 按照路徑讀取圖片資源文件UIImage *imgCat = [UIImage imageWithContentsOfFile: path];NSLog(@"%@_%@_%@", imgCat, path, imgName);[arrayM addObject:imgCat];}self.imgViewCat.animationImages = arrayM;// 設置每一幀之間的間隔self.imgViewCat.animationDuration = count * 0.04;// 設置動畫重復次數self.imgViewCat.animationRepeatCount = 1;// 同步調用音頻播放，在后面一步進行實現該方法[self playSoundEffect: soundName];// 開始播放動畫[self.imgViewCat startAnimating]; }- (IBAction)doAction:(UIButton *)sender {switch (sender.tag) {case 10:NSLog(@"%@", @"10");[self startAnimation: 12 playPicName:@"cymbal" soundName: @"cymbal.m4a"];break;case 20:NSLog(@"%@", @"20");[self startAnimation: 27 playPicName:@"fart" soundName: @"fart003_11025.m4a"];break;case 30:NSLog(@"%@", @"30");[self startAnimation: 80 playPicName:@"drink" soundName: @"drink.m4a"];break;case 40:NSLog(@"%@", @"40");[self startAnimation: 39 playPicName:@"eat" soundName: @"eat.m4a"];break;case 50:NSLog(@"%@", @"50");[self startAnimation: 55 playPicName:@"scratch" soundName: @"scratch.m4a"];break;case 60:NSLog(@"%@", @"60");[self startAnimation: 23 playPicName:@"pie" soundName: @"pie.m4a"];break;case 70:NSLog(@"%@", @"70");[self startAnimation: 80 playPicName:@"knockout" soundName: @"knockout.m4a"];break;case 80:NSLog(@"%@", @"80");[self startAnimation: 29 playPicName:@"foot_right" soundName: @"foot_right.m4a"];break;case 90:NSLog(@"%@", @"90");[self startAnimation: 29 playPicName:@"foot_left" soundName: @"foot_left.m4a"];break;default:break;} } @end

四、總結

經過上面一系列的操作，已經完成了我們的小游戲了，可以安裝到自己的手機上嘗嘗鮮了，哈哈哈哈。
針對這個小游戲，我們主要是通過拖拽可視化界面的形式布局，然后通過Switch的方案區分具體點擊內容，最后通過封裝動畫播放和聲音音頻播放完成整個小游戲。

對于以上使用到的各個資源，已經分發到能夠下載到的平臺，如果在下載時遇到問題，可隨時聯系。

最新的項目代碼已經推送到該地址：https://gitee.com/suwu150/tom-cat-play
下面是涉及到的圖片資源和音頻資源：https://download.csdn.net/download/suwu150/20464032

---

接著，我們干了這碗毒雞湯，各位再會。

總結

以上是生活随笔為你收集整理的IOS-Tom猫小游戏实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。