iOS菜狗养成路之BullEyeGame游戏

游戏"/>

iOS菜狗养成路之BullEyeGame游戏

iOS菜狗养成路之BullEyeGame游戏

首先呢，自我介绍一下，本人刚入手ios开发，仍属于菜狗行列中的小白：）这是第一次写这种小技术博客，两个目的，一为了让自己更好的理清代码思路，二为了方便广大像我一样刚入门的小菜狗更好的去理解开发的思路。好了，废话就bb到这里就够了，开始进入正题，这一篇博客介绍的是一款考验眼力的游戏。文字总是扯淡，直接上图吧。

在游戏的开始时，屏幕的右上角会随机出现一个0-100之间的数字，玩家通过移动“靶心”在移动条上尽可能的接近这个数字，然后点击射击，玩家将会获得一个成绩分数，游戏可以多回合制，用于小伙伴之间愉快的交流（嘻嘻）。看到了这样的一个界面，是不是觉得很高端？估计只有博主我这种小菜狗没见过世面才会这样觉得吧，然而当要求让我写这个游戏的时候，我第一感觉也是觉得挺复杂的，现在觉得也就这样吧。只要我们能够思路明确，清晰那么就是手到擒来咯。面对这样一个小游戏，我们可以大体的分为3个部分：

1. 界面搭建
2. 功能实现
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:tittlemessage:messagedelegate:selfcancelButtonTitle:@"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.presentingViewControllerdismissViewControllerAnimated: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的爱好者能够跟我一起共同的学习，愿与君共勉！