◇这是我个人的第一个ios小游戏--猜图游戏，程序很早就写好了，今天写成博客，希望大家多多指教。
◇先看看效果图是长啥样的：
◇看完效果图，相信大家都知道这个软件是怎样玩的了吧，功能上我就不叙述太多了，我就说说步骤和细节吧。
步骤：
◇0、先修改一下状态栏，让状态栏以白色显现出来，代码如下：
1 //重写状态栏
2 - (UIStatusBarStyle)preferredStatusBarStyle
3 {
4 return UIStatusBarStyleLightContent;
5 }
◇1、创建新项目，在storyboard上搭建出基本的界面。其中，题号用UILabel、图片用UIIamgeView、金币用UIButton、左右四个红色功能按钮用 UIButton、每个字的按钮都用UIButton。
◇2、先加载事先准备好的.plist文件，并且转换成模型，代码如下
1 - (NSArray *)questions
2 {
3 if (_questions == nil) {
4 //1.加载plist
5 NSArray *dictArray = [NSArray arrayWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"questions" ofType:@"plist"]];
6 //2.字典转模型
7 NSMutableArray *questionArray = [NSMutableArray array];
8 for (NSDictionary *dict in dictArray) {
9 MJQuestion *question = [MJQuestion questionWithDict:dict];
10 [questionArray addObject:question];
11 }
12 _questions = questionArray;
13 }
14 return _questions;
15 }
◇注意：其中MJQuestion的代码是如下写的（包含了类方法和实例方法的标准命名）：
- (instancetype)initWithDict:(NSDictionary *)dict
{
if (self = [super init]) {
self.icon = dict[@"icon"];
self.title = dict[@"title"];
self.answer = dict[@"answer"];
self.options = dict[@"options"];
}
return self;
}
+ (instancetype)questionWithDict:(NSDictionary *)dict
{
return [[self alloc] initWithDict:dict];
}
◇3、为了方便布局，我把答案的按钮和选项按钮都分别放在一个UIView里面，这样能比较方便的控制各个方格的位置，代码如下
1 //添加正确的答案
2 //先移除
3 for (UIView *subView in self.answerView.subviews) {
4 [subView removeFromSuperview];
5 }
6
7 int length = question.answer.length;
8 for (int i = 0; i < length; i++) {
9 UIButton *answerBtn = [[UIButton alloc] init];
10 [answerBtn setBackgroundImage:[UIImage imageNamed:@"btn_answer"] forState:UIControlStateNormal];
11 [answerBtn setBackgroundImage:[UIImage imageNamed:@"btn_answer_highlighted"] forState:UIControlStateHighlighted];
12 //设施frame
13 CGFloat margin = 10;
14 CGFloat answerW = 35;
15 CGFloat answerH = 35;
16 CGFloat viewW = self.view.frame.size.width;
17 CGFloat leftMargin = (viewW - length * answerW - margin * (length - 1)) * 0.5;
18 CGFloat answerX = leftMargin + i * (answerW + margin);
19 answerBtn.frame = CGRectMake(answerX, 0, answerW, answerH);
20 [answerBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
21 [self.answerView addSubview:answerBtn];
22 [answerBtn addTarget:self action:@selector(answerClick:) forControlEvents:UIControlEventTouchUpInside];
23 }
24
25 //添加options选项
26 for (UIView *subView in self.optionView.subviews) {
27 [subView removeFromSuperview];
28 }
29
30
31 int lengthOptions = question.options.count;
32 for (int i = 0; i < lengthOptions; i++) {
33 UIButton *optionBtn = [[UIButton alloc] init];
34 [optionBtn setBackgroundImage:[UIImage imageNamed:@"btn_option"] forState:UIControlStateNormal];
35 [optionBtn setBackgroundImage:[UIImage imageNamed:@"btn_option_highlighted"] forState:UIControlStateHighlighted];
36 [optionBtn setTitle:question.options[i] forState:UIControlStateNormal];
37 [optionBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
38
39 //设施frame
40
41 CGFloat margin = 10;
42 CGFloat optionW = 35;
43 CGFloat optionH = 35;
44 CGFloat viewW = self.view.frame.size.width;
45 CGFloat leftMargin = (viewW - 7 * optionW - margin *6) * 0.5;
46 int col = i % 7;
47 CGFloat optionX = leftMargin + col * (optionW + margin);
48 int row = i / 7;
49 CGFloat optionY = row * (optionH + margin);
50 optionBtn.frame = CGRectMake(optionX, optionY, optionW, optionH);
51 [self.optionView addSubview:optionBtn];
◇4、设置监听选项按钮：
◇首先监听按钮，然后接下来是点击的具体实现
//监听点击
[optionBtn addTarget:self action:@selector(optionClick:) forControlEvents:UIControlEventTouchUpInside];
- (void)optionClick:(UIButton *)optionBtn
{
for (UIButton *answerBtn in self.answerView.subviews) {
NSString *answerTitle = [answerBtn titleForState:UIControlStateNormal];
if (answerTitle.length <= 0) {
optionBtn.hidden = YES;
NSString *optionTitle = [optionBtn titleForState:UIControlStateNormal];
[answerBtn setTitle:optionTitle forState:UIControlStateNormal];
break;
}
}
//判断是否有空格
BOOL full = YES;
NSMutableString *tempAnswerTitle = [NSMutableString string];
for (UIButton *answerBtn in self.answerView.subviews) {
NSString *answerTitle = [answerBtn titleForState:UIControlStateNormal];
if (answerTitle.length == 0) {
full = NO;
}
if(answerTitle){
[tempAnswerTitle appendString:answerTitle];
}
}
//判断答案是否正确
if(full)
{
MJQuestion *question = self.questions[self.index];
if ([tempAnswerTitle isEqualToString:question.answer]) {
//答对了
for (UIButton *answerBtn in self.answerView.subviews)
{
[answerBtn setTitleColor:[UIColor greenColor] forState:UIControlStateNormal];
if(self.index <9)
{
//延迟执行
[self performSelector:@selector(nextQuestion) withObject:nil afterDelay:3.0];
}
}
}
else
{
//打错了
for (UIButton *answerBtn in self.answerView.subviews)
{
[answerBtn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
}
}
}
}
◇5、然后是答案按钮的点击事件的实现，点击含有子的框框的时候，把字还给原来的选项按钮。
1 - (void)answerClick:(UIButton *)answerBtn
2 {
3 NSString *answerTitle = [answerBtn titleForState:UIControlStateNormal];
4 [answerBtn setTitle:nil forState:UIControlStateNormal];
5 for (UIButton *optionBtn in self.optionView.subviews) {
6 NSString *optionTitle = [optionBtn titleForState:UIControlStateNormal];
7 if ([answerTitle isEqualToString:optionTitle] && optionBtn.hidden == YES) {
8 optionBtn.hidden = NO;
9 break;
10 }
12 }
13 }
◇6、点击图片换大图，点击大图换小图。这其中带有动画效果。
- (IBAction)bigImg {
//1.添加阴影
UIButton *coverBtn = [[UIButton alloc] init];
coverBtn.backgroundColor = [UIColor blackColor];
coverBtn.frame = self.view.bounds;
coverBtn.alpha = 0.5;
[coverBtn addTarget:self action:@selector(smallImg) forControlEvents:UIControlEventTouchUpInside];
self.coverBtn = coverBtn;
[self.view addSubview:coverBtn];
self.opp = self.iconBtn.frame;
//2.更换阴影和头像位置
//插入动画效果
[UIView beginAnimations:nil context:nil];
[self.view bringSubviewToFront:self.iconBtn];
//3.更换头像的frame
[UIView setAnimationDuration:0.5];
//设置头像矩形属性
CGFloat iconW = self.view.frame.size.width;
CGFloat iconH = iconW;
CGFloat iconY = (self.view.frame.size.height - iconH) * 0.5;
self.iconBtn.frame = CGRectMake(0, iconY, iconW, iconH);
//提交动画
[UIView commitAnimations];
}
◇7、接下来就是点击大图还原给小图：
1 - (void)smallImg
2 {
3 //1.删除阴影
4 [self.coverBtn removeFromSuperview];
5 self.coverBtn = nil;
6
7 //2.恢复原来icon位置
8 [UIView beginAnimations:nil context:nil];
9 [UIView setAnimationDuration:0.5];
10
11 self.iconBtn.frame = self.opp;
12
13 [UIView commitAnimations];
14 }
◇然后用一个公用的方法来调用bigImg和smallImg:
- (IBAction)pigImg
{
//以是否有遮盖来判断是放大图片还是缩小图片
if (self.coverBtn == nil) {
[self bigImg];
} else {
[self smallImg];
}
}
大致把基本上的功能给概述完了，好久没有写博客了，感觉这篇都在堆代码，写得好烂，下次我改进。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
