iOS菜狗養成路之石頭剪刀布

iOS菜狗養成路之石頭剪刀布

經歷了之前BullEyeGame的鍛鍊，是不是對viewcontroller的使用，以及一些button、label、slider等控件使用有了一定的瞭解。

那麼今天，讓我們通過這個亙古不變的遊戲——石頭剪刀布來加強一下button、label的使用，同時學習使用兩個view，以及image view，並瞭解動畫禎序列的機制。話不多說，就讓我們開始吧，首先還是老樣子，先上圖看看最後的效果。

操作界面（醜是醜了點，不過我們知道了內部的運行機制，外觀都是可以根據需要進行修改的：））

玩家通過選擇出拳，然後顯示結果界面。

那麼還是老樣子，事實上基本上所有的項目開發都是以下這三個步驟：
1、界面搭建
2、代碼實現
3、整體完善

那麼我們廢話不多說，現在就開始，建立一個single view空項目，這裏跟之前一樣，我就不贅述了，直接從界面搭建開始講起。

1、界面搭建

跟之前也是一樣的，在main.storyboard中，移動控件，效果如下：

是不是很奇怪，除了圖片沒有放上去，爲什麼下面的選擇出拳的界面也沒有？沒錯，那是因爲我們還沒有添加，這個就是一個新的view界面，我們在遊戲進行時，將這個界面彈出來，遊戲界面顯示時候，將界面隱藏，這樣就能比較清晰直觀的給用戶良好的體驗。

那麼我們現在添加一個view將開始按鈕覆蓋，同時添加一些圖片，使得界面稍微好看一點（雖然一直醜）

界面我們就先講到這裏，具體如果你想把這個做的更加的精緻，那麼可以根據自己的想法進行設計（歡迎交流討論）

2、代碼實現

說實在的，這個纔是重頭戲，然而其實對於這個遊戲，代碼、以及思路真的是簡單。

a、設置兩個數組存放圖像，然後將電腦和用戶的圖片進行序列幀動畫播放。
b、對每個圖片進行tag標記，通過對tag的判斷比較，輸出不同的結果。
c、當判斷結束，停止動畫，並且在前端顯示結果，同時彈出（開始按鈕）
d、引入媒體播放框架，設置背景音樂。
讓我們一點一點地來實現吧

首先我們先將每一個控件對象進行變量的申明，並且進行連接關聯。在此因爲c博對於圖片數量要求嚴格，就不多上圖了。

緊接着我們開始討論如何讓石頭剪刀布動起來。

上次我們知道，如果想讓程序一運行就開始執行某些方法或者效果，那麼只要寫在viewdidload方法中就可以了，那麼這次也是一樣，首先我們創建一個數組用於存放圖片。

 NSArray *_imageList;
 _imageList = @[[UIImage imageNamed:@"石頭.png"],
               [UIImage imageNamed:@"剪刀.png"],
               [UIImage imageNamed:@"布.png"]];

數組設置好了，我們只需要調用apple已經給我們封裝好了的動畫禎播放方法進行數組播放就好，在這之前先要做以下幾項工作：、
1、設置動畫播放的數組
2、設置動畫播放時長
3、開始播放

    //1.設置播放動畫數組
    //電腦動畫播放的設置
    [self.computerImage setAnimationImages:_imageList];
    //用戶動畫播放的設置
    [self.playerImage setAnimationImages:_imageList];
    //2.設置播放時長
    [self.computerImage setAnimationDuration:1.0f];
    [self.playerImage setAnimationDuration:1.0f];
    //3.start
    [self.computerImage startAnimating];
    [self.playerImage startAnimating];

就這樣，圖片就會按照數組中的順序進行播放，效果還是很讚的。

接下來，我們是不是就應該進行出拳了，那麼在這之前先給用戶選擇那邊的動畫禎每張圖片進行一個tag標記

這樣玩家選擇一個出拳的操作，就會有相應的0-2的數字代表。那麼我們給電腦的出拳選擇是什麼呢？毋庸置疑，當然是隨機數咯，生成一個0-2的隨機數，想必大家肯定已經會了吧。

//arc4random（）％ x 隨機生成一個0到x－1的數
NSInteger computerSelect = arc4random() % 3;
//將用戶的選擇操作對應的tag賦值給一個整數類型playselect變量
NSInteger playSelect = sender.tag;

緊接着是不是只需要將computerSelect和playSelect進行比較，根據不同的結果，顯示不同的說明，那麼這個功能只需要用到簡單的if－else if － else就可以完成

//用於存放比對結果
NSInteger result = playSelect - computerSelect;
//比賽結果的內容
NSString *stringMessage;
    //判斷勝負
if (result == 0) {
    //平局
    stringMessage = @"平局了，加油！";
}else if (result == -1 || result == 2){
    //用戶贏
    stringMessage = @"恭喜你贏了！";
    NSInteger playerResult = [self.playerScore.text integerValue];
    playerResult ++;
   [self.playerScore setText:[NSString stringWithFormat:@"%d",playerResult]];
}else{
   //電腦贏
   stringMessage = @"太可惜你輸了";
   NSInteger computerResult = [self.computerScore.text integerValue];
   computerResult ++;
  [self.computerScore setText:[NSString stringWithFormat:@"%d",computerResult]];
}

