iOS菜狗養成路之BullEyeGame遊戲
首先呢，自我介紹一下，本人剛入手ios開發，仍屬於菜狗行列中的小白：）這是第一次寫這種小技術博客，兩個目的，一爲了讓自己更好的理清代碼思路，二爲了方便廣大像我一樣剛入門的小菜狗更好的去理解開發的思路。
好了，廢話就bb到這裏就夠了，開始進入正題，這一篇博客介紹的是一款考驗眼力的遊戲。文字總是扯淡，直接上圖吧。
在遊戲的開始時，屏幕的右上角會隨機出現一個0-100之間的數字，玩家通過移動“靶心”在移動條上儘可能的接近這個數字，然後點擊射擊，玩家將會獲得一個成績分數，遊戲可以多回合制，用於小夥伴之間愉快的交流（嘻嘻）。
看到了這樣的一個界面，是不是覺得很高端？估計只有博主我這種小菜狗沒見過世面纔會這樣覺得吧，然而當要求讓我寫這個遊戲的時候，我第一感覺也是覺得挺複雜的，現在覺得也就這樣吧。只要我們能夠思路明確，清晰那麼就是手到擒來咯。
面對這樣一個小遊戲，我們可以大體的分爲3個部分：
- 界面搭建
- 功能實現
- 整體完善
好了，看見這三個步驟是不是還是覺得我在瞎bb，哈哈，好了不再瞎扯了，我們一步一步的來分析了。
1.界面的搭建
首先我們打開宇宙神器之一的XCode，創建一個Single View Application,給項目起個名（可以叫‘＊＊＊＊＊＊’哈哈）建完項目後是這樣的：
那麼首先我們將Protrait這個勾點掉，否則屏幕就不能橫屏了，再點擊Main.storyboard，這個相當於是設計界面。
點擊中間的view controller （可能這個會隱藏，那麼直接點下方那個小矩形，便會彈出來）
然後點擊右側的show the file inspector ，然後將劃線處的勾去掉，這樣模擬器的尺寸就會正常了。
再點擊屬性按鈕，也就是第4個按鈕，設置成如下圖。
然後我們要在這個界面上添加控件，進行遊戲的操作，那麼在控件菜單中，我們選擇相應的控件之間拖上去就可以（1個slider 8個label 3個button）
修改控件的名字後如下圖
2.功能實現
好了，按照之前的步驟將界面建立好，現在我們開始功能的實現，首先就是要建立控件與方法的聯繫，那麼就是connection，點擊viewcontroller.h（聲明文件），然後在控件上按住control移到viewcontroller.h上，初始化一系列的申明。如下圖：
建立好鏈接後，我們在viewcontroller.m（實現文件）裏面進行功能的設計。
在編寫功能的時候讓我們先來縷縷思路，一步一步來。
首先我們是不是要先獲得一個隨機數，那麼在Objective－c中應該怎麼寫呢？
我們先在實現文件的類裏面定義幾個需要使用的全局變量。
@interface ViewController (){
int _r;//回合數
int _result;//分數結果
int _currentValue;//slider分數
int _randValue;//隨機數
}
@end
那麼隨機數就可以這樣獲得
_randValue = arc4random() % 101;//獲得隨機數接着我們注意一下這個方法
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
@end
}這個其實是在你運行程序是，模擬器初始化加載的一個方法，說得直白一點，也就是你一點開這個app，它首先運行這個方法裏面的內容。
那麼這樣是不是就有思路了？我們是不是可以通過自己寫一個開始遊戲和顯示各種label的方法，然後在這個初始化加載方法中調用呢？
說做就做吧
首先我們先寫一個開始遊戲的方法（我會解釋每一行的代碼，其實我都有註釋）
- (void)startNewGame{
_result = 0;//結果初始化爲0分
_r = 0;//回合初始化爲0
_randValue = arc4random() % 101;//獲得隨機數
_currentValue = 50;//滑動條的靶心設置
self.slider.value = _currentValue;//使得每回合重置爲中間
}那麼在每一次遊戲結束後，回合數會＋1，也就是 _r = _r + 1;但是當我們運行的界面獲得一個成績彈出成績框時（類似C#的messageBox）我們點擊確定後，要使得成績分數添加顯示、以及回合、隨機數等又重新設置，但是如果調用startNewGame方法，那麼又會使得回合初始化爲0，因此爲了避開這樣的問題，我們再寫一個專門設置回合的方法
- (void)startNewRound{
_r = _r + 1;//每回合後回合數＋1
_randValue = arc4random() % 101;//獲得隨機數
_currentValue = 50;
self.slider.value = _currentValue;//使得每回合重置爲中間
}現在我們發現在startGame方法中有重複的內容，那麼就可以修改爲
- (void)startNewGame{
_result = 0;
_r = 0;
[self startNewRound];//在開始遊戲的時候，調用新回合函數
}接着我們要將獲得隨機數、成績數、回合數都顯示在界面上，也就是賦值給label
- (void)updateLable{
self.randnum.text = [NSString stringWithFormat:@"%d",_randValue];//顯示隨機數
self.round.text = [NSString stringWithFormat:@"%d",_r];//回合初始化
self.score.text = [NSString stringWithFormat:@"%d",_result];//成績初始化
}這裏因爲label都是字符串屬性，那麼我們要利用NSString類中的stringWithFormat方法將數字給格式轉化爲字符串然後賦值。
那麼現在在viewDidLoad方法中就可以調用之前我們寫的方法了
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
[self startNewGame];//調用遊戲初始化
[self updateLable];//將分數、回合顯示
}那麼現在我們移動滑動條的滑塊是沒有任何變化的，因爲我們還沒在之前聲明的方法裏寫功能咯：）
其實很簡單，就是這個方法和之前的滑動條控件是連接着的，那麼當你滑動的時候，編譯器就已經開始監聽了，只需要把滑動時slider獲得數值賦值給我們之前定義的變量即可，注意因爲在滑動條上獲得數字都是小數，需要四捨五入，再此我們使用lround
- (IBAction)slidermove:(UISlider *)sender{
_currentValue = lround(self.slider.value);//lround 四捨五入
}這樣就能夠獲得你滑動的數值了。
這樣我們就可以開始進行比較了吧，只需要將_randValue（隨機數）和_currentValue（滑動的分數）進行比較，遊戲的目的是爲了讓考驗你是否能夠精確的將滑塊拖到與隨機數相等的位置，那麼如果有誤差是不是應該就是兩端的，結果是用100減去這個差，這個差肯定是要一個正數，否則不就變成了加分了麼，因此只需要利用絕對值abs就可以輕鬆的解決了，對吧。
int f2 = abs(_randValue - _currentValue);//計算比較的分數
int singleResult = 100 - f2;//單局得分然後就是判斷分數的好壞咯，我就粗略的分爲三個範圍如果完全接近那就是“完美”，如果接近差在10以內爲“還不錯”，其他的爲“再接再厲！”
if (f2 == 0) {
tittle = @"完美!";
}
else if(f2 < 10){
tittle = @"還不錯！";
}
else{
tittle = @"再接再厲！";
}
那麼就需要像在c＃上一樣，點擊了“射擊”按鈕後彈出一個類似MessageBox的消息框，在oc上我們使用AlertView這個類中的方法就可以方便快速的設置
- (IBAction)hit{
int f2 = abs(_randValue - _currentValue);//計算比較的分數
int singleResult = 100 - f2;
_result = _result + singleResult;//最終成績
//顯示成績框
NSString *tittle;
if (f2 == 0) {
tittle = @"完美!";
}
else if(f2 < 10){
tittle = @"還不錯！";
}
else{
tittle = @"再接再厲！";
}
NSString *message = [NSString stringWithFormat:@"你的分數：%d",singleResult];
UIAlertView *alertview = [[UIAlertView alloc]
initWithTitle:tittle
message:message
delegate:self
cancelButtonTitle:@"OK"
otherButtonTitles:nil];
[alertview show];
}那麼就像我們之前提到的那樣，在成績的消息框彈出來之後，我們關閉消息框後，新一輪的遊戲又要繼續進行，那麼我們通過UIAlertViewDelegate這個協議進行操作，調用這個接口中的方法添加如下方法
- (void)alertView:(UIAlertView *)alertView didDismissWithButtonIndex:(NSInteger)buttonIndex
{
[self startNewRound];//開始新的一輪
[self updateLable];//更新顯示各個數字
}接着我們就開始寫返回功能，其實最簡單，就是將_result和_r全部重新置0。
- (IBAction)back{
_result = 0;
_r = 0;
self.score.text = [NSString stringWithFormat:@"%d",_result];
self.round.text = [NSString stringWithFormat:@"%d",_r];
}寫到這裏，我們這個遊戲的app就已經完成了一大半了，我們是不是忘記了一個“help”這個按鈕？如果玩家不會玩，當然第一反應就是看操作說明咯，所以我們這個也是必不可少的
那麼由之前的學習我們可以知道，help這個按鈕會和方法相連接，當點擊按鈕後，程序就會實現方法內的功能，然而我們要實現在點擊help按鈕後顯示另一個操作說明頁面，是不是應該就再新建一個界面，首先我們要新建一個聲明和實現文件去控制這個界面。
命名爲AboutViewController
然後又點擊到Main.storyboard,從工具箱中拖一個空白頁面View Controller，並將這個空白頁屬於AboutViewController這個類
同時重複之前的設置，將屏幕橫過來，我就不贅述了。
接着我們將這個頁面與help這個按鈕鏈接起來，方法一樣，再help上按住control連接到這個頁面即可，同時添加一個uiwebview，我們爲了更好的顯示操作說明，將說明寫在一個html文件上，返回通過這個控件顯示網頁內容。
然後編寫html代碼
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bull's Eye</title>
<meta charset="utf-8">
<style type="text/css">
html { background: #faeecd; }
body { color: #000; font: 18px "Arial Rounded MT Bold", Helvetica; }
h1 { text-align: center; color: rgb(96, 30, 0); font-size: 24px; font-weight: bold; }
</style>
</head>
<body>
<h1>★ Bull's Eye 遊戲說明★</h1>
<p>這是一個測試你手指和眼力的遊戲，首先屏幕右上角會隨機出現一個數字，你需要移動靶心，然後儘量的接近那個隨機數</p>
<p>然後點擊射擊，最終你將獲得一個分數，遊戲按照多回合制進行。</p>
<p style="text-align:center"><!--<em>Enjoy Time!</em>--></p>
</body>
</html>
命名爲BullsHelp.html，然後將這個文件添加至工程項目中
然後在AboutViewController.h中初始化這個webview對象以及關閉的按鈕
#import <UIKit/UIKit.h>
@interface AboutViewController : UIViewController
@property (nonatomic,weak) IBOutlet UIWebView *webview;
- (IBAction)close;
@end接着就是將這個html內的文本顯示到uiwebview控件中吧，那麼就需要定義一個htmlFile文件對象，將這個html的路徑存放在裏面，然後將這個htmlFile對象的內容存在NSData這個類型的htmlData對象中，然後設置本地路由目的是加載本地文件，最後將htmlData內的內容顯示在控件中。這個方法是不是在運行程序時就應該顯示，那麼只需要加在viewDidLoad這個方法內就好
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
NSString *htmlFile = [[NSBundle mainBundle] pathForResource:@"BullsHelp" ofType:@"html"];//將“BullHelp.html這個文件存放在htmlFile對象內”
NSData *htmlData = [NSData dataWithContentsOfFile:htmlFile];//將網頁裝入nsdata數據包中
NSURL *baseURL = [NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]];//加載本地文件
[self.webview loadData:htmlData MIMEType:@"text/html" textEncodingName:@"UTF-8" baseURL:baseURL];
}
然後就是設置close按鈕，這個就更簡單了，只需要退出這個控制器就可以了，同時我們通過設置prefersStatusBarHidden，隱藏手機頂端的狀態欄，方便我們遊戲。
- (IBAction)close{
[self.presentingViewController
dismissViewControllerAnimated:YES completion:nil];
}
- (BOOL)prefersStatusBarHidden{
return YES;
}做到這裏，這個遊戲已經基本完成了，就是醜了點，不要緊，我們進入第三步整體調整一下就可以了。
點擊images.xcasssets，然後在最下面有一個“＋”號，點擊import，將所需的圖片素材全部導入進來
然後在回到Main.storyboard中給每個界面添加一個image View這個控件並且覆蓋整個手機，將背景設置爲background
然後開始設置按鈕的圖片，點擊一個按鈕，將按鈕類型設置爲custom型，
調整按鈕大小即可，其他的按鈕根據圖片名進行設置，同時將字體自由設置爲個人喜歡的字體，效果如下圖
這樣看着滑動條還是很醜，但是因爲這個滑動條被封裝的很好，只能通過代碼動態添加修改，那麼小白我都可以，相信你們可以的，只要多多的看書，查資料就好了。
只需要在DidViewLoad這個加載方法中添加
UIImage *thumbImageNormal = [UIImage imageNamed:@"SliderThumb-Normal"];//將正常狀態下的靶心圖片賦值給對象 thumbImageNormal
[self.slider setThumbImage:thumbImageNormal forState:UIControlStateNormal];//將slider的靶心設置爲上述圖片
UIImage *thumbImageHighLighted = [UIImage imageNamed:@"SliderThumb-Highlighted"];//將點擊狀態下的靶心圖片賦值給對象 thumbImageHighlight
[self.slider setThumbImage:thumbImageHighLighted forState:UIControlStateHighlighted];//將slider點擊狀態下的靶心設置爲上述圖片
//將滑動條左邊這一半圖片賦值給trackLeftImage這個對象，同時設置上下左右的範圍。
UIImage *trackLeftImage = [[UIImage imageNamed:@"SliderTrackLeft"]
resizableImageWithCapInsets:UIEdgeInsetsMake(0, 14, 0, 14)];
//加載滑動條左邊這部分圖片
[self.slider setMinimumTrackImage:trackLeftImage forState:UIControlStateNormal];
//將滑動條右邊這一半圖片賦值給trackLeftImage這個對象，同時設置上下左右的範圍。
UIImage *trackRightImage = [[UIImage imageNamed:@"SliderTrackRight"]
resizableImageWithCapInsets:UIEdgeInsetsMake(0, 14, 0, 14)];
//加載滑動條右邊這部分圖片
[self.slider setMaximumTrackImage:trackRightImage forState:UIControlStateNormal];
此時效果就是這樣
做到這裏這個考驗眼力的小遊戲就基本全部搞定了，一步一步下來是不是也覺得就那樣，沒錯，確實就這樣，沒啥花樣。
之後會將源代碼以及素材貼上來供讀者嘗試，歡迎廣大熱愛的ios的愛好者能夠跟我一起共同的學習，願與君共勉！
