在學(xué)習(xí)了ios知識后，今天我們來實(shí)現(xiàn)一個經(jīng)典的ios小游戲，tom貓小游戲，廢話不多說，直接入題。

一、效果展示

二、準(zhǔn)備工作與知識點(diǎn)

1. 因?yàn)樵摮绦蚴峭ㄟ^圖片形成的一系列動畫生成的各類效果，因此我們需要準(zhǔn)備實(shí)現(xiàn)時所需的圖片，同時聲音效果也是需要準(zhǔn)備的，在文章結(jié)尾，我會將本次項(xiàng)目使用到的資源貼上來。

2.通過這個項(xiàng)目我們能夠?qū)W習(xí)到oc中一些基礎(chǔ)語法的使用，其中使用到了switch結(jié)構(gòu)、按鈕連線綁定方法、本地包圖片資源獲取等知識。

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

三、代碼開發(fā)與分享

3.1 創(chuàng)建項(xiàng)目與目錄結(jié)構(gòu)說明

開始一個項(xiàng)目，我們最基本的就是創(chuàng)建項(xiàng)目，因?yàn)槲覀冞@個是手機(jī)app應(yīng)用程序，那么我們就對應(yīng)的創(chuàng)建ios應(yīng)用，具體過程讓我手把手來教給你.
首先創(chuàng)建項(xiàng)目，鼠標(biāo)小手手移動到頂部[File->New->Project…],狠狠的點(diǎn)擊下去，就會出現(xiàn)下面這個界面：

點(diǎn)擊[Next]按鈕，進(jìn)入下一通道，然后呈現(xiàn)項(xiàng)目信息填寫，如下：

填寫完之后，就會出現(xiàn)這樣的目錄結(jié)構(gòu)，說到底，這個結(jié)構(gòu)中，對我們有用的文件也就四項(xiàng)，分別是：

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

3.2 頁面布局、按鈕布局、點(diǎn)擊觸發(fā)布局

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

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

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

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

3.3 點(diǎn)擊事件響應(yīng)與界面聯(lián)動

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

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

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

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

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

#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

到這里我們可以初步啟動應(yīng)用了，當(dāng)我們點(diǎn)擊個個按鈕時，會進(jìn)行打印出按鈕當(dāng)初配置的tag值。

3.4 動畫實(shí)現(xiàn)

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

// 定義方法 - (void)startAnimation:(int)count playPicName:(NSString *) playPicName soundName:(NSString *) soundName;// 實(shí)現(xiàn)方法 // 其中使用到三個參數(shù)，分別是count，playPicName，soundName - (void)startAnimation:(int)count playPicName:(NSString *) playPicName soundName:(NSString *) soundName {NSLog(@"%@", @"開始動畫");// 通過isAnimating屬性進(jìn)行判斷，當(dāng)前動畫是否正在播放，當(dāng)正在播放時，阻止其重新開始播放if(self.imgViewCat.isAnimating){return;}// 定義數(shù)組，用于存儲需要播放動畫的圖片資源NSMutableArray *arrayM = [NSMutableArray array];for (int i = 0; i <= count; i++) {// 按照索引進(jìn)行格式化圖片名稱，【@"%@_%02d.jpg"】格式用來格式化名稱，同時補(bǔ)齊數(shù)字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;// 設(shè)置每一幀之間的間隔self.imgViewCat.animationDuration = count * 0.04;// 設(shè)置動畫重復(fù)次數(shù)self.imgViewCat.animationRepeatCount = 1;// 同步調(diào)用音頻播放，在后面一步進(jìn)行實(shí)現(xiàn)該方法// [self playSoundEffect: soundName];// 開始播放動畫[self.imgViewCat startAnimating];}

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

實(shí)現(xiàn)完該方法之后，我們需要將其添加到最開始我們設(shè)置的switch響應(yīng)方法中，通過調(diào)用startAnimation方法傳遞不同的參數(shù)的形式去實(shí)現(xiàn)對應(yīng)的動畫效果。

- (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 聲音播放

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

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

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

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

3.6 完整代碼

通過上面每一步的具體操作，我們就可以正式運(yùn)行我們的項(xiàng)目了，起飛吧，當(dāng)我們點(diǎn)擊按鈕時，分別出發(fā)對應(yīng)的響應(yīng)，實(shí)現(xiàn)整個動畫和音頻的播放，下面是整個完整的代碼：

#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.獲得系統(tǒng)聲音IDSystemSoundID soundID=0;/*** inFileUrl: 音頻文件url* outSystemSoundID:聲 id(此函數(shù)會將音效文件加入到系統(tǒng)音頻服務(wù)中并返回一個長整形ID) */AudioServicesCreateSystemSoundID((__bridge CFURLRef)(fileUrl), &soundID);//如果需要在播放完之后執(zhí)行某些操作,可以調(diào)用如下方法注冊一個播放完成回調(diào)函數(shù) AudioServicesAddSystemSoundCompletion(soundID, NULL, NULL, soundCompleteCallback, NULL);//2.播放音頻AudioServicesPlaySystemSound(soundID);//播放音效AudioServicesPlayAlertSound(soundID);//播放音效并震動 } // 實(shí)現(xiàn)方法 // 其中使用到三個參數(shù)，分別是count，playPicName，soundName - (void)startAnimation:(int)count playPicName:(NSString *) playPicName soundName:(NSString *) soundName {NSLog(@"%@", @"開始動畫");// 通過isAnimating屬性進(jìn)行判斷，當(dāng)前動畫是否正在播放，當(dāng)正在播放時，阻止其重新開始播放if(self.imgViewCat.isAnimating){return;}// 定義數(shù)組，用于存儲需要播放動畫的圖片資源NSMutableArray *arrayM = [NSMutableArray array];for (int i = 0; i <= count; i++) {// 按照索引進(jìn)行格式化圖片名稱，【@"%@_%02d.jpg"】格式用來格式化名稱，同時補(bǔ)齊數(shù)字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;// 設(shè)置每一幀之間的間隔self.imgViewCat.animationDuration = count * 0.04;// 設(shè)置動畫重復(fù)次數(shù)self.imgViewCat.animationRepeatCount = 1;// 同步調(diào)用音頻播放，在后面一步進(jìn)行實(shí)現(xiàn)該方法[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

四、總結(jié)

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

對于以上使用到的各個資源，已經(jīng)分發(fā)到能夠下載到的平臺，如果在下載時遇到問題，可隨時聯(lián)系。

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

---

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。