IOS-Tom貓小游戲實作-有解無憂

在學習了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.獲得系統聲音ID
    SystemSoundID 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.獲得系統聲音ID
    SystemSoundID 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

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

在這里插入圖片描述

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/290475.html

標籤：其他

上一篇：Android系統 linux內核按鍵驅動開發

下一篇：Java并發——Callable和Future介面