其中當result爲0時，那麼可以判定爲平局，將平局的消息存放置stringmessage變量中。

當結果爲－1 或者2時，可以易知爲用戶勝利，那麼首先設置勝利的消息到stringmessage中，然後玩家成績label類型的playerScore轉化爲整型賦值給playresult，然後進行playresult＋＋，使得用戶的成績＋1分，然後再將加分後的playresult轉換類型後顯示到playerScore上。

//轉換成整型用於成績加分
NSInteger playerResult = [self.playerScore.text integerValue];
//成績＋1
playerResult ++;
//重新轉換爲label顯示
[self.playerScore setText:[NSString stringWithFormat:@"%d",playerResult]];

那麼可想而知其他的情況就是電腦贏咯，那麼所有的操作與用戶的操作肯定是一樣的啦，這裏就不贅述了，大家嘗試練習一下吧

同時是不是需要將你贏了的消息或者你輸了的消息顯示在前端呀，還記得那個stringmessage嗎，現在就要用到它

[self.messageLabel setText:stringMessage];

messagelabel是我們之前聲明的一個label對象，我們設置了他的內容爲stringmessage裏面的內容。

當用戶選擇了出拳，同時結果也顯示了，那麼那個動畫還是在一直的播放，是不是應該停止，然後顯示的是電腦隨機選擇的一張，用戶顯示的是自己選擇的那一張，這當然是可以做到的

//1.停止動畫
[self.computerImage stopAnimating];
[self.playerImage stopAnimating];
//2.停止後設置結果圖片
[self.computerImage setImage:_imageList[computerSelect]];
[self.playerImage setImage:_imageList[playSelect]];

只需要調用stopAnimating就可以停止動畫，然後給image view設置我們之前定義好存放圖片的數組中下標對應電腦選擇數字的圖片，用戶這邊也是一樣，顯示的是用戶自己選擇的圖片。

接着是不是應該將另一個view顯示出來，其中包含重新開始的按鈕，沒錯，我們只要設置是否需要隱藏view就可以

[self.actionView setHidden:YES];

注意，這裏問的是actionView是否需要隱藏，yes是隱藏，no爲不用隱藏

我們要隱藏的這個view就包含了3個按鈕（石頭、剪刀、布），當然爲了顯示結果，肯定要把操作界面隱藏咯。

但是這樣的效果，好像很快速就顯示了，就像秒沒的，沒有一個隱藏的過程，有點醜陋，那麼沒事，我們給他添加一點動畫效果咯。

[UIView animateWithDuration:2.0f animations:^{
[self.actionView setCenter:CGPointMake(self.actionView.center.x, self.actionView.center.y+130)];
}];

動畫時間設置爲2.0f，同時這個隱藏其實就是將view這個窗體的y值放置在屏幕的最下層的以下，那麼只要在^｛｝代碼塊中添加修改控件位置的代碼就可以。

ps：center可以改變控件中心的x，y值

那麼在結果顯示的時候顯示你輸了，你是不是很不服氣，那麼你就想再戰一把，這時候我們之前設置的重新開始按鈕，是不是就起到作用了，那麼我們開始startGame方法

之前我們說到，在顯示結果的時候將用戶選擇操作的界面已經隱藏了，那麼重新開始的時候，是不是又要重新顯示，那麼只要再次修改y值就可以了。之前的是＋130，現在只需要－130就可以咯：）

[UIView animateWithDuration:2.0f animations:^{
[self.actionView setCenter:CGPointMake(self.actionView.center.x, self.actionView.center.y-130)];
}];

接着就是再次讓圖片動畫播放

[self.computerImage startAnimating];
[self.playerImage startAnimating];

並且將之前那一局的結果清空。

[self.messageLabel setText:@""];

到這裏基本的功能就已經全部實現了。：）有沒有很簡單，就是這樣。

3、整體完善

遊戲當然肯定是要有背景音樂的咯，我們引入，添加到項目中

同時將音樂文件也包含至項目中

緊接着在ViewController.m中聲明一個全局變量

AVAudioPlayer *_backMusic;

因爲背景音樂是在加載程序時就一直播放，那麼同樣的也是寫在viewdidload中咯，在這之前我們要做的就是：
1、引入AVFoundation框架
2、定義聲音播放器，也就是指定音樂路徑並且將路徑的字符串轉化爲url
3、初始化聲音播放器
4、設置聲音播放器
5、開始播放

//指定音頻路徑
NSString *path = [[NSBundle mainBundle] pathForResource:@"背景音樂" ofType:@"caf"];
//將路徑轉化爲url，本地使用時必須要用fileurlwithpath
NSURL *url = [NSURL fileURLWithPath:path];
//加載url
_backMusic = [[AVAudioPlayer alloc] initWithContentsOfURL:url error:nil];
//設置播放器屬性（－1就是播放無限次數）
[_backMusic setNumberOfLoops:-1];
//播放音樂之前做準備
[_backMusic prepareToPlay];
//開始播放
[_backMusic play];

好了到這裏，這個小遊戲也就基本完成了，其中涉及到了image view、view、button、label、avfoundation的使用，希望對大家能夠有一些小小的幫助≥ _ ≤