(1) IOS笔记本——第一个IOS小游戏----猜图游戏
◇这是我个人的第一个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]; } }
大致把基本上的功能给概述完了,好久没有写博客了,感觉这篇都在堆代码,写得好烂,下次我改进。